day1 总结

MVC 和 MVVM 的区别
学习了Vue中最基本代码的结构
插值表达式 v-cloak v-text v-html v-bind（缩写是:） v-on（缩写是@） v-model v-for v-if v-show
事件修饰符： .stop .prevent .capture .self .once
el 指定要控制的区域 data 是个对象，指定了控制的区域内要用到的数据 methods 虽然带个s后缀，但是是个对象，这里可以自定义了方法
在 VM 实例中，如果要访问 data 上的数据，或者要访问 methods 中的方法，必须带 this
在 v-for 要会使用 key 属性（只接受 string / number）
v-model 只能应用于表单元素
在vue中绑定样式两种方式 v-bind:class v-bind:style

什么是 Vue.js

Vue.js 是目前最火的一个前端框架，React 是最流行的一个前端框架（React 除了开发网站，还可以开发手机 App， Vue 语法也是可以用于进行手机 App 开发的，需要借助于 Weex）
Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三大主流框架！
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue 有配套的第三方类库，可以整合起来做大型项目的开发）
前端的主要工作？主要负责 MVC 中的 V 这一层；主要工作就是和界面打交道，来制作前端页面效果；

为什么要学习流行框架

企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱；

企业中，使用框架，能够提高开发的效率；

提高开发效率的发展历程：原生 JS -> Jquery 之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js（能够帮助我们减少不必要的 DOM 操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心 DOM 是如何渲染的了】）
在 Vue 中，一个核心的概念，就是让用户不再操作 DOM 元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；

增强自己就业时候的竞争力

人无我有，人有我优
你平时不忙的时候，都在干嘛？

框架和库的区别

框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。

node 中的 express；

库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

1. 从 Jquery 切换到 Zepto
1. 从 EJS 切换到 art-template

Node（后端）中的 MVC 与前端中的 MVVM 之间的区别

MVC 是后端的分层开发概念；
MVVM 是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM 把前端的视图层，分为了三部分 Model, View , VM ViewModel
为什么有了 MVC 还要有 MVVM

Vue.js `基本的代码结构`和`插值表达式` 和 MVVM 之间的对应关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.导入vue的包 -->
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <!-- 将来new的vue实例，会控制这个元素中的所有内容 -->
    <!-- vue 实例所控制的这个元素区域，就是我们的 v-->
    <div id="app">
        <p>{{msg}}</p>
    </div>
</body>

<script>
        // 2.创建个vue的实例
        // 当我们导入包在浏览器中多了vue构造函数
        // 注意我们new出来的这个vm对象就是我们mvvm中的 vm调度者
        var vm = new Vue({
            el:'#app', //表示当前我们new的这个vue实例要控制表面上的那区域
            // 这里了的data 就是mvvm中的m，专门用俩保存每个页面的数据
            data: { //data属性中，存放的是el中的实例
                msg: '欢迎学习vue' //通过vue提供的指令很方便的渲染到页面上，程序员不再需要手动操作dom元素
            }
        })
    </script>

</html>

Vue 之 - `v-cloak`

1 2	<!-- 使用 v-cloak 能解决插值表达式闪烁问题 --> <p v-cloak>======{{msg}}-------</p>

Vue 指令之`v-text`和`v-html`

<h4 v-text="msg"></h4>
<!-- 默认v-text 是没有闪烁问题的 -->
<!-- v-text 会覆盖元素用原本的内容，但是 插入值表达式 只会替换自己的这个占位符，不会整个元素的内容清空 -->

<div>{{msg2}}</div>
<div v-text="msg2"></div>
<div v-html="msg2"></div>
<!-- html 插入html的效果表达式 -->

<script src="./lib/vue-2.4.0.js"></script>
<script>
    var vm = new Vue({
        el: '#id',
        data: {
            msg: '我是你爸爸',
            msg2: '<h1>哈哈，我是你爸爸，我很骄傲</h1>',
            mytitle: '这是一个自己定义的title'
        },
        methods: { //这个methos属性中定义当前vue实例所有可用的方法
            show: function () {
                alert("我是你爸爸")
            }
        }
    })
