vue设计之初是为了提高HTML的灵活性，让html更强大。我们传统的html修改标签属性的时候需要需要获取当前的dom然后再进行修改，这样增加了我们的的专注力，我们更希望专心搞一些业务，所以vue通过指令解决这些问题。
在讲解vue指令的时候，我们首先引入vue.js ，详情看官网https://cn.vuejs.org/v2/guide/installation.html#CDN，其次我们需要获得Vue对象,然后把Vue对象挂载到html元素上面（这里的元素必须是最外层），至此我们就可以使用Vue了。这里简要介绍下vue怎么挂载到html的
创建Vue对象的时候参数使用一个json对象，json对象里面有很多options，我们常用的有el(绑定的html元素)、data(vue进行数据交互的数据)，methods（方法）等等

1、{{}}

模板：模板的作用修改的是文本节点的内容，注意{{}}内是变量或者表达式

  1. <body>
  2.     <div id="root">
  3.         <p>{{a}}</p>
  4.         <p>{{c+b}}</p>
  5.         <p>{{fn(11,11)}}</p>
  6.     </div>
  7. </body>
  8. <script>
  9.     var vm = new Vue({
  10.         el: "#root",
  11.         data: {
  12.             a: 'tao',
  13.             b: 18,
  14.             c: 18
  15.         },
  16.         methods: {
  17.             fn(num1, num2) {
  18.                 return num1 * num2;
  19.             }
  20.         }
  21.     })
  22. </script>

image.png

2.修改元素属性 —-v-bind

属性的值可以为变量也可以为表达式

  1.   <body>
  2.     <div id="root" :title="name">
  3.       <p :title ="fn(11,11)"></p>
  4.       {{name}}
  5.     </div>
  6.     <script>
  7.     let vm=new Vue({
  8.       el: '#root',
  9.       data: {
  10.         name: 'taowuhua',
  11.         a: 22,
  12.         b: 55,
  13.       },
  14.       methods: {
  15.         fn(num1, num2){
  16.           return num1*num2;
  17.         }
  18.       }
  19.     });
  20.     </script>

image.png
上面给div的title属性前面增加了v-bind:之后，此时的title就可以进行单向通信了，当修改数据name的时候，title就会发生变化，这无形之中增大了HTML的功能
注意：v-bind：可以省略为：

3、双向绑定——-v-model

  1. <body>
  2.   <div id="root">
  3.     <input type="text" v-model="name">
  4.     {{name}}
  5.   </div>
  6.   <script>
  7.     let vm = new Vue({
  8.       el: '#root',
  9.       data: {
  10.         name: 'taowuhua',
  11.         a: 22,
  12.         b: 55,
  13.       },
  14.       methods: {
  15.         fn(num1, num2) {
  16.           return num1 * num2;
  17.         }
  18.       }
  19.     });
  20.   </script>
  21. </body>

修改数据视图改变，修改视图数据改变。这样真正做到了双向绑定。

4、v-html

适合渲染一段html，或者为了提高前端加载的速度使用服务端渲染的方式，服务端返回一段HTML

  1. <body>
  2.   <div id="root">
  3.     <p type="text" v-html="name"></p>
  4.   </div>
  5.   <script>
  6.     let vm = new Vue({
  7.       el: '#root',
  8.       data: {
  9.         name: 'taowuhua<strong>你好</strong>',
  10.       }
  11.     });
  12.   </script>
  13. </body>

image.png

5、判断条件是否true、false加载某些标签———v-if

  1. <body>
  2.   <div id="root">
  3.     <button @click="fn()">{{text}}</button>
  4.     <div v-if="show">{{visible}}</div>
  5.     <div v-if="!show">{{inVisible}}</div>
  6.   </div>
  7. </body>
  8. <script>
  9.   var vm = new Vue({
  10.     el: "#root",
  11.     data: {
  12.       show: true,
  13.       text: '切换',
  14.       visible: '显示',
  15.       inVisible: '隐藏'
  16.     },
  17.     methods: {
  18.       fn() {
  19.         this.show = !this.show
  20.       }
  21.     }
  22.   })
  23. </script>

