基于Vue的内部说明（下）

时间：2023-03-31 14:02:25 CSS

v-on绑定事件监听直接代码：

Counter

number:{{number}}+-

@click相当于v-on:click，是Vue的语法糖，在methods中定义方法，v-on命令监听DOM事件触发一些javascript代码。除了绑定点击，我们还可以绑定其他事件，比如键盘回车事件v-on:keyup.enter，更多事件请点击查看面试考点：Vue事件修饰符我

scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">事件流程图（来自百度）：当上面代码不加任何修饰符时，点击“我”打印儿子，父亲，爷爷.stop防止冒泡，子元素的操作不会触发父元素的相同事件我此时只会触发子元素事件。capture在添加事件检测时使用事件捕捉模式，由外向内捕捉me依次打印爷爷、爸爸、儿子。prevent取消默认事件百度链接不跳转。self只添加事件的元素由自己触发。once事件只触发其他指令v-pre(不需要表达式)跳过vue在模板中的编译，直接输出原始值，即在标签中添加v-pre不会输出vuedatavalue中的值

v-cloak（无须表达）为了解决网速慢时未加载Vue.js文件时页面数据绑定闪退的问题。例如：

会闪烁{{message}}并使用v-cloak命令让页面在Vue渲染完指定的整个DOM后显示，v-cloak会结束于将Vue实例编译并从绑定的DOM中移除，结合CSS可以解决这个问题。[v-cloak]{display:none;}v-once(不需要表达)这个指令在实际开发中用的不多，作用是只渲染一次定义它的元素或组件，包括所有元素或组件子节点。渲染一次后，不随数据变化，可视为静态。

以上就是本期的全部内容。想知道接下来会发生什么，请听下一章分解<(￣︶￣)↗[GO!]

上一篇：代码高亮、highlight.js的调用方法及其问题

下一篇：用小程序云开发打造功能齐全的博客小程序丨实践

基于Vue的内部说明（下）相关文章