Vue 基本指令
v-text
v-text，该指令的用法同原生 JS 中的 innerText，更新绑定元素内部的文本内容
<div id="div"> <span v-text="msg"></span> <!--不会有闪烁问题--><!-- 和下面的一样 --> <span>{{msg}}</span> </div>与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
v-html
v-html，该指令用法同原生 JS 的 innerHTML，可以解析内部的 HTML 标签
v-cloak
v-cloak，该指令 CSS 一起使用，用于隐藏还没有开始编译的{{}}(插值表达式)直到编译完成，解决其闪烁问题
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
v-show
v-show，该指令用于显示和隐藏 DOM 元素，根据表达式之真假值，切换元素的 display 属性值
v-show值为true时显示- 当条件变化时该指令触发过渡效果，切换频率较高的场景
- 不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
v-show指令不支持在<template>< /template>标签上写，也不支持v-else，一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好
v-if，v-else 与 v-else-if
v-if，该指令用于是否渲染 DOM 元素，传入一个布尔值，通过该布尔值的条件改变实现对于 DOM 元素的删除和重建，该指令不同于 v-show，而是会完全销毁这个 DOM 元素
**注意:**当条件变化时该指令触发过渡效果
v-else， 该指令用于 不需要任何表达式 ，但是在该指令的前一个兄弟元素必须有 v-if 或者 v-else-if 指令，该指令的用处是为 v-if 或者 v-else-if 添加 else 的选项
<div v-if="Math.random() > 0.5">Now you see me</div> <div v-else>Now you don't</div>v-else-if，该指令用于用于 v-if 的 else if 选项，前一个兄弟元素必须要 v-if 指令，并且该指令可以链式调用，也就是说可以调用多次 v-else-if 指令
<div v-if="type === 'A'">A</div> <div v-else-if="type === 'B'">B</div> <div v-else-if="type === 'C'">C</div> <div v-else>Not A/B/C</div>v-for
v-for该指令可以基于源数据多次渲染元素或模板块，用于循环遍历某个数组或对象，如果只用一个变量代表得到是数组或对象的 value 值
**注意<在内部必须使用固定的> item in/of items**形式的特殊语法(下面的 in 都可以用 of 代替，并且更符合实际)
<ul id="example-1"> <li v-for="item in items"> {{ item.message }} <!--Foo Bar--> </li> </ul> <script> var example1 = new Vue({ el: '#example-1'， data: { items: [{ message: 'Foo' }， { message: 'Bar' }]， }， }) </script>遍历数组时其实还支持第二个变量，代表的是遍历数组的索引值
<ul id="example-2"> <li v-for="(item， index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} <!-- Parent-0-Foo Parent-1-Bar --> </li> </ul> <script> var example2 = new Vue({ el: '#example-2'， data: { parentMessage: 'Parent'， items: [{ message: 'Foo' }， { message: 'Bar' }]， }， }) </script>-
遍历对象时还可以接受第二三两个变量，分别代表了键名和索引值<ul id="v-for-object" class="demo"><div v-for="(value， key， index) in object">{{ index }}. {{ key }}: {{ value }}<!--0. firstName: John1. lastName: Doe2. age: 30--></div></ul><script>new Vue({el: '#v-for-object'，data: {object: {firstName: 'John'，lastName: 'Doe'，age: 30，}，}，})</script>
**注意:**当 v-for 和 v-if 处于同一节点时，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中，当想为仅有的一些项渲染节点时，这种优先级的机制会十分有用
<li v-for="todo in todos" v-if="!todo.isComplete">{{ todo }}</li> <!-- 官方并不建议v-for和v-if指令一起使用，如果要使用这种方式，就进行条件渲染 -->
<!-- 如果想有条件才继续v-for指令，则可以将v-if置于外层元素(或<template>)上 --> <ul v-if="todos.length"> <li v-for="todo in todos">{{ todo }}</li> </ul> <p v-else>No todos left!</p> <!-- 条件渲染 v-if如果想只写一个而同时切换多个元素，可以在最外成包裹一层<template></template>， 在这个标签上面使用v-if，在渲染的时候并不会将<template>标签渲染出来 -->v-bind
v-bind，该指令用于动态绑定一个或多个特性，该方法绑定的特性与普通的属性效果一致，只是其内部会被解析为 JS 表达式，而不是普通特性一样会是一个字符串
修辞符
.prop被用于绑定 DOM 属性(property).camel将短横线命名法特性名转换为驼峰命名法.sync会扩展成一个更新父组件绑定值的v-on侦听器
注意
-
该指令有其简写写法，通过冒号
:来代替v-bind: -
该指令可以动态对绑定的参数进行改变，参数用
[]括起来<!-- 绑定一个属性 --><img v-bind:src="imageSrc"><!-- 动态特性名 (2.6.0+) --><button v-bind:[key]="value"></button><!-- 缩写 --><img :src="imageSrc"><!-- 动态特性名缩写 (2.6.0+) --><button :[key]="value"></button><!-- 内联字符串拼接 --><img :src="'/path/to/images/' + fileName"><!-- class 绑定 --><div :class="{ red: isRed }"></div><!--对象通过布尔值确定是否传入class中--><div :class="[classA， classB]"></div><!--数组会直接将类名传入到class中--><div :class="[classA， { classB: isB， classC: isC }]"><!--对象和数组可以混用--><!-- style 绑定 --><div :style="{ fontSize: size + 'px' }"></div><!--通过对象写入每个属性--><div :style="[styleObjectA， styleObjectB]"></div><!--数组的成员中实际是一个个对象--><!-- 绑定一个有属性的对象 --><div v-bind="{ id: someProp， 'other-attr': otherProp }"></div><!-- 通过 prop 修饰符绑定 DOM 属性 --><div v-bind:text-content.prop="text"></div><!-- prop 绑定。“prop”必须在 my-component 中声明。--><my-component :prop="someThing"></my-component><!-- 通过 $props 将父组件的 props 一起传给子组件 --><child-component v-bind="$props"></child-component><!-- XLink --><svg><a :xlink:special="foo"></a></svg>
v-on
v-on，该指令用于绑定监听事件，表达式可以是一个方法的名字或一个内联语句(也就是说在传入事件的时候可以选择加()可以选择不加()，推荐在传入参数的时候添加，在不传参的时候写事件名)
**参数:**该指令的参数为原生 JS 中的事件名，只不过没有 on
修饰符
-
.stop调用event.stopPropagation()，会阻止本元素上的事件进行冒泡传播 -
.prevent调用event.preventDefault()，不能和.passive一起使用 -
.capture添加事件侦听器时使用capture模式，父元素会执行在子元素上进行的同名事件 -
.self只当事件是从侦听器绑定的元素本身触发时才触发回调，只会真正自己触发的事件才会进行，和.stop是有区别的，这个只会阻止自己的冒泡，但不会阻止该元素的父元素事件的冒泡进行 -
.{keyCode | keyAlias}只当事件是从特定键触发时才触发回调，可以是表示键盘字符的数字或者表示特效事件的按键修饰符 -
.native监听组件根元素的原生事件，一个 Vue 实例内部通过只能 v-on 只能绑定自己内部的方法，不能绑定原生 DOM 事件的方法，通过该修饰符就可以使用原生 JS 的事件方法了 -
.once只触发一次回调 -
.left只当点击鼠标左键时触发 -
.right只当点击鼠标右键时触发 -
.middle只当点击鼠标中键时触发 -
.passive不用查找是否阻止默认事件的请求直接进行操作。 如在滚动页面时的onscroll事件，每次触发事件时浏览器都会查看是否有阻止默认滚动事件的操作，但是如果本来就没有进行这个操作，在滚动的时候就会出现卡的的情况，因为在触发滚动条滚动时总会先查找请求，这个修饰符就是告诉浏览器不用进行查找直接进行滚动操作。因为作用的冲突，所以不能和.prevent一起使用
注意:
-
该指令有简写形式，通过
@来代替v-on: -
该指令可以动态对绑定的参数进行改变，参数用中括号
[]括起来<!-- 方法处理器 --><button v-on:click="doThis"></button><!-- 动态事件 (2.6.0+) --><button v-on:[event]="doThis"></button><!-- 内联语句 --><button v-on:click="doThat('hello'， $event)"></button><!-- 缩写 --><button @click="doThis"></button><!-- 动态事件缩写 (2.6.0+) --><button @[event]="doThis"></button><!-- 停止冒泡 --><button @click.stop="doThis"></button><!-- 阻止默认行为 --><button @click.prevent="doThis"></button><!-- 阻止默认行为，没有表达式 --><form @submit.prevent></form><!-- 串联修饰符 --><button @click.stop.prevent="doThis"></button><!-- 键修饰符，键别名 --><input @keyup.enter="onEnter"><!-- 键修饰符，键代码 --><input @keyup.13="onEnter"><!-- 点击回调只会触发一次 --><button v-on:click.once="doThis"></button><!-- 对象语法 (2.4.0+) --><button v-on="{ mousedown: doThis， mouseup: doThat }"></button><!-- 组件中的自定义事件 --><my-component @my-event="handleThis"></my-component><!-- 内联语句 --><my-component @my-event="handleThis(123， $event)"></my-component><!-- 组件中的原生事件 --><my-component @click.native="onClick"></my-component>
v-model
v-model，该指令用于表单内的标签进行双向的数据绑定
**注意:**v-model 只能绑定给 input，textarea，select 等表单元素和自定义的组件中，除此之外不能在其他标签上绑定
与v-bind的区别：
v-bind是单向绑定，而v-model是双向绑定；v-bind只能将vue中的数据同步到页面，而v-model不只能将vue中的数据同步到页面，还可以将用户数据的数据赋值给vue中的属性
修辞符:
.lazy取代 input 监听 change 事件，默认在用户写入值时是使用的input事件，也就是当值输入完成后才会触发事件，而 change 是一些有输入法的语言在值还没有输入时就时刻监听改变.number输入字符串转为有效的数字.trim输入首尾空格过滤
用法:
-
如果是对
input文本框和textarea绑定的，绑定的值会根据输入的内容，就是将内部的变量的值改为 value 中的值 -
**如果是对复选框绑定的 **
-
如果绑定的变量不是数组，会根据复选框是否被选中而改变为 false 或 true，即使原来不是布尔值也会被强制转换为布尔值，这是因为双向的数据绑定，如果是有多个复选框，那么则会一起被选中或不选中
-
如果变量是数组，则会将 value 属性中的值(没有写 value 属性会传入 null)传入该数组作为其中的一个成员，Vue 会根据数组内部的值来判断是否选中该复选框(内部其实就是这样运作的)，如果 value 值一样会有多个复选框被选中，再次点击就会将该值删去然后取消复选框的选中
Checked names: {{ checkedNames }}
-
-
如果是对单选按钮进行绑定的，变量值会随着选中单选框的
value值而变化，如果变量的值刚开始就是一个单选框的value值，那么就会自动选中这个单选框 **注意: **-
单选框和复选框即使不写相同的
name而只绑定了相同的modle也会认做是一类单选框的，但是最好还是将name写上 -
单选框和复选框都可以通过
v-bind:value绑定的value值来设置值自身的value值
-
-
如果是对选择框
select进行绑定的 ，绑定的变量的值会随着选中的 option 选项内部的内容而发生变化，如果option没有写value属性，该变量会变成<option></option>内部的值，如果有value属性，变量会变成value值而不是option的内容<div id="example"><select v-model="selected"><option disabled value="">请选择</option><option>A</option><option>B</option><option>C</option></select><span>Selected: {{ selected }}</span></div><script>new Vue({el: '#example'，data: {selected: ''，}，})</script>
注意:
在 s 多选时要绑定一个数组，将上方的 selected:[]，这样在选入的时候就能将每个选择的选项的值加到变量中去，还可以是一个对象，但是要通过 v-bind:value 绑定
v-pre
该指令不接受任何表达式，使用了该指令的元素 Vue 在编译时跳过这个元素和它的子元素的编译过程，可以用来显示原始的模板{{}}标签，跳过大量没有指令的节点会加快编译
v-once
该指令不需要表达式，只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。
以后数据的改变不会引起v-once所在结构的更新，这可以用于优化更新性能
- 跳过其所在节点的编译过程。
- 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！