vue_2

11. V-for和key属性

1. 遍历数组，参数(item,index) in list
2. 遍历对象，参数(value,key,index) in list
3. 遍历数字，num in 10 (1~10)
4. key在使用v-for的时候都需要去设置key
5. 让界面元素和数组里的每个记录进行绑定
6. key只能是字符串或者数字
7. key必须是唯一的

12. v-if与v-show区别

1. 区别：
   1. v-if删除dom元素
   2. v-show设置display:none来隐藏
2. 应用场景：
   1. v-if只修改一次的时候可以使用v-if
   2. v-show频繁切换的时候可以使用v-show

13. Vue中样式的使用

 使用class样式:

1. 数组
2. 三目表达式
3. 数组内置对象（对象的键是样式的名字，值是Boolean类型）
4. 直接通过对象

使用内联样式

1. 直接在元素上通过 :style 的形式，书写样式对象
2. 将样式对象，定义到 data 中，并直接引用到 :style 中
   1. 在data上定义样式
   2. 在元素中，通过属性绑定的形式，将样式对象应用到元素中
3. 在 :style 中通过数组，引用多个 data 上的样式对象
   1. 在data上定义样式
   2. 在元素中，通过属性绑定的形式，将样式对象应用到元素中

15. 过滤器

概念

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

作用

在我们页面显示值之前加一层过滤，展示我们过滤后的值

注意事项

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

使用语法

1. {{变量 | 过滤器名}}
2. {{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值

定义语法

1. 全局定义：

通过Vue提供的filter方法定义：Vue.filter()

参数：过滤器的名字和过滤器执行函数

        2.私有定义

filters这个是实例化Vue的一个参数，和data,methods平级的，里面放的就是我们这个实例的私有过滤器。

          3.注意事项

1. 函数的第一个参数都是data，也就是我们要过滤的值。
2. 过滤器可以自定义一些参数。
3. 过滤器函数的返回值就是最终显示的值

16. 键盘修饰符

16.1 注册一个监听按键事件

1. 监听所有按键：v-on:keyup
2. 监听指定按键：v-on:keyup.按键码

键盘键码一览表 - 百度文库

16.2 使用按键别名

vue提供的按键别名

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

16.3 自定义按键别名

17. 自定义指令

17.1 全局定义

使用这个方法进行全局定义：Vue.directive()

参数：

1. 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）

2. 对象，里面包含三个钩子方法

1. bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
2. inserted 这个元素已经渲染到界面上之后执行
3. update 当元素有更新的时候执行

3. 这三个方法的参数有哪些

1. el：指令所绑定的元素，可以用来直接操作 DOM 。
2. binding：一个对象，包含以下属性：
3. name：指令名，不包括 v- 前缀。
4. value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
5. oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用。

17.2 私有定义

1. 实例里有个directives属性，这个属性是个对象
2. 里面放的就是我们指令，这个对象键就是指令的名字，后面的对象就是指令的内容，和全局定义是一样的
3. 简写直接写一个函数，函数名就是指令的名字，其他和全局定义是一样的。