學習 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>
使用語法糖能夠簡化代碼的書寫。