Vue属性、方法、指令

1、属性

属性	描述
el	绑定id，用来指示vue编译器从什么地方开始解析vue的语法，可以说是一个占位符
data	用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
methods	放置页面中的业务逻辑，js方法一般都放置在methods中
computed	计算属性，用来计算
template	用来设置模板，会替换页面元素，包括占位符
render	创建真正的Virtual Dom
watch	侦听属性。可以用来观察和响应 Vue 实例上的数据变动 watch:function(new,old){ … }监听data中数据的变化，两个参数，一个返回新值，一个返回旧值

1.1、el：挂载点

1. el是用来设置Vue实例挂载（管理）的元素
2. Vue会管理el选项命中的元素及其内部的后代元素
3. 可以使用其他选择器，但建议使用ID选择器
4. 可以使用在其他的双标签上，但不能使用在HTML和BODY上

1.2、data

1. Vue中用到的数据定义在data中
2. data中可以写复杂类型的数据
3. 渲染复杂类型数据时，遵守js的语法即可
   

1.3、methods

方法参数，该参数内部存放各种方法。

1.4、computed

在computed中，可以定义一些属性，这些属性叫计算属性，本质上是方法，只不过，我们在使用这些计算属性的时候，是把它们当作属性来使用的，并不会把计算属性当作方法来调用。

1. 计算属性在引用时，直接当作普通属性去引用，不需要加 ( )
2. 只要计算属性 function 内部所用到的 data 中的数据发生了变化，就会立即重新计算这个计算属性的值
3. 计算属性求值的结果会被缓存起来，方便下次直接调用

methods VS computed

methods和computed其中都可以写方法，而且两种方式的最终结果是完全相同的。

不同的是：

1. 在写法上computed计算属性的方式在使用时不用加()，而methods方式在使用时要像方法一样去用，必须加()
2. 计算属性是基于它们的响应式依赖进行缓存的。
   每当触发重新渲染时，调用方法将总会再次执行函数。而computed计算属性则会有缓存，只有当响应式依赖发生改变的时候它们才会重新求值。

如何选择methods和computed:

1. 如果这次使用时，更关心函数的执行结果数据时，首选计算属性
2. 如果这次使用时，更关心函数执行操作的过程，结果数据无所谓，甚至函数没有返回值，则首选methods中的方法。

1.5、template

1.6、render

1.7、watch

双向绑定过程中希望只要变量值一发生变化，就自动执行一项操作，可用watch添加监控函数。

建议不要滥用watch。

---

2、方法

生命周期的八个钩子函数，可以在vue的各个阶段添加代码。

方法	描述
beforeCreate()	创建实例，在beforeCreate()生命周期执行时，data和methods中的数据都还没有初始化
created()	创建完成，在create()生命周期执行时，data和methods都已经初始化好了， 如果要调用methods中的方法，或操作data中的数据，最早只能在created中操作
beforeMount()	创建模板，表示模板已经在内存中编译完成了，但尚未把模板渲染到页面中去，即页面中的元素还没有被真正替换
mounted()	创建完成，表示内存中的模板已经真实地挂在到了页面中，用户已经可以看到渲染好的页面了
beforeUpdate()	更新状态，当执行到beforeUpdate时，页面中显示的数据还是旧的，data数据是最新的，页面尚未与最新的数据保持同步
updated()	更新完成，页面和data中的数据保持同步，都是最新的
beforeDestory()	销毁 vue 实例
destoryed()	销毁完成

---

3、指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

指令	描述
v-text	在元素中插入值
v-html	在元素中插入值
{{ }}	在元素中插入值，有插值闪烁问题
v-bind（简写为:）	绑定元素属性，执行相应操作
v-if	根据表达式的真假值来动态插入和移除元素
v-show	根据表达式的真假值通过控制css的display来隐藏和显示元素
v-for	根据变量的值来循环渲染元素
v-on（简写为@）	监听元素事件，执行相应操作
v-model	绑定input值和变量，实现数据视图的双向绑定

3.1、v-text

1. v-text指令的作用是：设置标签的内容（textContent）
2. 默认的写法会替换全部内容，使用插值表达式{{ }}可以替换指定内容
3. v-text支持逻辑运算

