vue 基本指令

插值表达式 {{ }}

 <div id="app">
   <span > {{info}}}</span>
   </div>

<script>

       let vm = new Vue({
            el: '#app',
            data: {
                info: '这是插值表达式'
              }
            })
</script>

v-show

（1）用来显示或隐藏页面元素的：放在页面标签中，它会绑定一个boolean型变量（true显示，false隐藏）

（2）本质是通过控制元素的CSS样式的display属性来实现元素的显示和隐藏

  <div id="app">
        <p v-show="isShow">显示</p>
    </div>

    <script>
        let vw = new Vue({
            el: '#app',
            data: {
                isShow: ture
            }
        })
    </script>

v-if,v-else-if,v-else指令：条件渲染指令

（1）根据条件控制页面元素的显示和隐藏

（2）本质是通过DOM的appendChild命令在页面中添加元素的

  <div id="app">
        <span v-if="score>=90">优秀</span>
        <span v-else-if="score>=75">良好</span>
        <span v-else-if="score>=60">及格</span>
        <span v-else>不及格</span>
    </div>

    <script>
        let vw = new Vue({
            el: '#app',
            data: {
                score: 95
            }
        })
    </script>

v-for 使用循环的方式渲染一组数据。

  <!-- 渲染9*9乘法表 -->
    <div id="app">
        <div v-for="i in 9">
         <span v-for="j in i"> {{j}} * {{i}}={{j*i}}</span>
        </div>

    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
              
                  }
        })
    </script>

v-bind指令（动态绑定指令）

作用是将页面元素的属性绑定到变量上

写法

1. 对象写法（页面元素的class属性绑定的是一个对象）

    <div id="app">
        <p v-bind:class="cls">{{info}}</p>
    </div>

    <script src='https://cdn.jsdelivr.net/npm/vue@2'></script>

    <script>
        let vw = new Vue({
            el: '#app',
            data: {
                info: '对象写法',
                cls: {
                    class1: true,
                    class2: true,
                }
            }
        })
    </script>

2. 数组写法：元素的class属性绑定的是一个列表（样式列表）

    <div id="app">
        <p v-bind:class="[c1,c2]">{{info}}</p>
    </div>

    <script src='https://cdn.jsdelivr.net/npm/vue@2'></script>

    <script>
        let vw = new Vue({
            el: '#app',
            data: {
                info: '数组写法',
                c1: 'class1',
                c2: 'class2'
            }
        })
    </script>

元素内联样式的绑定：给元素的style属性绑定变量

1. 对象语法：style绑定一个对象，对象的属性名就是样式属性名

  <div id="app">
        <p v-bind:style="{color:myColor,fontSize:mySize}">{{info}}</p>
    </div>

    <script src='https://cdn.jsdelivr.net/npm/vue@2'></script>

    <script>
        let vw = new Vue({
            el: '#app',
            data: {
                info: '对象写法',
                myColor: 'red',
                mySize: '25px'
            }
        })
    </script>

2. 数组语法：给style属性绑定一个数组，数组中元素是对象

   <div id="app">
        <p v-bind:style="[c1,c2]">{{info}}</p>
    </div>

    <script src='https://cdn.jsdelivr.net/npm/vue@2'></script>

    <script>
        let vw = new Vue({
            el: '#app',
            data: {
                info: '对象写法',
                c1: { color: 'blue' },
                c2: { fontSize: '25px' },
            }
        })
    </script>

v-pre指令：不需要表达式

1. 使用了该指令的元素，页面在编译时会被跳过。提高编译的效率

2. 使用该指令后，可以显示原始的mustache（ {{ }} ）表达式

  <p v-pre>{{info}}</p> 

v-cloak指令

不需要表达式，用于消除页面闪烁

<style>
    [v-cloak] {
        display: none;
    }
</style>

 <p v-cloak>{{info}}</p>

v-on ：事件绑定指令

1、使用方法：v-on:事件名

2、Vue组件中定义方法（函数）：给vue组件添加methods属性，在该属性下定义方法

3、对应的语法糖：@

4、在methods的方法中访问data中的变量：this.变量名