>v--cloak 遮盖 当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码，这时使用v-cloak会使这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。 * 这个指令使用在元素上直到关联实例结束编译； * 因为指令生命周期的特殊性，`v--cloak`常用来处理双括号语法闪烁问题； * 这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕 ~~~ <div id="app" v-cloak> <h2>{{message}}</h2> </div> <script> // 在vue解析之前, div中有一个属性v-cloak // 在vue解析之后, div中没有一个属性v-cloak setTimeout(function () { const app = new Vue({ el: '#app', data: { message: '你好啊' } }) }, 1000) //setTimeout延迟1000毫秒 </script> ~~~ >v-bind -- 标签属性动态绑定 * v-bind 是让标签属性可以动态的使用data参数或者写一些简单的js表达式; * 和`v-text`，`v-html`不同,它俩是针对标签中的内容，v-bind 是针对标签中的属性， 但是这个三个指令和双括号语法不同，这三个指令都是在标签属性中定义; * v-bind的缩写是冒号':'; ~~~ <div id="app"> <img :src="imgURL" alt=""> <a :href="aHref">百度一下</a> </div> <script> const app = new Vue({ el: '#app', data: { imgURL: '图片地址', aHref: 'http://www.baidu.com' } }) </script> ~~~ >v-on -- 绑定事件 * 可以用'v-on'指令监听 DOM 事件 * 'v-on'中要处理的逻辑比较复杂，因此不支持直接在'v-on'中直接写js代码，但支持方法，内联处理，和对象的形式(2.4.0+ 支持) * 着重说明不支持在'v-on'中写js代码指的是: ~~~ <button v-on:click="alert('a')">v-on按钮</button> // 如果这么写必须是在vue实例对象的method中有定义alter方法才行，否则不支持js的alert使用。 ~~~ * 'v-on' 的缩写是@符号 >阻止事件冒泡 -- stop ~~~ <input type="button" value="点击" @click.stop="inputClick"> ~~~ >事件修饰符 >*事件修饰符可以解决到点击事件自身带的一些事件效果* `.stop`: 阻止事件冒泡 `.prevent`: 阻止默认事件 `.capture`: 添加事件侦听器时使用事件捕获模式 `.self`: 只当事件在该元素本身（比如不是子元素）触发时触发回调 `.once`: 事件只触发一次 `.native`: 给组件绑定点击事件 https://ihavenolimitations.xyz/cyyspring/vuejs/936538