1.插值

（1）文本

<p>hello {{message}}</p>

<p v-text="message">hello</p>    message代表的内容会将hello替换

<p v-once v-text="massage">hello</p>   数据改变时，内容不会改变

（2）HTML

{{}}会将html内容作为字符串输出，如果想要输出标签，那么使用v-html

<p v-html="message" ></p>

{{}}不能用于标签的属性，可以使用v-bind

<button v-bind:disabled="isDisabled">按钮</button>

(3)简单表达式

{{number + 1}}

{{ok ? 'YES' : 'NO'}}

{{message.split('').reverse().join（''）}}

<div v-bind:id=" 'list-' + id " ></div>

<!-这是语句，不是表达式->{{var a=1}}

<1-流控制也不会生效，请使用三元表达式->{{ if(ok) {{return message} }}

(4) 防止刷新或者加载时的闪烁

<style>
   [v-clock]{
      display:none !inportant;
    }
   </style>
 <div v-cloak>
    {{message}}
  </div>

2.基本指令

（1）v-text:显示文本内容，实现对内容的输出

（2）v-html：显示文本内容，实现对内容的输出

（3）v-show：根据表达值的真假，切换元素的显示和隐藏（操纵的是样式）

（4）v-if:根据表达值的真假，切换元素的显示跟隐藏（操纵的是元素）

（5）v-else：v-if的表达值为假时执行的内容

（6）v-else-if:充当 v-if 的“else-if 块”，可以连续使用

  (7)   v-for:根据数据生成列表

（8）v-on：为元素绑定事件

（9）v-bind：设置元素的属性

（10）v-model：用于数据双向绑定；

（11）v-pre：该指令会跳过所在元素和它的子元素的编译过程，也就是把这个节点及其子节点当作一个静态节点来处理

（12）v-cloak： 防止刷新或者加载时的闪烁

（13）v-once：模板只会在第一次更新时显示数据，此后再次更新该 DOM 里面引用的数据时，内容不会自动更新。

3.指令缩写

（1）v-bind

<!-完整语法->
<a v-bind:href="url">...</a>
 
<!-缩写->
<a:href="url">...</a>

(2)v-on

<!-完整语法->
<a v-on:click="doSomeing">...</a>
<!-缩写->
<a @click="doSomething">...</a>

重点讲解

1.v-text与v-html的区别

v-text显示文本内容，不能对标签进行转义

v-html显示文本内容，可以对标签进行转义

 <div id="app">
    <p v-html="book_link"></p><!-- 对内容进行转义 -->
    <p v-text="book_link"></p><!--对内容直接输出，不可以对内容进行转义 -->
</div>
 
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el:'#app',//挂载元素
        data(){//当前挂在元素下所用的数据
            // 一定要有return，数据在return的obj中
            return {
                book_link:'<a href="http://www.jd.com">点击购买</a>',
          
            }
        }
    })

 2.v-if与v-show的区别

v-if：渲染或者不渲染 ，简单来说就是根据表达值的真假，切换元素的显示或者隐藏（操纵的时样式）

v-show：显示或者隐藏，简单来说就是根据表达值的真假，切换元素的显示和隐藏（操纵的是DOM元素）

 

<div id="app">
    <p v-if='year === 2002'>童年</p>
        <!-- 渲染或者不渲染 -->
        <p v-else-if='year === 2003'>我的大学</p>
        <p v-else-if='year === 2004'>阿廖沙</p>
        <p v-else>斯穆雷</p>
 
        <p v-show='year === 2008'>北京奥运会</p>
        <!-- 显示或者隐藏-->
</div>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el:'#app',//挂载元素
        data(){//当前挂在元素下所用的数据
            // 一定要有return，数据在return的obj中
            return {
                like:'伏地魔',
                book_name:'在人间',
                book_author:'马克西姆·高尔基',
                book_link:'<a href="http://www.jd.com">点击购买</a>',
                year:2002,
                // roles:["哈利波特","赫敏","罗恩","马尔福"]
                roles:[{
                    name:"哈利波特",
                    des:"男主角"
                },{
                    name:"赫敏",
                    des:"女主角"
                }]
            }
        }
</script>

 

 3. v-model  

   作用：双向数据绑定
   原理：当表单元素的内容发生改变时，触发对应的表单事件,在事件中完成对数据的修改

   需要注意的是：v-model仅限于使用于（input/select/textarea）

 4.ref如果绑定在DOM元素上，会将该元素记录到$refs对象中，也就是ref可以获取dom元素

5.如果是事件或者内部调用的方法，写在methods是里

6.如果只想在模板中引用一个值，建议使用computed(计算属性)，计算属性虽然写起来是个方法，但是调用的时候得按照属性的方式来使用

7.通过props属性可以实现父组件向子组件传值