</script>

Vue 指令之`v-bind`的三种用法

直接使用指令v-bind
使用简化指令:
在绑定的时候，拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"

<!-- v-bind: 是 vue中 用来绑定属性的指令 -->
<input type="button" value="按钮" v-bind:title="mytitle + '123'">
<!-- 注意： v-bind： 指令可以被简写位:要绑定的属性 -->
<!-- v-bind中，可以写合法的js表达式 -->

<!-- js 代码看v-text v-html处 -->

Vue 指令之`v-on`和`跑马灯效果`

v-on

直接使用指令v-on
使用简化指令@

<!-- vue 中提供了 v-on ：事件绑定机制 -->
<!-- <input type="button" value="按钮" :title="mytitle + '123'"> -->

<input type="button" v-on:click="show" :value="mytitle + '123'">
<input type="button" value="按钮" @click="show">
<input type="button" value="按钮" v-on:mouseover="show">

<!-- js 代码看v-text v-html处 -->

跑马灯效果

HTML 结构：

<div id="app">

    <p>{{info}}</p>

    <input type="button" value="开启" v-on:click="go">

    <input type="button" value="停止" v-on:click="stop">

  </div>

Vue 实例：

// 创建 Vue 实例，得到 ViewModel

   var vm = new Vue({

     el: '#app',

     data: {

       info: '猥琐发育，别浪~！',

       intervalId: null

     },

     methods: {

       go() {

         // 如果当前有定时器在运行，则直接return

         if (this.intervalId != null) {

           return;

         }

         // 开始定时器

         this.intervalId = setInterval(() => {

           this.info = this.info.substring(1) + this.info.substring(0, 1);

         }, 500);

       },

       stop() {

         clearInterval(this.intervalId);

       }

     }

   });

Vue 指令之`v-on的缩写`和`事件修饰符`

事件修饰符：

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次

Vue 指令之`v-model`和`双向数据绑定`

简易计算器案例

HTML 代码结构

<div id="app">

  <input type="text" v-model="n1">

  <select v-model="opt">

    <option value="0">+</option>

    <option value="1">-</option>

    <option value="2">*</option>

    <option value="3">÷</option>

  </select>

  <input type="text" v-model="n2">

  <input type="button" value="=" v-on:click="getResult">

  <input type="text" v-model="result">

</div>

Vue 实例代码：

// 创建 Vue 实例，得到 ViewModel

   var vm = new Vue({

     el: '#app',

     data: {

       n1: 0,

       n2: 0,

       result: 0,

       opt: '0'

     },

     methods: {

       getResult() {

         switch (this.opt) {

           case '0':

             this.result = parseInt(this.n1) + parseInt(this.n2);

             break;

           case '1':

             this.result = parseInt(this.n1) - parseInt(this.n2);

             break;

           case '2':

             this.result = parseInt(this.n1) * parseInt(this.n2);

             break;

           case '3':

             this.result = parseInt(this.n1) / parseInt(this.n2);

             break;

         }

       }

     }

   });

在 Vue 中使用样式

使用 class 样式

数组

1	<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>

数组中使用三元表达式

1	<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>

数组中嵌套对象

1	<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>

直接使用对象

1	<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>

使用内联样式

直接在元素上通过 :style 的形式，书写样式对象

1	<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>

将样式对象，定义到 data 中，并直接引用到 :style 中

在 data 上定义样式：

1
2
3

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}

在元素中，通过属性绑定的形式，将样式对象应用到元素中：

1	<h1 :style="h1StyleObj">这是一个善良的H1</h1>

在 :style 中通过数组，引用多个 data 上的样式对象

在 data 上定义样式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
}

在元素中，通过属性绑定的形式，将样式对象应用到元素中：

1	<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>

Vue 指令之`v-for`和`key`属性

迭代数组

1
2
3

<ul>
  <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
</ul>

迭代对象中的属性

1
2
3

