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。

過濾器適用於處理簡單的文字格式化操作，如果需要處理更為複雜的資料轉換操作，建議使用計算屬性。