想必喜欢前端开发的小伙伴们都或多或少接触过MVVM这个概念，说起MVVM，第一时间想到的便是angularjs，knockoutjs等已经被广泛运用的MVVM框架，之前我也没有在这方面有很多了解，最近在做项目的过程中接触了Vue.js,这是一个小巧精致，性能优异的MVVM框架，可以说对初学者是比较容易入门的，该框架的英文文档写得很好，但是中文版访问还不太稳定，翻译也有待改进，所以自己一遍学习，一遍记录自己的思考，与各位共享学习的经验。

第一篇主要是想谈谈vue.js中的Directives即指令，在vue.js中指令就是一个通知库进行某些具体的dom操作的口令，在html中表现为如下形式：

<element
prefix-directiveId="[argument:] expression [| filters...]">
</element>

Directives分为1.Reactive Directives、2.Literal Directives、3.Empty Directives，下面结合具体的api阐述他们的作用：

1.Reactive Directives（响应式指令）

Reactive Directives可以绑定在Vue实例或者在Vue实例上下文中求值的表达式上，当绑定的对象发生改变时，指令中的update()会在下一个系统单位时间发生异步响应，我们来看看具体的用法：

v-text:更新元素的textContent，事实上在html中{{mustache}}形式的插入值也会被编译为针对一个textNode的v-text指令。

v-html:更新元素的innerHTML，由于可能插入恶意代码，使用时要注意保证来源安全。

v-show:根据绑定值的true或false来决定所在元素在网页中正常显示还是显示为空。

v-class：这个指令有一个可选参数，无参数时将绑定值（一般为class名）添加到所在元素的classlist当中，并且一旦检测绑定值有改动，便随之改变classlist里对应的class；提供参数时参数的true或false将决定绑定值（class）是否被添加到所在元素的classlist中，示例如下：

<span v-class="
red : hasError,
bold : isImportant,
hidden : isHidden
"></span>

v-attr:更新所在元素的某些属性（由参数表示）。

<canvas v-attr="width:w, height:h"></canvas>

v-style:更新所在元素的样式，会智能添加浏览器供应商前缀，方便我们书写样式。这个指令有一个可选参数，无参数时，若绑定值为String则将绑定值设置为元素的style.cssText，若绑定值为Object则将Object中的样式键值对放入元素的style object当中；

<div v-style="myStyles"></div> // myStyles can either be a String:
"color:red; font-weight:bold;"
// 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 class="artcon">元素是否插入<template>当中

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

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>

继承单个属性：