Vue.js - 学习笔记 （一）

简介

实际上，所有的前台程序都可以分为View以及Model两个层次，Model层使用字面量以及JS特性创建数据模型，并搭载用户数据，View层则以用户友好的方式呈现Model层数据，并提供友好的交互方式。那么如何连接View和Model这两个层次呢？如果写过J2EE程序，那么最经典的连接方式就是MVC模式了，通过控制器进行View以及Model的交互。而另一种异军突起的方式，则是MVVM了，使用VM进行View与Model的双向绑定，一方面监听View，一方面监听Model，将两者的变更实时传递到对方。

Vue.js则是一个轻量级的VM实现，通过模板以及VM对象完成双向绑定，并提供表达式、计算属性、组件化等额外功能。另一方面，Vue.js也融入了Node.js以及ES6的怀抱，通过NPM/Bower/Web-pack可以无缝使用相关特性。

兼容性：

所有支持ES5特性的浏览器，IE 9以上

官网：
http://cn.vuejs.org/ http://cn.vuejs.org/api/
How to use :

<div id="demo">
<p>{{message}}</p>
<input v-model="message">
</div>

var demo = new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js!'
}
})

首先在HTML代码中{{message}} 以及 v-model是Vue.js的指令，你也可以看做是模板，也可以看做是标签功能增强器，在这里用于标记数据绑定。在JS代码中，new Vue可以看做是创建了一个VM来处理双向绑定等机制，el则是告知该VM应监听的根节点，data则是Model。此时，当我们在input输入了任意字符，VM就会监听到DOM的改变，从而将最新的值赋予Model，而VM也会监听Model的改变，将{{message}}也更新为最新的值。具体的响应原理，将会在下文提及。

PS:因为Vue,js的作者是一位华人，对这个精致的类库有了更高的亲切感 (づ￣3￣)づ╭。

PPS:因为是华人的关系，中文教程并不只是简单的译文。

PPPS:官方提供开发以及生产版本的Vue.JS，开发版本会携带友好的警告以及错误提示，生产版本48kb

使用

1. 从双向绑定开始
如同AngularJS一样，Vue.JS提供了多种数据绑定的方式

a. v-text  {{msg}}

更新元素的textContent
http://cn.vuejs.org/api/#v-text
b. v-html {{msg}}

更新元素的innerHTML

PS: Vue.JS提供特殊元素进行DOM元素片段处理，partial。应当谨慎使用v-html，因为他会改变innerHTML，可能会导致XSS攻击。
http://cn.vuejs.org/api/#partial http://cn.vuejs.org/api/#v-html
c. v-model

双向绑定元素的value

也因此存在使用限制

<input> <select> <textarea>

也可以使用特殊属性增强功能

<input v-model="msg" lazy> 将监听时机从input改变为change事件

<input v-model="msg" number> 将value自动转换为Number类型

<input v-model="msg" debounce="500">  设置监听延迟，单位为毫秒
http://cn.vuejs.org/api/#v-model
d. v-bind :

双向绑定元素的attribute

<div v-bind:style="myStyle">
<div :style="myStyle">
<my-comp :prop.sync="myStyle">v-bind支持修饰符，来确定绑定的方式，但只能对prop的属性使用（这是一个用于给子组件传递变量的语法，将在下文提及）
.sync 双向绑定

.once 一次绑定

How to use?

<input v-model="msg" />
<span>{{msg}}</span>
<span>{{{msg}}}</span>
<span v-bind:class.sync="myClass"></span>

2.逻辑分支循环

所有的编程语言都会有变量以及逻辑的部分，Vue.JS也不例外

a. v-if

根据条件决定是否渲染元素，在切换真假值时会进行DOM的创建与销毁。
http://cn.vuejs.org/api/#v-if
b. v-show

根据条件决定是否显示元素，在切换真假值时只会改变display属性，可以添加过渡效果(transition)
http://cn.vuejs.org/api/#v-show
c. v-else

对v-if / v-show的补充，与所有编程语言一样，表示否则，也必须跟随v-if / v-show
http://cn.vuejs.org/api/#v-else
d. v-for

如果你有一个数组，数组内所对应的View是相同的结构（例如列表项、表格），为了渲染此类元素，我们可以使用v-for

<div v-for="item in items">
{{ item.text }}
</div>如果items是如下的数据
[
{text:"a"},
{text:"b"},
{text:"c"},
]则会渲染出
<div>
a
</div>
<div>
b
</div>
<div>
c
</div>items可以是所有可迭代的JS对象（也就是可以在for(a in b)中使用的对象，Array | Object | Number | String）

也可以是数字，如果是数字，则表示迭代次数。
$index