<!-- 循环遍历对象身上的属性 -->

   <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>

迭代数字

1	<p v-for="i in 10">这是第 {{i}} 个P标签</p>

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue 将不是移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

Vue 指令之`v-if`和`v-show`

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

品牌管理案例

添加新品牌

删除品牌

根据条件筛选品牌

1.x 版本中的 filterBy 指令，在 2.x 中已经被废除：

filterBy - 指令

<tr v-for="item in list | filterBy searchName in 'name'">

  <td>{{item.id}}</td>

  <td>{{item.name}}</td>

  <td>{{item.ctime}}</td>

  <td>

    <a href="#" @click.prevent="del(item.id)">删除</a>

  </td>

</tr>

在 2.x 版本中手动实现筛选的方式：

筛选框绑定到 VM 实例中的 searchName 属性：

1
2
3

<hr> 输入筛选名称：

<input type="text" v-model="searchName">

在使用 v-for 指令循环每一行数据的时候，不再直接 item in list，而是 in 一个过滤的 methods 方法，同时，把过滤条件searchName传递进去：

<tbody>

      <tr v-for="item in search(searchName)">

        <td>{{item.id}}</td>

        <td>{{item.name}}</td>

        <td>{{item.ctime}}</td>

        <td>

          <a href="#" @click.prevent="del(item.id)">删除</a>

        </td>

      </tr>

    </tbody>

search 过滤方法中，使用数组的 filter 方法进行过滤：

search(name) {

  return this.list.filter(x => {

    return x.name.indexOf(name) != -1;

  });

}

Vue 调试工具`vue-devtools`的安装步骤和使用

Vue.js devtools - 翻墙安装方式 - 推荐

过滤器

概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；

私有过滤器

HTML 元素：

1	<td>{{item.ctime \| dataFormat('yyyy-mm-dd')}}</td>

私有 filters 定义方式：

filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用

    dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错

      var dt = new Date(input);

      // 获取年月日

      var y = dt.getFullYear();

      var m = (dt.getMonth() + 1).toString().padStart(2, '0');

      var d = dt.getDate().toString().padStart(2, '0');



      // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日

      // 否则，就返回  年-月-日 时：分：秒

      if (pattern.toLowerCase() === 'yyyy-mm-dd') {

        return `${y}-${m}-${d}`;

      } else {

        // 获取时分秒

        var hh = dt.getHours().toString().padStart(2, '0');

        var mm = dt.getMinutes().toString().padStart(2, '0');

        var ss = dt.getSeconds().toString().padStart(2, '0');



        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

      }

    }

  }

使用 ES6 中的字符串新方法 String.prototype.padStart(maxLength, fillString=’’) 或 String.prototype.padEnd(maxLength, fillString=’’)来填充字符串；

全局过滤器

// 定义一个全局过滤器

Vue.filter('dataFormat', function (input, pattern = '') {

  var dt = new Date(input);

  // 获取年月日

  var y = dt.getFullYear();

  var m = (dt.getMonth() + 1).toString().padStart(2, '0');

  var d = dt.getDate().toString().padStart(2, '0');



  // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日

  // 否则，就返回  年-月-日 时：分：秒

  if (pattern.toLowerCase() === 'yyyy-mm-dd') {

    return `${y}-${m}-${d}`;

  } else {

    // 获取时分秒

    var hh = dt.getHours().toString().padStart(2, '0');

    var mm = dt.getMinutes().toString().padStart(2, '0');

    var ss = dt.getSeconds().toString().padStart(2, '0');



    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

  }

});

注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

键盘修饰符以及自定义键盘修饰符

1.x 中自定义键盘修饰符【了解即可】

1	Vue.directive('on').keyCodes.f2 = 113;

2.x 中自定义键盘修饰符

通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名：

1	Vue.config.keyCodes.f2 = 113;

使用自定义的按键修饰符：

1	<input type="text" v-model="name" @keyup.f2="add">

自定义指令

自定义全局和局部的自定义指令：