6、v-for

哪里需要循环遍历就在哪里使用v-for，类似js的forIn
例一：

  1. <body>
  2.   <div id="root">
  3.     <ul>
  4.       <li v-for="(item,key) in arrayList ">{{item}}</li>
  5.     </ul>
  6.     <div style="width: 100vw;
  7.       height: 2px;
  8.       background: black;"></div>
  9.     <ul>
  10.       <li v-for="(item,key ) in jsonList ">{{item}}</li>
  11.     </ul>
  12.   </div>
  13. </body>
  14. <script>
  15.   var vm = new Vue({
  16.     el: "#root",
  17.     data: {
  18.       arrayList: [
  19.         "张三", "李四", "王五",
  20.       ],
  21.       jsonList: {
  22.         a: "zhangsan",
  23.         b: "lisi",
  24.         c: "wangwu",
  25.       }
  26.     }
  27.   })
  28. </script>

image.png
例二：
二维数组

<body>
  <div id="root">
    <ul>
      <li v-for="arr2 in arrayList ">
        <div v-for="item  in arr2 ">{{item}}</div>
      </li>
    </ul>
  </div>
</body>
<script>
  var vm = new Vue({
    el: "#root",
    data: {
      arrayList: [
        [1, 2, 3],
        [5, 6, 7],
        [8, 9, 10]
      ]
    }
  })
</script>

注意：基于vue底层框架使用的jsdifinproperty，导致Json的增加和删除、array的修改、Object.assign、数据不能进行双向绑定，也可以理解为vue的bug，我们需要使用$set解决

  <body>
    <div id="root">
      <ul>
        <li v-for="item in arr">{{item}}</li>
      </ul>
    </div>
    <script>
    let vm=new Vue({
      el: '#root',
      data: {
        arr: [12,5,8,99,27],
      },
    });
    vm.$set(vm.arr,1,999);
    </script>
  </body>

Json：

<body>
  <div id="root">
    <ul>
      <li v-for="item in json">{{item}}</li>
    </ul>
  </div>
  <script>
    let vm = new Vue({
      el: '#root',
      data: {
        json: {
          'a': "zhangsan",
          'b': "lisi",
          'c': "wangwu",
        }
      },
    });
    vm.$set(vm.json, 'd', '我增加了一个');
    vm.$set(vm.json, 'a', '我修改了一个');
  </script>
</body>

对于Object.assign

Object.assign({}, this.json, {c: 99, d: 88});

7、v-cloak

隐藏未编译的 Mustache 标签直到实例准备完毕，比如网络很慢的时候vue加载会把某些数据显示出来，影响美观。使用[v-cloak] {display:none;}解决

  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="vue.js" charset="utf-8"></script>
    <style media="screen">
    *[v-cloak] {display:none;}
    </style>
  </head>
  <body>
    <div id="root" v-cloak>
      {{a}}, {{b}}
    </div>
    <script src="http://localhost:8080/xxx" charset="utf-8"></script>
    <script>
    let vm=new Vue({
      el: '#root',
      data: {
        a: 12, b: 5
      },
      methods: {
        fn(){
          this.json=Object.assign({}, this.json, {c: 99, d: 88});
        }
      }
    });
    </script>
  </body>

8、v-pre 指令会跳过此元素及其所有子元素的编译，把标签里的数据都按普通文本解析


  <body>
    <div id="root">
      <div class="" v-pre>
        {{a}}, {{b}}
      </div>
    </div>
    <script>
    let vm=new Vue({
      el: '#root',
      data: {
        a: 12, b: 5
      },
      methods: {
        fn(){
          alert('aaa');
        },
        fn2(){
          alert('bbb');
        }
      }
    });
    </script>
  </body>