vue指令

v-text:给双标签设置文本内容。普通字符串需要加引号，如果文本内容带有标签视图不解析。
v-html:与v-text作用一样，与之不同的是它能解析标签
v-cloak：解决页面刷新时闪烁的问题，谁闪烁就给谁加。还需设置隐藏的样式
v-pre：原样输出，{{}}不会被解析
v-once：只有第一次的时候，数据和模板保持绑定

v-bind：作用于标签的属性，解析vue对象里的数据，把解析的数据放到属性的值中
        简写  直接写 冒号 : 即可

v-on: 绑定事件，被绑定的方法名称的小括号可有可无    在vue实例中添加methods键，methods键的作用是写方法
        简写  @事件类型="函数()" 
            事件传参
                事件对象 -- $event 
                当前标签 -- $event.target

            事件修饰符
                阻止事件冒泡  @事件类型.stop='方法()'
                阻止默认行为  @事件类型.prevent='方法()'

            按键修饰符
                @事件类型.键盘码='方法()' [一般不用] /  @事件类型.键盘名称='方法()'

                自定义名称：
                    Vue.config.keyCodes.自定义名称 = 目标键盘的阿斯克码
                    自定义后...
                    @事件类型.自定义名称='方法()'

循环指令

        v-for   想要哪个标签循环就放在哪个标签中
        v-for='自定义变量 in 循环的数据' =====> <li v-for="item in arr"><a></a></li>

        v-for='(自定义变量，键/下标的变量) in 循环的数据' =====> <li v-for="(item,key/index) in arr"><a>{{item}} -- {{key/index}}</a></li>

        提高性能：
        v-for='(自定义变量，键/下标的变量) in 循环的数据' v-bind:key='代表当前数据的唯一性的数据'
            简写  v-bind:key
        v-for='(自定义变量，键/下标的变量) in 循环的数据' :key='代表当前数据的唯一性的数据'

        数组：item代表元素，index代表下标
        对象：item代表值，index代表键

双向绑定 -- v-model

            它有修饰符 -- 在v-model后面加点使用  v-model.trim
            .trim 将数据两端空白去掉
            .number 将输入的字符串类型的数字数据转成数字类型的数据
            .lazy 在文本框失去焦点后才会把输入的内容显示在数据中

            当数据改变的时候文本内容也改变，文本内容改变数据也可以改变
            一般作用在:

 文本框
            实现表单元素和数据之间的双向绑定。当在元素中给v-model赋值，并且value属性也              赋值时，就不会显示value属性里面的值，以v-model为准。
        
 文本域  
            文本域可以接受两种数据绑定方式：
            1.差值表达式 - v-once指令
            2.v-model
            
            文本域使用v-model跟使用插值表达式的结果是一样的
        
单选框
            单选框种一定要添加value属性
            同一组的单选框v-model给的是同一个数据。数据的值是单选框的value，指定value                就是再指定哪个单选框被选中

复选框
            跟单选框一样需要配合value属性，数据中有哪个value属性值就选中哪个复选框。
            当复选框v-model的值是布尔值也可以代表复选框是否选中

下拉框
            给select标签绑定v-model,根据option的value值来进行绑定
            不可以使用布尔值来代表是否被选中

 

分支指令
        v-if  v-else  v-else-if
        v-if='判断的条件'   v-else-if='判断条件'
        当条件为true时，当前标签显示，否则当前对象隐藏

        在多分支指令之间不能插入没有分支指令的代码
            如：
                <p v-if="id>=1">1</p>
                <p></p>
                <p v-if="id>=1">1</p>
                <p v-if="id>=1">1</p>

        通常使用分支指令来控制标签的显示和隐藏。
        v-if指令控制标签的显示和隐藏原理是通过判断对标签进行删除和添加。
        还有一个控制元素显示隐藏的指令：v-show，使用方式跟v-if一样，设置在标签上，当v-show的值为true的时候，当前表示显示，当值为false的时候，会给标签设置display:none来隐藏

        v-show 控制标签显示和隐藏 - 通过display:none/block 来控制显示隐藏
        v-show='条件'

        v-if和v-show区别
        控制显示隐藏是通过节点的插入和删除控制
        控制标签的显示隐藏是通过display:none/block来控制

        频繁显示隐藏用v-show，否则用v-if

        // 类名操作   
        // 对象设置： :class='{类名:布尔值}'
        // 数组设置； :class="[数据1对应的值是类名, 数据2对应的类名]" 

        // 样式操作
        // 对象设置  :style="{css键：'css值'}"
        // 数组设置  :style="[{css键：'css值'},{css键：'css值'}]"