vue.js用法和特性详解
前 言
最近用 Vue.js 做了一个数据查询平台，还做了一个拼图游戏，突然深深的感到了 vue 的强大。
Vue.js 是一套构建用户界面 (user interface) 的渐进式框架。与其他重量级框架不同的是，Vue 从根本上采用最小成本、渐进增量 (incrementally adoptable) 的设计。Vue 的核心库只专注于视图层，并且很容易与其他第三方库或现有项目集成。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供有力驱动。
Vue.js 目前已经更新到 2.x，功能和语法上有一定升级和修改，本文首先介绍基础内容。
之后的内容会陆续更新。
| 1、新手指南 |
vue 的使用非常简单，下载 vue.js 或 vue.min.js 直接导入即可使用。
| 2、vue 初步入门 |
2.1声明式渲染
Vue.js 的核心是，可以采用简洁的模板语法来声明式的将数据渲染为 DOM：
<div id="app"> {{message}} </div>
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
这样就会输入：Hello Vue！
我们已经生成了第一个 Vue 应用程序！这看起来和渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被关联在一起，所有的数据和 DOM 都是响应式的。我们如何对这一切清晰领会？只需打开你的浏览器的 JavaScript 控制台（现在，就在当前页面打开），然后设置 app.message 的值，你将看到上面的示例所渲染的 DOM 元素会相应地更新。
除了文本插值 (text interpolation)，我们还可以采用这样的方式绑定 DOM 元素属性：
<div id="app-2"> <span v-bind:title="message"> 鼠标悬停此处几秒， 可以看到此处动态绑定的 title！ </span> </div>
var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于' + new Date().toLocaleString() } })
鼠标悬停几秒后，就可以看到动态的提示。
这里我们遇到一些新内容。你看到的 v-bind 属性被称为指令。指令带有前缀 v-，表示是由 Vue 提供的专用属性。可能你已经猜到了，它们会在渲染的 DOM 上产生专门的响应式行为。简而言之，这里该指令的作用就是：“将此元素的title 属性与 Vue 实例的 message 属性保持关联更新”。
如果你再次打开浏览器的 JavaScript 控制台，并输入 app2.message = '一些新的 message'，就会再次看到，绑定了title 属性的 HTML 已经进行了更新。
2.1条件与循环
控制切换一个元素的显示也相当简单：
<div id="app-3"> <p v-if="seen">现在你可以看到我</p> </div>
var app3 = new Vue({ el: '#app-3', data: { seen: true } })
继续在控制台输入 app3.seen = false，你应该会看到 span 消失。
这个示例表明，我们不只是可以将数据绑定到文本和属性，也可以将数据绑定到 DOM 结构。而且，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入 / 更新 / 删除元素时，自动使用过渡效果。
还有其它一些指令，每个都具有各自不同的特殊功能。例如，v-for 指令，可以使用数组中的数据来展示一个项目列表：
<div id="app-4"> <ol> <li v-for="todo in todos"> {{todo.text}} </li> </ol> </div>
var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '创建激动人心的代码' } ] } })
| 3 、vue 实例 |
每个 Vue 应用程序都是通过 Vue 函数创建出一个新的 Vue 实例开始的：
var vm = new Vue({ // 选项 })
尽管没有完全遵循 MVVM 模式，但是 Vue 的设计仍然受到了它的启发。作为约定，通常我们使用变量 vm (ViewModel 的简称) 来表示 Vue 实例。
3.1data 和 methods
在创建 Vue 实例时，会将所有在 data 对象中找到的属性，都添加到 Vue 的响应式系统中。每当这些属性的值发生变化时，视图都会“及时响应”，并更新相应的新值。
// data 对象 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
每当 data 对象发生变化，都会触发视图重新渲染。值得注意的是，如果实例已经创建，那么只有那些 data 中的原本就已经存在的属性，才是响应式的。也就是说，如果在实例创建之后，添加一个新的属性，例如：
vm.b = 'hi'
然后，修改 b 不会触发任何视图更新。如果你已经提前知道，之后将会用到一个开始是空的或不存在的属性，你就需要预先设置一些初始值。例如：
data: { newTodoText: '', visitCount: 0, hideCompletedTodos: false, todos: [], error: null }
除了 data 属性， Vue 实例还暴露了一些有用的实例属性和方法。这些属性与方法都具有前缀 $，以便与用户定义 (user-defined) 的属性有所区分。例如：
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` 改变后调用 })
3.2vue 实例的声明周期
vue 实例的声明周期是一个很重要的概念，理解之后可以通过它实现很多功能。
看下这段代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="container">我的声明周期，大家看吧！</div>
</body>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">以下代码时显示vm整个生命周期的流程</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> vm = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Vue({
el: </span>"#container"<span style="color: rgba(0, 0, 0, 1)">,
data: {
test : </span>'hello world'<span style="color: rgba(0, 0, 0, 1)">
},
beforeCreate: </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">);
showData(</span>'创建vue实例前',<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">);
},
created: </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
showData(</span>'创建vue实例后',<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">);
},
beforeMount:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
showData(</span>'挂载到dom前',<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">);
},
mounted: </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
showData(</span>'挂载到dom后',<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">);
},
beforeUpdate:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
showData(</span>'数据变化更新前',<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">);
},
updated:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
showData(</span>'数据变化更新后',<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">);
},
beforeDestroy:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
vm.test </span>="3333"<span style="color: rgba(0, 0, 0, 1)">;
showData(</span>'vue实例销毁前',<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">);
},
destroyed:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
showData(</span>'vue实例销毁后',<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">);
}
});
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> realDom(){
console.log(</span>'真实dom结构：' + document.getElementById('container'<span style="color: rgba(0, 0, 0, 1)">).innerHTML);
}
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> showData(process,obj){
console.log(process);
console.log(</span>'data 数据：' +<span style="color: rgba(0, 0, 0, 1)"> obj.test)
console.log(</span>'挂载的对象：'<span style="color: rgba(0, 0, 0, 1)">)
console.log(obj.$el)
realDom();
console.log(</span>'------------------'<span style="color: rgba(0, 0, 0, 1)">)
console.log(</span>'------------------'<span style="color: rgba(0, 0, 0, 1)">)
}
</span></script>
</html>
看一下效果图
通过控制台的打印效果可以看出来，实例化 vue 对象大致分为 创建 vue 实例、挂载到 dom、数据变化更新、vue 实例销毁 4 个阶段，，注意每个阶段都有对应的钩子，我们可以通过对这些钩子进行操作，达成一些功能。虽然初学者用不太上，但是提前了解一下还是好的，到时候碰到实际功能要能想得到生命周期的钩子。
结尾
今天就先简单介绍一下，之后会陆续更新接下来的内容。
下一期会为大家介绍一下我用 vue 做的拼图游戏和一个数据操作平台，希望大家能关注一下。