v-text 与 {{ }} 的差别

1. 默认 v-text 是没有闪烁问题的
2. v-text 会覆盖元素中原本的内容；插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空。
   

3.2、v-html

1. v-html指令的作用是：设置元素的innerHTML
2. 内容中有html结构时，会被解析为标签
3. v-text指令，无论内容时什么，只会解析为文本
   所以，解析文本使用v-text，需要解析html结构时则使用v-html
   

3.3、v-bind

是Vue中提供的用于绑定属性的指令(属性绑定机制)。
v-bind 中，可以写合法的表达式。

1. 作用是：为元素绑定属性
2. 完整写法是 v-bind:属性名=表达式
3. 简写的话可以省略v-bind，只保留 :属性名=表达式
4. 如果需要动态的增删class，建议使用对象的方式
   

3.4、v-if

1. v-if指令的作用是：根据表达式的真假切换元素的显示状态
2. 本质是通过操纵dom元素来切换显示状态
3. 若表达式的值为true，则元素存在于dom树中；若为false，则从dom树中删除
4. 所以，频繁切换的元素用v-show，反之用v-if。因为操作dom树对性能的消耗比较大
   

3.5、v-show

1. v-show指令的作用是：根据真假切换元素的显示状态
2. 原理是修改元素的display，实现显示隐藏
3. 指令后面的内容，最终都会解析为布尔值。值为true则元素显示，为false则元素隐藏
   

v-if   VS   v-show
v-if有更高的切换开销；v-show有更高的初始渲染开销。
如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好。

3.6、v-for

可以用 v-for 指令基于一个数组来渲染一个列表。语法：v-for = "item in items"
v-for 还支持一个可选的第二个参数，即当前项的索引。语法：v-for="(item, index) in items"
in 后面可以放普通数组、对象数组、对象、还可以放数字。

也可以用 of 替代 in 作为分隔符。如果使用 v-for 迭代数字的话， count值从1开始。
也可以用 v-for 来遍历一个对象的 property。v-for="(value, name, index) in object"
建议尽可能在使用 v-for 时提供 key attribute，key属性只能使用 number 或者 string。key在使用的时候，必须使用v-bind属性绑定的形式来指定key的值。

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

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

3.7、v-on

1. v-on指令的作用是：为元素绑定事件
2. 事件名不需要写on
3. 指令可以简写为 @
4. 绑定的方法定义在methods属性中
5. 方法内部通过this关键字可以访问定义在data中的数据
   v-on 指令用于监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
   

补充：

• 事件绑定的方法可以写成函数调用的形式，可以传入自定义的参数
• 定义方法时需要定义形参来接收传入的实参
• 事件的后面跟上.修饰符可以对事件进行限制
  

v-on的事件修饰符

• .stop
  防止事件冒泡。
  冒泡事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从内至外的点击事件
• .prevent
  防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
• .capture
  使用事件捕获模式。与事件冒泡的方向相反，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理。
• .self
  只会触发自己范围内的事件，不包含子元素
• .once
  事件只会触发一次
• .passive
  这个修饰符会执行默认方法，即告诉浏览器你不想阻止事件的默认行为。

passive和prevent冲突，不能同时绑定在一个监听器上，如果一起使用，.prevent将会被忽略。

.stop 和 .self 的区别
.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为。

按键修饰符

• .enter：回车键
• .tab：制表键
• .delete：含delete和backspace键
• .esc：返回键
• .space: 空格键
• .up：向上键
• .down：向下键
• .left：向左键
• .right：向右键

3.8、v-model

v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V，无法实现数据的双向绑定。
v-model 指令可以实现表单元素和 Model 中数据的双向绑定，这样可以便捷地设置和获取表单元素的值。

【注】v-model只能运用在表单元素中：

• input
• radio
• select
• checkbox
• textarea
• components（Vue中的自定义组件）

v-model 修饰符

• .lazy
  默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。

  <input v-model.lazy="msg">
  

• .number
  自动将用户的输入值转化为数值类型。

  <input v-model.number="age">
  

• .trim
  自动过滤用户输入的首尾空白字符。

  <input v-model.trim="msg">