Vue.js 1-6

Vue.js介绍

Vue.js是一种渐进式JavaScript框架。
Vue.js优点：
1、体积小（压缩后33k）
2、更高的运行效率（基于虚拟dom）
3、双向数据绑定
4、生态丰富、学习成本低
……

安装与部署

1、直接用

创建第一个vue应用

Vue.js的核心是一个允许采用简洁的模板语法来声明式地讲数据渲染进DOM的系统：

视图

<div id="app">
	{{message}}
</div>

脚本

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

数据与方法

当一个Vue实例被创建时，它将data对象中的所有属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

//我们的数据对象
var data = {a:1}
//该对象被加入到一个Vue实例中
var vm = new Vue({
	data:data
})
//获得这个实例上的属性
//返回源数据中对应的字段
vm.a == data.a // => true
//设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
//反之亦然
data.a = 3
vm.a // => 3

使用Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

var obj = {
	foo:'bar'
}
Object.freeze(obj)
new Vue({
	el:'#app',
	data:obj
})

<div id = "app">
	<p>{{foo}}</p>
	<!-- 这里的‘foo’不会更新!-->
	<button v-on:click="foo='baz'">Change it</button>
</div>

除了数据属性，Vue实例还暴露了一些有用的实例属性与方法。它们都有前缀$，以便与用户定义的属性区分开来。例如：

var data = {a:1}
var vm = new Vue({
	el:'#example',
	data:data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
//$watch 是一个实例方法
vm.$watch('a',function (newValue,oldValue){
	// 这个回调将在‘vm.a’改变后调用
})

生命周期

1、beforeCreate
在实例初始化之后，数据观测（data obsever）和event/watcher事件配置之前被调用。
2、created
在实例创建完成后被立即调用。
3、beforeMount
在挂载开始之前被调用：相关的渲染函数首次被调用。
4、mounted
挂载成功。
5、beforeUpdate
数据更新的调用。
6、updated
组件DOM已经更新，组件更新完毕。
……

模板语法—插值

文本
数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值：

<span>Message:{{ msg }}</span>

Mustache标签将会被代替为对应数据对象上msg属性的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。

原始HTML
双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，你需要使用v-html指令：

<p>Using mustaches:{{ rawHtml }}</p>
<p>Using v-html directive:<span v-html="rawHtml"></span></p>

特性
Mustache语法不能作用在HTML特性上，遇到这种情况应该使用v-bind指令：

<div v-bind:id="dynamicId"></div>

使用JavaScript表达式
对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持。

模板语法—指令

指令（Directives）是带有v-前缀的特殊特性。指令特性的值预期是单个JavaScript表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

参数
一些指令能够接受一个“参数”，在指令名称之后以冒号表示。
动态参数
修饰符
修饰符（modifier）是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。