vue.js中指令Directives详解(2)

v-repeat:为绑定数组或对象中的每一个item创建一个子ViewModel,或者为绑定的数字值创建对应数量的子ViewModel。并根据绑定值的改变随时更新。没有提供参数时子ViewModel会直接使用绑定数组中的分配单元作为它的$data,如果值不是一个对象,则会创建一个数据包装对象,而值会被设置在别名为$value的 key 上。

<ul> <li v-repeat="users"> {{name}} {{email}} </li> </ul>

如果提供了参数,我们将创建一个数据包装对象,将参数作为对象的key,从而访问对象模板中的属性:

<ul> <li v-repeat="user : users"> {{user.name}} {{user.email}} </li> </ul>

v-with:这个指令只能结合接下来讲到的v-component指令使用,作用是让子ViewModel可以继承父ViewModel的数据,我们可以传入父ViewModel的属性对象或单个属性,在子ViewModel中访问:

// parent data looks like this { user: { name: 'Foo Bar', email: 'foo@bar.com' } }

继承对象:

<my-component v-with="user"> <!-- you can access properties without `user.` --> {{name}} {{email}} </my-component>

继承单个属性:

<my-component v-with="myName: user.name, myEmail: user.email"> <!-- you can access properties with the new keys --> {{myName}} {{myEmail}} </my-component>

v-events:这个指令也只能结合接下来讲到的v-component指令使用,它使得父ViewModel能够监听子ViewModel上的事件,我们要注意区分v-on与v-events,v-events监听的是通过vm.$emit()创建的 Vue 组件系统事件,而不是 DOM 事件。我们举例说明:

<!-- inside parent template --> <div v-component="child" v-events="change: onChildChange"></div>

当子ViewModel调用this.$emit('change', …)时会触发父ViewModel的onChildChange()方法,并且把emit函数中附加的参数传给onChildChange()方法。 

2.Literal Directives(字面指令)

字面指令并没有绑定到某一个对象上,字面指令是把它们的参数作为纯字符串传给bind()函数中执行一次,字面指令可以接受{{mustache}}表达式,但是该表达式只会在编译阶段执行一次,不会绑定数据的改变:

下面看一看具体的api:

v-component:之前提到过,这是使用我们提前声明并注册好的组件构造器将当前元素编译为子ViewModel,从而实现数据继承,之后的文章会详细介绍组件系统。 

v-ref:在父ViewModel中创建子ViewModel的引用,方便父ViewModel中的$对象访问子组件:

<div> <div v-component="user-profile" v-ref="profile"></div> </div>

var parent = new Vue({ el: '#parent' }) // 访问子组件 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 }

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

转载注明出处:https://www.heiqu.com/wwwyxf.html