vue.js中指令Directives详解

2020-06-13 10:31:47易采站长站整理

// 访问子组件
var child = parent.$.profile

这个指令只能与v-component和v-repeat一起使用,与v-repeat一起使用时,其value是与绑定数据数组对应的子组件数组。 

v-el:为当前dom元素创建一个引用,供其自身vue实例使用,例如<div v-el=”hi”>可以使得vm.$$.hi访问到该dom元素 

v-partial:将当前dom元素中的innerHTML替换为事先注册的partial,有两种写法,{{ mustache}}可以让dom元素随数据改变而更新: 


<!-- content will change based on vm.partialId -->
<div v-partial="{{partialId}}"></div>

另一种写法则没有数据跟随更新的效果:


<div>{{> my-partial}}</div>

v-transition:为当前dom元素在指定参数值作用时添加动画效果,后续文章会详细介绍 

3.Empty Directives(字面指令)

v-pre:这个指令是通知编译器跳过当前dom元素和其所有子元素,这是为了在我们编程过程中对无需编译的元素节省编译时间

v-cloak:在当前元素编译完成之前改指令都会存在,我们一般使用这个指令来在元素编译未完成时隐藏原始的 {{ Mustache }} 模板,可以在css中这样写:

[v-cloak] { display: none }