<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 id="parent">
<div v-component="user-profile" v-ref="profile"></div>
</div>
var parent = new Vue({ el: '#parent' })










