vue指令

vue2里边指令总共14个 共同特征： 全部都是v-开头  

        v-text

                更新元素的文本内容

                v-text标签内部所写的内容不能显示

                格式：   <元素标签 v-text="data数据"></元素标签>

        v-html

                更新元素的 innerHTML

                v-html标签内部所写的内容不能显示

                格式：   <元素标签 v-html="data数据"></元素标签>

                最重要用于字符串的html渲染

        v-show

                基于表达式值的真假性，来改变元素的可见性

                v-show指令的值只能是一个布尔值  两种 true或者false

                如果值为false 它是通过display: none控制元素的显示或者隐藏

        v-if

                基于表达式值的真假性，来条件性地渲染元素或者模板片段

                v-if指令的值只能是一个布尔值  两种 true或者false

                如果值为false 我们元素会被销毁

                如果值为true 我们元素会被重建

        v-else与v-else-if指令

                v-if

                v-else

                v-else-if它们三个等同于原生js中if elseif else

            格式：

                        <元素标签 v-if="条件1"></元素标签>

                        <元素标签 v-else-if="条件2"></元素标签>

                        <元素标签 v-else-if="条件3"></元素标签>

                        <元素标签 v-else></元素标签>

            注意：

                v-else不能单独使用  前边必须有v-if或者v-else-if

                v-else-if也不能单独使用 前边必须有v-if或者v-else-if

                但是v-if可以单独使用

                如果使用以上指令 中间必须是连续不断地 否则会报错

        v-for指令

                    基于源数据多次渲染元素或模板块

                    等价于for、forEach

                    格式：

                        <元素标签 v-for="(自定义名字, 自定义下标索引) in data数据" v-bind:key="自定义下标索引"></元素标签>

                        key属性表示内部的排序方式  key值必须是唯一的

                        作用：

                            可以快速对元素进行前后排序 保证元素正常的输出

                        注意：

                                v-for与v-if尽量不要写在一个标签上边，因为如果两个指令写在一起  我们在vue2.x v-for优先级大于v-if。

        v-on指令

            缩写：@

            在vue绑定事件

            格式：

                <元素标签 v-on:事件名="自定义方法名"></元素标签>

                或者

                <元素标签 @事件名="自定义方法名"></元素标签>

             事件名可以用哪些：只要是原生js能使用的方法(鼠标、键盘、表单等等) vue都可以绑定使用

                在methods里边 声明自定义方法

                methods: {

                    自定义方法名() {

                        // 执行代码块

                    }

                }

                注意：

                    在vue的事件绑定中 如果需要传参 则事件在绑定的时候加上括号 里边写上实参

                    如果不需要传参 则括号可以省略

        修饰符

                    .stop - 调用 event.stopPropagation()。阻止冒泡

                    .prevent - 调用 event.preventDefault()。

                    .capture - 添加事件侦听器时使用 capture 模式。

                    .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

                    .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

                    .native - 监听组件根元素的原生事件。

                    .once - 只触发一次回调。

                    .left - (2.2.0) 只当点击鼠标左键时触发。

                    .right - (2.2.0) 只当点击鼠标右键时触发。

                    .middle - (2.2.0) 只当点击鼠标中键时触发。

                    .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

        v-bind指令

            动态地绑定一个或多个 attribute

            缩写为  :

            格式：

                绑定一个标签属性

                <标签名 v-bind:属性名="data属性名"></标签名>

                或

                <标签名 :属性名="data属性名"></标签名>

                一个标签属性 绑定多个动态数据

                写数组：

                <标签名 :属性名="[data1,data2,data3,...]"></标签名>

                数组包对象：

                <标签名 :属性名="[data1,data2,data3,{属性名:属性值},...]"></标签名>

                对象：

                <标签名 :属性名="{属性名: 属性值}"></标签名>

                对象中的属性名 加不加引号 表示的都是字符串

                使用一个对象绑定多个属性名

                <标签名 v-bind="{属性名1: 属性值,属性名2:属性值,...}"></标签名>

                

        修饰符：

            .prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)

            .camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)

            .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

        v-model

            在表单控件或者组件上创建双向绑定(数据)

            注意：

                只能用在表单元素(input textarea select option)或者是组件(component)      

                修饰符：

                    .lazy - 取代 input 监听 change 事件

                    .number - 输入字符串转为有效的数字

                    .trim - 输入首尾空格过滤

        v-pre

            跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签

        v-once

            只会对元素渲染一次

        v-cloak

            这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

            配合css一起使用

            [v-cloak] {

                display: none;

            }