2-Vue插值操作和属性绑定

1、v-once：
    该指令后面不需要跟任何表达式(比如v-for后面是跟表达式的)
    该指令表示元素的mustache变量和组件只会渲染一次，不会随数据的改变而改变

2、v-html：
某些情况下，我们从服务器请求到的数据含有HTML的标签
    如果直接通过mustache语法{{}}输出，则数据会原样输出
    如果使用该指令(该指令后跟string类型)，则数据中的HTML标签会被解析

 <div id="app">

     <h1 v-once>{{message}}</h1>

     <h1 v-html="message"></h1>
   </div>

     <script src="js/vue.js"></script>
     <script>
       let app = new Vue({
         el: '#app',
         data: {
           message: "<a href='http://www.baidu.com'>百度一下</a>"
         }
       });
     </script>

3、v-text：
    v-text作用和mustache相似，都是将数据显示在界面中，但不如mustache好用
    v-text通常情况下，接受一个string类型

4、v-pre：
该指令后面不需要跟任何表达式
v-pre跳过这个元素和它子元素的编译过程，元素的内容是什么显示什么，

5、v-cloak：
该指令后面不需要跟任何表达式
v-cloak指令很少用到，cloak中文意思为斗篷；
出现该指令的原因：只有当浏览器解析到mustache表达式对应的Vue时，其才会替换页面中元素的mustache内容。但如果解析到Vue时卡住，用户就会看到类似{{message}}的东西。为了不让用户看到该内容，出现该指令。

 

6、v-bind：
以上的5个指令主要作用是将值插入到我们模板的内容中
但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定(a的href，img的src)


很多时候，我们希望动态切换class，绑定class的两种方式：对象语法，数组语法
对象语法：v-bind:class="{类名1:boolean变量，类型2:boolean变量,...}"

另一种写法：

数组语法(少用)：:class="[变量1，变量2,...]"

v-bind动态绑定样式：
对象语法：:style="{样式名:样式值，样式名:样式值,...}"
[样式名可以是原样式名(如果存在连字符必须加引号)，也可以是驼峰写法(不加引号)；样式值可以是字符串(又引号)，也可以是变量(无引号)]

数组语法(少用)：:style="[变量1，变量2，...]"