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 生命周期

创建实例时，会经历一系列的初始化过程，同时也会调用相应的生命周期中的钩子。我们可以在合适的时机，在这些钩子中执行某些特定的业务。

常用的生命周期钩子有这些：

注意：钩子中的 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。

过滤器适用于处理简单的文本格式化操作，如果需要处理更为复杂的数据转换操作，建议使用计算属性。