与AngularJS类似，在for循环中有特殊的作用域，在这个作用域内可以使用$index变量来获取下标

$key 与 [b]$value[/b]

在原生的for-each循环中 ：for(i in obj)，实际上i是一个key（因为JS Object是map结构），obj[i]才是值，Vue.js提供$key以及$value获取到这些遍历值

track-by

为了最大可能地重用DOM，v-for使用特征值来标记对象，如果特征值一样则进行DOM的重用，这在使用全新对象替换对象时会格外有用(data.myList=otherList;)

默认的特征值为$index（track-by="$index"）所以如果不设置该属性，任何的索引刷新都会触发大量的DOM渲染（push,splice）

被Override的Array

JS提供了大量的API进行数组操作（而不像普通的变量，一个setter就可以了），为了监听数组对象的变化，Vue.JS包装了部分数组方法：

push / pop / shift / unshift / splice / sort / reverse

这些方法都会触发Vue.JS的监听器

filterBy与orderBy

当然，我们可能需要一些过滤器以及排序器，在不改变数据的情况下，更好地进行页面显然，当然你也可以重新开辟一个专门的数组，但显然这样不是很好。

<div v-for="item in items | filterBy 'hello'">
<div v-for="item in items | filterBy key1 in 'name'">
<div v-for="item in items | filterBy key1 in 'name'">
<div v-for="item in items | filterBy key1 in needFields">
<div v-for="item in items | filterBy myCustomFilterFunction">

<div v-for="item in items | orderBy 'key1'">
<div v-for="item in items | orderBy 'key1' -1">
<div v-for="item in items | orderBy 'key1' 'key2'">实际上，通过管道符连接的是Vue.JS的过滤器，并不仅仅是数组才可以使用过滤，符合条件的对象都可以，当然我们也可以自定义过滤器。
http://cn.vuejs.org/api/#v-for
3. 捕获动作

现在我们应该了解到，运用Vue.JS我们可以让我们的HTML代码获得灵魂（所能看到只是虚假的面具，真正的灵魂往往在目视之外），但是否还确实了什么。

我们可以进行双向绑定，我们可以为HTML赋予逻辑，那么我们也应该为对应的行为赋予对应的动作╮(╯﹏╰)╭（华丽的外表，与细腻的感受）

a. v-on

其使用与v-bind类似

<button v-on:click="handler">
<button @click="handler">
<button @click.stop="handler">
<button @click.stop="handler1('arg1',$event)">

new Vue({
methods:{
handler:function(event){}
handler1:function(txt,event){}
}
})

我们可以使用v-on，也可以使用缩写@，后跟事件名称，修饰符是可选的，赋值是用于处理事件的函数，这个函数需要被定义在VM的methods节点内。
默认的，将会传递事件源给函数，但是如果你调用的方法需要多个传参时，可以通过$event手动获取

.stop 调用event.stopPropagation()

.prevent 调用event.preventPropagation()

.capture 事件监听使用capture模式

.self 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.{keyCode} 在键盘事件上声明特殊的按键监听 （@keyup.enter @keyup.13）
http://cn.vuejs.org/api/#v-on
4. 捕获对象

实际上，你所想要的一切都可以通过控制VM的data以及methods进行，但也许你并不满足，作为强烈控制欲的你，甚至想自己获取DOM或者组件进行操作。

v-el 与 v-ref

现在我们可以做这种事

<my-comp v-ref:my-comp></my-comp>
<div v-el:my-div></div>

new Vue({
methods:{
myFunc:function(){
this.$refs.myComp
this.$els.myDiv
}
}
})

正如上述，你可以获取到想要的元素肆意非为了。当然，你还需要注意camelCase以及kebab-case。
v-pre 与 v-cloak

v-pre允许你跳过编译某个元素，v-cloak允许你为未经编译的元素追加css
http://cn.vuejs.org/api/#v-pre http://cn.vuejs.org/api/#v-cloak
5. Vue.js 数据驱动的视图

通过上述Vue.js的自带指令，我们可以发现，如果使用了Vue.js，我们就可以在原本枯燥无味的HTML上面胡作非为。同时，我们的代码也更加富有艺术价值。

现在我们只需要为HTML添加适合的指令，我们就可以只着眼于VM，在VM内我们可以省去所有与DOM相关的代码，如果你使用Jquery，你一定可以感受到满屏乱飞的$('xxx')，但在Vue.JS的世界中，我们只需要改变VM内数据，以及定义适合的方法来操作数据。

而Vue.JS提供了组件，让我们可以封装HTML以及指令成为一个特殊的标签，我们的应用就可以变成如下形式：

<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>一来可以使得代码重用，二来让HTML代码更加具有层次
http://cn.vuejs.org/guide/overview.html