vue 指令

 vue实例理解
           1, vue实例创建时,实例中data中所有的property都被加入vue的响应式系统中,当这些property的值发生改变时会响应到视图中
            例如:
            var vm = new Vue({
            el: '#app',
            data: {
                message:"hello word!"
                }
             })
            这里的message可以通过vm.message来访问或者修改

            2.只有vue实例创建时存在与data中的数据才是响应式的
                如上代码,当你添加vm.orange.color = "yellow",不是响应的

            3,Object.freeze(property) 可以来取消数据的跟踪
            4,vue实例中的property可以通过vm.$property来访问

        模板语法:
             插值:
                插值在文档中解释为文本;
                v-html解释为html代码(慎用)

                在插值可以使用js语句来计算,但只限于一句语句
            指令:
                指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。
                指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM
                例如:v-if="seen=true"

                参数:
                    指令后以冒号跟参数
                    例如:v-bind:href = "url"
                          v-on:click = "dosomething"
                动态参数:
                    例如:<a v-bind:[attributeName]="url"> ... </a>
                        这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。
                        例如,如果你的 Vue 实例有一个 data property attributeName,其值为 "href",那么这个绑定将等价于 v-bind:href
                    注意:动态参数尽量小写,大写会被html文档解析装换为小写
                修饰符:
                    v-on:click.prevent= "dosomething"
                    v-on:click.stop = "dosomething"

        api:
             指令:
              1. v-text:  <span v-text="msg"></span>
              2. v-html:
              3. v-show: 根据元素style的display属性进行切换
              4. v-if:   根据表达式的返回的boolean值进行切换,销毁与重建
              5. v-else: 条件渲染(前一兄弟元素必须有 v-if 或 v-else-if)
                          <div v-if="Math.random() > 0.5">
                              Now you see me
                          </div>
                          <div v-else>
                          Now you don't
                          </div>
              6. v-else-if:
              7. v-for:
              8. v-on:
                         修饰符:
                            .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 } 模式添加侦听器
              9. v-bind:
              10. v-on:
              11. v-bind:
              12. v-model:
                          修饰符:
                            .lazy:取代input监听change事件
                            .number:输入字符串转换为有效的数字
                            .trim:首尾空格过滤

              13. v-slot:
              14. v-pre:跳过这个元素和他的子元素的编译过程
              15. v-cloak:该指令保存在元素上,知道关联元素结束编译
                          用法:
                            [v-cloak] {
                                display: none;
                            }
                            <div v-cloak>
                                {{ message }}
                            </div>
              16.v-once:只渲染元素或者组件一次
原文地址:https://www.cnblogs.com/xu3241/p/13704996.html