vue一切的指令都是以 ” v-” 开首。
v-html：类似于 js中的innerHTML 。能够剖析模板中的标签。
v-text：类似于 js中的innerText。将模板中的数据以字符串的情势输出。不会剖析模板中的标签。等价于 {{ }} :防备革新时{{ }}涌现在页面上
v-show：经由过程掌握css的display来掌握元素的完成和隐蔽。假如是频仍切换则引荐用此要领。勤俭机能。
v-if：当属性值为true时，则显现当前的元素，为false，那末显现v-false的元素。假如是偶然切换，甚至不切换，则发起运用这个。减缓初次加在压力，进步机能。
v-else-if：配合著 v-if 运用，当前提不成立时，实行这步。
v-else ：当以上前提都不成立时，实行这一步。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <div id="app">
9 <div v-if="mag<0">小于0</div>
10 <div v-else-if="mag<10">0-9</div>
11 <div v-else>大于10</div>
12 </div>
13 </body>
14 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
15 <script>
16 var vm=new Vue({
17 el:"#app",
18 data:{
19 mag:15
20 },
21 })
22 </script>
23 </html></pre>v-once:只绑定一次，当数据再次发生变化，也不会致使页面革新，写在不想革新的标签上。
v-bind：单向数据绑定
1 <!--完全写法-->
2 <a v-bind:href="url">1111</a>
3 <!--简写-->
4 <a :href="url">2222</a></pre>平常用于class的猎取
1 <ul class="box" v-bind:class="{‘textColor‘:isColor, ‘textSize‘:isSize}">
2 <li>进修Vue</li>
3 <li>进修Node</li>
4 <li>进修React</li>
5 </ul></pre>
1 var vm= new Vue({
2 el:‘.box‘,
3 data:{
4 isColor:true,
5 isSize:true
6 } 7 })</pre>v-on: 绑定事宜。
1 <!--完全写法-->
2 <button v-on:click="doThis"></button>
3 <!--简写-->
4 <button @click="doThis"></button></pre>监听DOM事宜，函数须要定义在methods中，不能和data中的内容重名，不能运用箭头函数
假如在绑定时，fn不带（），那末函数会默许吸收一个事宜对象e，mouseEvent ，假如绑定时带有小括号，那末默许吸收事宜对象，
既须要事宜对象，又须要参数，须要在绑定的小括号中加一个$event,背面才是真正的实参
v=for:轮回
轮回数组
1
2 <div v-for="item in arr">{{item}}</div></pre>
1 var vm=new Vue({
2 el:"#app",
3 data:{
4 arr:[1,2,4,574,45,448]
5 },
6 })</pre>结果以下：item 代表每一项
轮回字符串
1 <div v-for="item in str">{{item}}</div></pre>
1 var vm=new Vue({
2 el:"#app",
3 data:{
4 str:"fdhsde"
5 },
6 })</pre>结果以下 ： item 代表着每个字符
轮回对象
<div v-for=”(item,key,index) in obj”>{{item}}–{{key}}–{{index}}</div></pre>
1 var vm=new Vue({
2 el:"#app",
3 data:{
4 obj:{
5 name:"qi",
6 age:"22",
7 }
8
9 },
10 })</pre>结果以下： 第一个参数是 属性值 ，第二个参数是 属性名，第三个参数是索引。
轮回数字
结果以下 ：
v-cloak ：用于元素加载数据比较多时，vue剖析时间比较长，为了防备{{}}涌现，给该元素加上v-cloak属性，直到vue中把DOM数据插进去到实在DOM中时，让当前的元素显现；
1 <div class="#app" v-cloak>
2 <p>{{value.name}}</p>
3 </div></pre>
1 [v-cloak] {
2 display: none;
3 }</pre>然则有的时刻会不起作用，能够的缘由有二：
1、v-cloak的display属性被层级更高的给掩盖掉了，所以要进步层级
1 [v-cloak] {
2 display: none !important;
3 } </pre>2、款式放在了@import引入的css文件中
v-cloak的这个款式放在@import 引入的css文件中不起作用，能够放在link引入的css文件里或许内联款式中
v-model：只用于表单元素疏忽了value。checkbox selected，将数据绑定的视图上，视图修正会影响数据的变化（双向数据绑定）
单选框中运用v-model ：会将都绑定val的划分红一组，只能挑选个中一个
在复选框中，假如只要一个，v-model 会将值默许转换成布尔范例的值
假如v-model 在复选框中同时绑定一个值，那末会把这几个举行分组，把选中的值，统一放进数组中
假如多个input框同时绑定一个雷同的v-model，经由过程是不是在数组中举行选中或许不挑选，各自来掌握自己的状况
用于下拉框那末select上v-model绑定的值：跟option中的value属性有关 ，那末假如没有value属性，那末会取option标签中的内容
