vue.js中指令Directives详解

// or an Object:
{
color: 'red',
// both camelCase and dash-case works
fontWeight: 'bold',
'font-size': '2em'
}

提供参数时，参数指明了css属性的对应值:

<div v-style="
 top: top + 'px',
 left: left + 'px',
 background-color: 'rgb(0,0,' + bg + ')'
"></div>

v-on:为元素添加并更新事件监听器，参数可以是一个处理函数或者一个函数语句。

<div id="demo">
 <a v-on="click: onClick">Trigger a handler</a>
 <a v-on="click: n++">Trigger an expression</a>
</div>

我们可以为处理函数提供参数，其中this指的是当前的ViewModel，如下例中通过传入this参数改变元素的text值：

<ul id="list">
 <li v-repeat="items" v-on="click: toggle(this)">{{text}}</li>
</ul>

new Vue({
 el: '#list',
 data: {
 items: [
  { text: 'one', done: true },
  { text: 'two', done: false }
 ] },
 methods: {
 toggle: function (item) {
  item.done = !item.done
 }
 }
})

我们还可以传入$event表示触发处理函数的DOM事件，如下例传入$event阻止事件冒泡：

<button v-on="click: submit('hello!', $event)">Submit</button>

/* ... */
{
 methods: {
 submit: function (msg, e) {
  e.stopPropagation()
 }
 }
}
/* ... */

在监听键盘事件时由于要判断按键值，可以结合filter写成如下两种形式：

<!-- only call vm.submit() when the keyCode is 13 -->
<input v-on="keyup:submit | key 13">
<!-- same as above -->
<input v-on="keyup:submit | key enter">

当ViewModel销毁时，v-on绑定的事件会自动消除，我们不必亲自去清理这些绑定事件，这也防止了内存的泄露。 

v-model:为表单元素创建一个双向绑定，详细介绍请看这里 

v-if:根据绑定值的true或false来插入或移除元素，如例子中我们将根据test的正确与否决定两个<p>元素是否插入<template>当中

<template v-if="test">
 <p>hello</p>
 <p>world</p>
</template>

 

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