學習 Vue.js 最有效的方法是查看官網文檔html
數據綁定和第一個Vue應用
先從一段簡單的 HTML 代碼開始，感覺 Vue.js 最核心的功能。vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="你的名字">
<h1>你好,{{ name }}</h1>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
name: ''
}
})
</script>
</body>
</html>
這是一段很是簡單的代碼，可是體現了 Vue 最核心的功能：雙向綁定。在輸入框輸入的內容會實時顯示在頁面的 h1 標籤內。npm
Vue實例與數據綁定
實例與數據
經過構造函數 Vue 就能夠建立一個 Vue 的根實例，並啓動 Vue 應用：瀏覽器
var app = new Vue({
//選項
})
變量 app 就表明了這個 Vue 實例。app
首先，必不可少的一個選項就是 el 。el 用於指定一個頁面已存在的 DOM 元素來掛載 Vue 實例，它能夠是 HTMLElement，也能夠是 CSS 選擇器，好比：函數
<div id="app"><div>
var app = new Vue({
el: document.getElementById('app') //或者是'#app'
})
掛載成功後可使用 app.$el 來訪問該元素。學習
經過 Vue 實例的 data 選項，能夠聲明應用內須要雙向綁定的數據。this
var app = new Vue({
el: '#app',
data: {
a: 2
}
})
console.log(app.a); // 2
除了顯示聲明數據外，也能夠指向一個已有的變量，而且他們之間默認創建了雙向綁定，當修改其中一個，另外一個也會一塊兒變化。url
var myDate = {
a: 1
}
var app = new Vue({
el: '#app',
data: myDate
})
生命週期
每一個 Vue 實例建立時，都會經歷一系列的初始化過程，同時也會調用相應的生命週期鉤子，咱們能夠利用這些鉤子，在合適的時機執行咱們的業務邏輯，若是你使用過 jQuery，必定知道它的 ready() 方法，好比如下示例：spa
$(document).ready(function() {
//DOM 加載完後，會執行這裏的代碼
})
Vue的生命週期鉤子與之相似，比較經常使用的有：
- created：實例建立完成後調用，此階段完成了數據的觀測等，但還沒有掛載，$el 還不可用，須要初始化處理一些數據時會比較有用。
- mounted：el 掛載到實例上後調用，通常咱們的第一個業務會在這裏開始。
- beforeDestory：實例銷燬以前調用，主要解綁一些使用 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>
}
})
插值與表達式
使用雙大括號（Mustache 語法）"{{}}" 是最基本的文本插值方法，它會將咱們雙向綁定的數據實時顯示出來，例如：
<div id="app">
<h1>{{ name }}</h1>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
name: 'Vue.js'
}
})
</script>
大括號裏的內容會被替換爲 Vue.js， 經過任何方式修改數據 name，大括號裏的內容都會被實時替換，好比下面的示例，實時顯示當前的時間，每秒更新：
<div id="app">
<p>時間：{{ date }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
date: new Date()
},
mounted: function () {
this.timer = setInterval(() => {
this.date = new Date();
}, 1000)
},
beforeDestory: function () {
if(this.timer) {
clearInterval(this.timer);
}
}
})
</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>
若是想顯示 {{}} 標籤，使用 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>
Vue.js 只支持單個表達式，不支持語句和流控制。另外，在表達式中，不能使用用戶自定義的全局變量，只能使用 Vue 白名單內的全局變量，例如 Math 和 Date。如下是一些無效的示例：
<!-- 這是語句，不是表達式-->
{{ var book = 'Vue.js'}}
<!-- 不能使用流控制，要使用三元運算 -->
{{ if(ok) return msg}}
過濾器
Vue.js 支持在 {{}} 插值的尾部添加管道符"（|）"對數據進行過濾，常常用於格式化文本，好比字母所有大寫，貨幣千位使用逗號分隔。過濾的規則是自定義的，經過給 Vue 實例添加選項 filters 來設置，例如在上一節中實時顯示當前時間的案例，能夠對時間進行格式化處理。
<div id="app">
<p>時間：{{ date | formatDate }}</p>
</div>
<script>
var padDate = function (value) {
return value < 10 ? '0' + value : value;
};
var app = new Vue({
el: '#app',
data: {
date: new Date()
},
methods: {
},
filters: {
formatDate: function (value) {
var date = new Date(value);
var year = date.getFullYear();
var month = padDate(date.getMonth() + 1);
var day = padDate(date.getDate());
var hour = padDate(date.getHours());
var minutes = padDate(date.getMinutes());
var second = padDate(date.getSeconds());
return year + '-' + month + '-' + day + '-' + hour + '-' + minutes + '-' + second;
}
},
mounted: function () {
this.timer = setInterval(() => {
this.date = new Date();
}, 1000)
},
beforeDestory: function () {
if(this.timer) {
clearInterval(this.timer); //在 Vue 實例銷燬前，清除咱們的定時器
}
}
})
</script>
過濾器也能夠串聯，並且能夠接收數據，例如：
<!-- 串聯 -->
{{ message | filterA | filterB }}
<!-- 接收參數 -->
{{ message | filterA('arg1', 'arg2') }}
這裏的字符串 arg1 和 arg2 將分別傳給過濾器的第二個和第三個參數，由於第一個參數是數據自己。
過濾器應當用於簡單的文本轉換，若是要實現複雜的數據變換，應當使用計算屬性。
指令與事件
指令是 Vue.js 模板中最經常使用的功能，它帶有前綴 v-，指令的主要職責就是當其表達式的值改變時，相應地將某些行爲應用到 DOM 上。
Vue.js 內置了不少指令，如今只需瞭解 v-bind 和 v-on 指令。
v-bind
v-bind 的基本用途是動態更新 HTML 的屬性， 好比 id，class，例如：
<div id="app">
<a v-bind:href="url">百度一下</a>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
url: 'https://www.baidu.com'
}
})
</script>
此時示例中的連接地址與 url 進行了綁定，當經過某種方法改變 url 時，連接就會更新。
v-on
v-on 用來綁定事件監聽器，這樣就能夠作一些交互了，例如：
<div id="app">
<p v-if="show">這是一段文本</p>
<button v-on:click="change">點我切換</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show: true
},
methods: {
change: function () {
this.show = !this.show
}
}
})
</script>
在 button 按鈕上，使用 v-on:click 給該元素綁定一個點擊事件，在普通的元素上，v-on 能夠監聽原生的 DOM 事件，除了 click 外，還有 dbclick，keyup，mousemove 等。表達式能夠是一個方法名，這些方法都寫在 Vue 實例的 methods 屬性內，而且都是函數的形式，函數內的 this 指向當前 Vue 實例自己，所以你可使用 this.xxx 的形式訪問或修改數據。
表達式除了方法名，也能夠直接是一個內聯語句，上例可改成：
<div id="app">
<p v-if="show">這是一段文本</p>
<button v-on:click="show = !show">點我切換</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show: true
}
})
</script>
語法糖
語法糖是指在不影響功能的狀況下，添加某種方法實現一樣的效果，從而方便程序開發。
Vue.js 的 v-bind 和 v-on 指令，都提供了語法糖，也能夠說是縮寫。
v-bind 能夠直接寫成一個 「:」 ：
<a v-bind:href="url">百度一下</a> <!-- 縮寫爲 --> <a :href="url">百度一下</a>
v-on 能夠直接用 「@」 來縮寫：
<button v-on:click="change">點我切換</button> <!-- 縮寫爲 --> <button @:click="change">點我切換</button>
使用語法糖能夠簡化代碼的書寫。