Vue基础之内部指令（下）

v-on绑定事件监听器

直接撸代码：

  
计数器
  number：{{number}}
  +
  -

@click等同于v-on:click，是Vue的语法糖，在methods内定义好方法，v-on指令监听DOM事件来触发一些javascript代码。

除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,更多事件请点击查看

面试考点：Vue事件修饰符的作用

  

    

      
me
    
  

事件流图(来自百度)：

image

上面一段代码，什么修饰符都不添加时，点击“me”，依次打印son、father、grandfather

• .stop
  阻止冒泡,操作子元素不会触发父元素同类事件

  

    
me
  

此时，只会触发子元素事件

• .capture
  添加事件侦查时使用事件捕获模式，从外到内依次捕获

  

    
me
  

依次打印grandfather、father、son

• .prevent
  取消默认事件

百度

链接不跳转

• .self
  只在添加事件的元素自身触发
• .once
  事件只触发一次

其他指令

v-pre（不需要表达式）

在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了

    
{{message}}

v-cloak（不需要表达式）

为了解决当网速较慢时，Vue.js文件没有被加载完时页面上数据绑定的闪现问题。
例如：

{{message}}

会闪现{{message}}

利用v-cloak指令使页面在Vue渲染完指定的整个DOM后才进行显示，并且v-cloak会在Vue实例结束编译后从绑定的DOM上移除，结合CSS可以解决这个问题。

[v-cloak] {
  display: none;
}

v-once（不需要表达式）

这个指令在实际开发中用的不是很多，作用是使定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。渲染一次后不会随数据变化，可以视为静态。

    
    
{{message}}

v-once1.png

以上是本期全部内容，欲知后事如何，请听下回分解<(￣︶￣)↗[GO!]