Vue插值、表达式、分隔符、指令知识小结(2)

.stop-调用event.stopPropagation()
.prevent-调用event.preventDefault()
.capture-添加事件监听时使用capture模式
.self-只当事件是从侦听器绑定的元素本身触发时才触发回调
.{KeyCode|KeyAlias}-只在指定按键上触发回调。Vue.js提供的键有:[esc:27、tab:9、enter:13、space:32、'delete':[8,46]、up:38、left:37、right:39、down:40]

v-ref

在父组件上注册一个子组件的索引,便于直接访问,不需要表达式,必须提供参数id。可以通过父组件的$refs对象访问子组件。

当v-ref和v-for一起使用时,注册的值是一个数组,包含所有子组件,对应于绑定数组;

如果v-for使用在一个对象上,注册的值是一个对象,包含所有子组件,对应于绑定对象。

v-el

为DOM元素注册一个索引,方便通过所属实例的els访问这个元素。可以用v−el:some−el设置this. els访问这个元素。可以用v−el:some−el设置this.els访问这个元素。可以用v-el:some-el 设置this.els.someEl.

<span v-el:msg>hello</span> <span v-el:other-msg>world</span>

通过this.$els获取响应的DOM元素:

this.$els.msg.textContent //-> "hello" this.$els.otherMsg.textContent //-> "world"

v-pre

编译时跳过当前元素和它的子元素。可以用来显示原始的Mustache标签。跳过大量没有指令的节点会加快编译。

v-cloak

v-cloak这个指令保持在元素上直到关联实例结束编译。和css [v-cloak]{display:none}一起使用,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕,否则在渲染页面时,有可能用户会先看到Mustache标签,然后看到编译后的数据。

<div v-cloak> {{message}} </div>

下面看下去除vue插值表达式{{}}

vue 提供了v-cloak指令,该指令会绑定在元素上直到关联实例结束编译。

[v-cloak] {style:display:none} 和v-cloak一起使用时,会隐藏Mustach标签

直到实例准备完毕。

具体参考

总结

以上所述是小编给大家介绍的Vue插值、表达式、分隔符、指令知识小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/09506803c5f283fd0083ee588ccc3ff1.html