2.1 Vue实例与数据绑定
2.1.1 实例与数据
Vue.js应用的创建很简单，通过构造函数Vue就可以创建一个Vue的根实例，并启动Vue应用：
var app = new Vue({
//选项
})
变量app就代表了这个Vue实例。事实上，几乎所有的代码都是一个对象，写入Vue实例的选项内的。
首先，必不可少的一个选项就是el。el用于指定一个页面中已存在的DOM元素来挂载Vue实例，它可以是HTMLElement，也可以是CSS选择器，比如：
<div id="app"></div>
var app = new Vue({
el: document.getElementById('app') //或者是’#app'
})
挂载成功后，我们可以通过app.$el来访问该元素。Vue提供了很多常用的实例属性与方法，都以$开头，比如$el，后续还会介绍更多有用的方法。
回顾章节开始的Hello World代码，在input标签上，有一个v-model的指令，它的值对应于我们创建的Vue实例的data选项中的name字段，这就是Vue的数据绑定。
通过Vue实例的data选项，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在data内声明，这样不至于将数据散落在业务逻辑中，难以维护。Vue实例本身也代理了data对象里的所有属性，所以可以这样访问：
var app = new Vue({
el: '#app',
data: {
a: 2
}
})
console.log(app.a); // 2
除了显式地声明数据外，也可以指向一个已有的变量，并且它们之间默认建立了双向绑定，当修改其中任意一个时，另一个也会一起变化：
var myData = {
a: 1
}
var app = new Vue({
el: '#app',
data: myData
})
console.log(app.a); // 1
//修改属性，原数据也会随之修改
app.a = 2;
console.log(myData.a); // 2
// 反之，修改原数据，Vue属性也会修改
myData.a = 3;
console.log(app.a); // 3
2.1.2 生命周期
每个Vue实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子，我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。如果你使用过jQuery，一定知道它的ready()方法，比如以下示例：
$(document).ready(function() {
// DOM加载完后，会执行这里的代码
});
Vue的生命周期钩子与之类似，比较常用的有：
● created实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el还不可用。需要初始化处理一些数据时会比较有用，后面章节将有介绍。
● mounted el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
● beforeDestroy实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等。
这些钩子与el和data类似，也是作为选项写入Vue实例内，并且钩子的this指向的是调用它的Vue实例：
var app = new Vue({
el: '#app',
data: {
a: 2
},
created: function () {
console.log(this.a); // 2
},
mounted: function () {
console.log(this.$el); // <div id="app"></div>
}
})
2.1.3 插值与表达式
使用双大括号（Mustache语法）“{{ }}”是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来，例如：
<div id="app">
{{ book }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
book: '《Vue.js实战》'
}
})
</script>
大括号里的内容会被替换为《Vue.js实战》，通过任何方法修改数据book，大括号的内容都会被实时替换，比如下面的这个示例，实时显示当前的时间，每秒更新：
<div id="app">
{{ date }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
date: new Date()
},
mounted: function () {
var _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
this.timer = setInterval(function() {
_this.date = new Date(); //修改数据date
}, 1000);
},
beforeDestroy: function () {
if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前，清除我们的定时器
}
}
})
</script>
提示 这里的{{ date }}输出的是浏览器默认的时间格式，比如2017-01-02T14:04:49.470Z，并非格式化的时间（2017-01-02 22:04:49），所以需要注意时区。有多种方法可以对时间格式化，比如赋值前先使用自定义的函数处理。Vue的过滤器（filter）或计算属性（computed）也可以实现，稍后会介绍到。
如果有的时候就是想输出HTML，而不是将数据解释后的纯文本，可以使用v-html：
<div id="app">
<span v-html="link"></span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
link: '<a href="#">这是一个连接</a>'
}
})
</script>
link的内容将会被渲染为一个具有点击功能的a标签，而不是纯文本。这里要注意，如果将用户产生的内容使用v-html输出后，有可能导致XSS攻击，所以要在服务端对用户提交的内容进行处理，一般可将尖括号“< >”转义。
如果想显示{{ }}标签，而不进行替换，使用v-pre即可跳过这个元素和它的子元素的编译过程，例如：
<span v-pre>{{ 这里的内容是不会被编译的}}</span>
在{{ }}中，除了简单的绑定属性值外，还可以使用JavaScript表达式进行简单的运算、三元运算等，例如：
<div id="app">
{{ number / 10 }}
{{ isOK ? ’确定’ : ’取消’ }}
{{ text.split(', ').reverse().join(', ') }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
number: 100,
isOK: false,
text: '123,456'
}
})
</script>
显示结果依次为：10、取消、456,123。
Vue.js只支持单个表达式，不支持语句和流控制。另外，在表达式中，不能使用用户自定义的全局变量，只能使用Vue白名单内的全局变量，例如Math和Date。以下是一些无效的示例：
<! -- 这是语句，不是表达式 -->
{{ var book = 'Vue.js实战’ }}
<! --不能使用流控制，要使用三元运算 -->
{{ if (ok) return msg }}
2.1.4 过滤器
Vue.js支持在{{ }}插值的尾部添加一个管道符“（|）”对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的，通过给Vue实例添加选项filters来设置，例如在上一节中实时显示当前时间的示例，可以对时间进行格式化处理：
<div id="app">
{{ date | formatDate }}
</div>
<script>
//在月份、日期、小时等小于10时前面补0
var padDate = function(value) {
return value < 10 ? '0' + value : value;
};
var app = new Vue({
el: '#app',
data: {
date: new Date()
},
filters: {
formatDate: function (value) { // 这里的value就是需要过滤的数据
var date = new Date(value);
var year = date.getFullYear();
var month = padDate(date.getMonth() + 1);
var day = padDate(date.getDate());
var hours = padDate(date.getHours());
var minutes = padDate(date.getMinutes());
var seconds = padDate(date.getSeconds());
//将整理好的数据返回出去
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes
+ ':' + seconds;
}
},
mounted: function () {
var _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
this.timer = setInterval(function() {
_this.date = new Date(); //修改数据date
}, 1000);
},
beforeDestroy: function () {
if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前，清除我们的定时器
}
}
})
</script>
过滤器也可以串联，而且可以接收参数，例如：
<! -- 串联 -->
{{ message | filterA | filterB }}
<! -- 接收参数-->
{{ message | filterA('arg1', 'arg2') }}
这里的字符串arg1和arg2将分别传给过滤器的第二个和第三个参数，因为第一个是数据本身。
提示 过滤器应当用于处理简单的文本转换，如果要实现更为复杂的数据变换，应该使用计算属性，下一章中会详细介绍它的用法。