1 创建实例
通过 Vue() 构造函数就可以创建一个 Vue 的根实例：
var app = new Vue({
...
});
1.1 el 选项
el 选项用于绑定页面中的某个 DOM 元素。它可以是 HTMLElement 或是 CSS 选择器。
在上例中：
- HTMLElement 方式为
document.getElementById('app')。 - CSS 选择器方式为
#app。
建议使用 CSS 选择器方式，因为它更简洁。
可以通过 app.$el 来访问这个 DOM 元素。
1.2 data 选项
data 选项用于设定需要双向绑定的数据。建议把所有会用到的数据都放在 data 选项，这样做便于维护。
通过 Vue 实例，我们可以U获取 data 对象中的所有属性对象：
html：
<div id="app"></div>
js：
var app = new Vue({
el: '#app',
data: {
content: '今天天气不错'
}
});
console.log("content:" + app.content);//今天天气不错
我们也可以在 data 选项中指向一个已定义的变量，这样它们之间就建立了双向绑定关系，即修改其中一个值时，另一个的值也会发生变化：
var news = {
title: '火车票购票新规:换乘购票需间隔40分钟以上'
};
var app3 = new Vue({
el: '#app',
data: news
});
console.log('app3.title:' + app3.title);//火车票购票新规:换乘购票需间隔40分钟以上
//修改 Vue 实例属性
app3.title = '菜鸟驿站数据被盗';
console.log('news.title:' + news.title);//菜鸟驿站数据被盗
//修改变量属性
news.title = '央视中秋晚会节目单公布 吉隆坡悉尼海外分会场成亮点';
console.log('app3.title:' + app3.title);//央视中秋晚会节目单公布 吉隆坡悉尼海外分会场成亮点
2 生命周期
创建实例时，会经历一系列的初始化过程，同时也会调用相应的生命周期中的钩子。我们可以在合适的时机，在这些钩子中执行某些特定的业务。
常用的生命周期钩子有这些：
| 钩子 | 说明 |
|---|---|
| created | 实例化创建完成后调用，此阶段完成了数据观测，但尚未挂载， $el 还不可用，一般在此进行一些数据初始化处理工作。 |
| mounted | el 挂载到实例后调用，一般在此编写第一个业务逻辑 。 |
| beforeDestroy | 实例被销毁之前调用 。 一般在此解绑通过 addEventListener 添加的监听事件。 |
**注意：**钩子中的 this 指向它自身的 Vue 实例。
var app4 = new Vue({
el: '#app',
data: {
name:'deniro'
},
created:function () {
console.log(this.name);//deniro
},
mounted:function () {
console.log(this.$el);//<div id="app"></div>
}
});
3 插值与表达式
插值语法是双大括号（ Mustache 语法） “{{ }}”，它会自动将我们双向绑定的数据实时显示出来。
html：
<div id="app">
{{friend}}
</div>
js：
var app = new Vue({
el: '#app',
data: {
friend: 'Jack'
}
})
双大括号 {{friend}} 会被替换为 Jack。
只要数据被修改，那么文本插值中的内容都会被替换。我们做一个计数器，它的值每秒会递增 1：
html：
<div id="app2">
{{count}}
</div>
js：
var app2 = new Vue({
el: '#app2',
data: {
count: 1
},
mounted: function () {
var that = this;//设置 that 为当前 Vue 实例
//每秒递增计数器
this.timer = setInterval(function () {
that.count++;//递增
}, 1000);
},
beforeDestroy: function () {//销毁前，清除定时器
if (this.timer) {
clearInterval(this.timer);
}
}
});
效果：
插值表达式还支持使用 JavaScript 表达式进行简单的运算 、 甚至支持三元运算符。
html：
<div id="app5">
{{num*3}}
{{isTrue?'真的':'假的'}}
{{context.length}}
</div>
js：
var app5 = new Vue({
el: '#app5',
data: {
num: 3,
isTrue: true,
context: '听轻音乐是一种享受O(∩_∩)O~'
}
});
输出结果：
9 真的 17
注意： Vue 只支持单个表达式，不支持语句和流程控制 。 另外，在表达式中，不能使用用户自定义的全局变量，只能使用 Vue 内部定义全局变量，如 Math 和 Date 等。
4 输出 HTML 代码
可以使用 v-html 属性，让某个 HTML 元素内包裹 HTML 代码：
html：
<div id="app3">
<span v-html="h1"></span>
</div>
js：
var app3 = new Vue({
el: '#app3',
data: {
h1: '<h1>据说用牙刷刷猫时，猫会感觉像被妈妈舔一样，网友试了下结果……</h1>'
}
});
**注意：**用户输入的内容，如果直接使用 v-html 属性输出 HTML 代码，那么就有可能遭遇 XSS 攻击的问题，所以服务端必须对用户提交的内容进行过滤处理（如转义尖括号 <>）。
5 v-pre 属性
可以使用 v-pre 属性，来跳过这个元素与其子元素的编译过程，比如希望显示 {{}} 字符串：
html：
<div id="app4">
<span v-pre>{{content}}</span>
</div>
6 过滤器
Vue.js 支持在 {{ }} 插值的尾部 · 添加一个管道符 “ | ” 实现数据过滤功能，这项能力经常用于格式化文本，比如字母全部大写，格式化货币数值等 。 过滤的规则是自定义的，通过给 Vue 实例添加选项 filter 来设置，假设我们对返回的字符串，设置为全部大写：
html：
<div id="app6">
{{str | upperCaseStr}}
</div>
js：
var app6 = new Vue({
el: '#app6',
data: {
str: "deniro"
},
filters: {
upperCaseStr: function (val) {
return val.toUpperCase();
}
}
});
输出结果：
DENIRO
**注意：**过滤选项名是 filters，有 s 结尾的哦O(∩_∩)O~
过滤器还可以串联起来：
{{ val | filterFuntionA | filterFuntionB | ... }}
因为过滤器是 JavaScript 函数，所以可以定义入参：
{{ val | filterFuntion(arg1,arg2,...)}}
**注意：**入参是从过滤函数的第二个参数开始的，因为第一个是 val。
过滤器适用于处理简单的文本格式化操作，如果需要处理更为复杂的数据转换操作，建议使用计算属性。