vue 是什么
Vue 的官方文档中这样介绍它：
简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
简单小巧是指 Vue.js 压缩后大小仅有17KB。所谓的渐进式，就是你可以一步一步、有阶段性地来使用 Vue.js，不必一开始就使用所有的东西。
使用 Vue.js 可以让 Web 开发变得简单，同时也颠覆了传统前端开发模式，它提供了现代 Web 开发中常见的高级功能，比如:
- 解耦视图与数据
- 可复用的组件
- 前端路由
- 状态管理
- 虚拟 DOM
vue中两个核心点
1. 响应的数据绑定
当数据发生改变 → 自动更新视图
利用Object.definedProperty的setter/getter代理数据，监控对数据的操作。
Object.definedProperty只能兼容IE8以上的浏览器,vue也是如此！
2. 组合的视图组件
UI页面映射为组件树
划分组件可维护、可重用、可测试
MVVM模式
M：Model 数据模板
V：view 视图模板
vm：view-Model 视图模型
vue实例与数据绑定
每一个应用都是通过 Vue 这个构造函数创建根实例（root instance）启动 new Vue（选项对象）
var app = new Vue({
// 选项
})
变量 app 就代表了这个 Vue 实例，事实上，几乎所有的代码都是对象，写入 Vue 实例的选项内，对象包含挂载元素、数据、模板、方法等
- el：挂载元素选择器 string | HtmlElement
- data：代理数据 Object | Funtion
- methods：定义方法 Object
vue代理data数据
每个 vue 实例都会代理其 data 对象里所有的属性，这些代理的属性是响应的；
注：新添加的属性不具备响应功能，改变后不会更新视图
vue实例自身的属性和方法
暴露自身的属性和方法，以 $ 开头 例如：$el $data…
vue生命周期
比较常用生命周期钩子有：
- created: 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，
$el还不可用。需要初始化处理一些数据时会比较有用。 - mounted: el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
- beforeDestory: 实例销毁之前调用，主要解绑一些使用 addEventListener 监听的事件等。
这些钩子与 el 和 data 类似，也是作为选项写入 Vue 实例内，并且钩子的 this 指向的是调用它的 Vue 实例：
var app = new Vue({
el: '#app',
data: {
name: 'adele'
},
created: function () {
console.log(this.name); // adele
},
mounted: function () {
console.log(this.$el); // <div id="app"></div>
}
})
插值与表达式
使用双大括号(Mustache语法)是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来。
如果有时候就是想输出HTML，而不是将数据解释后的纯文本，可以使用 v-html:
<div id="app">
<p v-html="link"></p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
link: '<a href="#">这是一个链接</a>'
}
})
</script>在 {{}} 中除了简单的绑定属性值外，还可以使用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 只是在{{}}插值的尾部添加一个管道符“（|）”对数据进行过滤，经常用于格式化文本，比如字母全部大写等。过滤规则是自定义的，通过给 Vue 实例添加选项 filters 来设置。
<div id="app">
{{ date | formatDate }}
</div>
<script>
var padDate = function (value) {
return value < 10 ? '0' + value : value;
};
var app = new Vue({
el: '#app',
data: {
date: new Date()
},
filters: {
formatDate: function (value) {
var date = new Date(value),
year = date.getFullYear(),
month = padDate(date.getMonth() + 1),
day = padDate(date.getDate()),
hours = padDate(date.getHours()),
minutes = padDate(date.getMinutes()),
seconds = padDate(date.getSeconds());
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
}
},
mounted: function () {
var _this = this;
this.timer = setInterval(function () {
_this.date = new Date();
}, 1000);
},
beforeDestroy: function () {
if(this.timer){
clearInterval(this.timer);
}
}
})
</script>过滤器也可以串联，而且可以接收参数，例如：
<!-- 串联 -->
{{ message | filterA | filterB }}
<!-- 接收参数 -->
{{ message | filterA('arg1', 'arg2') }}这里的arg1和arg2将分别传给过滤器的第二个和第三个参数，以为第一个是数据本身。
过滤器应当用于处理简单的文本转换，如果要实现复杂的数据变换，应该使用计算属性。
计算数据
模板是为了描述视图的结构，模板中放入太多逻辑导致模板过重难以维护，所以遇到复杂的逻辑时应该使用计算属性。
<div id="app">
{{ reversedText }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
text: '123,456'
},
computed: {
reversedText: function () {
return this.text.split(',').reverse().join(',');
}
}
})
</script>所有的计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计算属性的结果。
每一个计算属性都包括 getter 和一个 setter。
<div id="app">
{{ fullName }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'Jack',
lastName: 'Green'
},
computed: {
fullName: {
// getter,用于读取
get: function () {
return this.firstName + ' ' + this.lastName;
},
// setter,写入时触发
set: function (newValue) {
var name = newValue.split('');
this.firstName = name[0];
this.lastName = name[name.length - 1];
}
}
}
})
</script>当执行 app.fullName = ‘John Doe’ 时，setter就会被调用，数据 firstName 和 lastName 都会相对更新，视图同样也会更新。
计算属性还经常用于动态地设置元素的样式名称 class 和内联样式 style，当使用组件时，计算属性也经常用来动态传递 props。
计算属性还有两个很实用的小技巧：一是计算属性可以依赖其他计算属性；二是计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据。