// 自定义全局指令 v-focus，为绑定的元素自动获取焦点：

Vue.directive('focus', {

  inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用

    el.focus();

  }

});



// 自定义局部指令 v-color 和 v-font-weight，为绑定的元素设置指定的字体颜色 和 字体粗细：

  directives: {

    color: { // 为元素设置指定的字体颜色

      bind(el, binding) {

        el.style.color = binding.value;

      }

    },

    'font-weight': function (el, binding2) { // 自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数

      el.style.fontWeight = binding2.value;

    }

  }

自定义指令的使用方式：

1	<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">

Vue 1.x 中自定义元素指令【已废弃,了解即可】

Vue.elementDirective('red-color', {
  bind: function () {
    this.el.style.color = 'red';
  }
});

使用方式：

1	<red-color>1232</red-color>

不忘初心，方得始终

Vue day1

day1 总结

什么是 Vue.js

为什么要学习流行框架

框架和库的区别

Node（后端）中的 MVC 与前端中的 MVVM 之间的区别

Vue.js `基本的代码结构`和`插值表达式` 和 MVVM 之间的对应关系

Vue 之 - `v-cloak`

Vue 指令之`v-text`和`v-html`

Vue 指令之`v-bind`的三种用法

Vue 指令之`v-on`和`跑马灯效果`

v-on

跑马灯效果

Vue 指令之`v-on的缩写`和`事件修饰符`

事件修饰符：

Vue 指令之`v-model`和`双向数据绑定`

简易计算器案例

在 Vue 中使用样式

使用 class 样式

使用内联样式

Vue 指令之`v-for`和`key`属性

Vue 指令之`v-if`和`v-show`

品牌管理案例

添加新品牌

删除品牌

根据条件筛选品牌

Vue 调试工具`vue-devtools`的安装步骤和使用

过滤器

私有过滤器

全局过滤器

键盘修饰符以及自定义键盘修饰符

1.x 中自定义键盘修饰符【了解即可】

2.x 中自定义键盘修饰符

自定义指令

Vue 1.x 中自定义元素指令【已废弃,了解即可】

相关文章

day1 总结

什么是 Vue.js

为什么要学习流行框架

框架和库的区别

Node（后端）中的 MVC 与 前端中的 MVVM 之间的区别

Vue.js 基本的代码结构和插值表达式 和 MVVM 之间的对应关系

Vue 之 - v-cloak

Vue 指令之v-text和v-html

Vue 指令之v-bind的三种用法

Vue 指令之v-on和跑马灯效果

v-on

跑马灯效果

Vue 指令之v-on的缩写和事件修饰符

事件修饰符：

Vue 指令之v-model和双向数据绑定

简易计算器案例

在 Vue 中使用样式

使用 class 样式

使用内联样式

Vue 指令之v-for和key属性

Vue 指令之v-if和v-show

品牌管理案例

添加新品牌

删除品牌

根据条件筛选品牌

Vue 调试工具vue-devtools的安装步骤和使用

过滤器

私有过滤器

全局过滤器

键盘修饰符以及自定义键盘修饰符

1.x 中自定义键盘修饰符【了解即可】

2.x 中自定义键盘修饰符

自定义指令

Vue 1.x 中 自定义元素指令【已废弃,了解即可】

相关文章

Node（后端）中的 MVC 与前端中的 MVVM 之间的区别

Vue.js `基本的代码结构`和`插值表达式` 和 MVVM 之间的对应关系

Vue 之 - `v-cloak`

Vue 指令之`v-text`和`v-html`

Vue 指令之`v-bind`的三种用法

Vue 指令之`v-on`和`跑马灯效果`

Vue 指令之`v-on的缩写`和`事件修饰符`

Vue 指令之`v-model`和`双向数据绑定`

Vue 指令之`v-for`和`key`属性

Vue 指令之`v-if`和`v-show`

Vue 调试工具`vue-devtools`的安装步骤和使用

Vue 1.x 中自定义元素指令【已废弃,了解即可】