Vue.js-開篇
學習筆記:Vue.js基礎知識
基礎知識
建構函式Vue的根例項new Vue({})
,並啟動Vue應用。
var app = Vue({ el: "#app", data: {}, methods: {} });
變數app
代表這個Vue例項。
其中,必不可少的選項是el
,用於指定一個頁面中已存在的DOM元素來掛載Vue例項,可以是HTMLElement
,也可以是CSS選擇器。
var app = Vue({ el: document.getElementById('app') });
掛載成功後,可以通過app.$el
訪問該元素。Vue提供了很多常用的例項屬性和方法,都以$
開頭。
data
選項用於宣告應用內需要雙向繫結的資料。建議所有會用到的資料都預先在data
內宣告,提升業務的可維護性。
Vue例項new Vue({})
,這裡可以使用app
代理了data
物件裡的所有屬性,可以這樣訪問data
中的資料:
console.log(app.name);
除了顯式地宣告資料外,還可以指向一個已有的變數,並且它們之間預設建立了雙向繫結,當修改其中任意一個時,另一個也會跟著變化。
var myData = { a: 1 }; var app = Vue({ el: "#app", data: myData }); app.a = 2; console.log(myData.a);//2 myData.a = 3; console.log(app.a);//3
生命週期
Vue的生命週期鉤子:
-
created
:例項建立完成後呼叫,此階段完成了資料的觀測等,但未掛載,$el
還不可用。(需要初始化處理一些資料時會比較有用) -
mounted
:el
掛載到例項上後呼叫,第一個業務邏輯會在這裡開始。 -
beforeDestroy
:例項銷燬之前呼叫。主要解綁一些使用addEventListener
監聽的事件等。
這些鉤子與el
和data
類似,也是作為選項寫入Vue例項中,並且鉤子的this
指向的是呼叫它的Vue例項。
插值與表示式
使用(Mustache語法){{}}
是最基本的文字插值方法,它會自動將我們雙向繫結的資料實時顯示出來。
v-html
直接輸出HTML,而不是將資料解析後的純文字。
<div id="app"> <span v-html="link"></span> </div> new Vue({ el: "#app", data: { link: '<a href="#">this is a link.</a>' } });
link的內容將會被渲染成一個a
標籤,而不是純文字。
如果將使用者產生的內容使用v-html
輸出後,有可能導致XSS攻擊,所以要在服務端對使用者提交的內容進行處理,一般可將<>
轉義。
如果想要顯示{{}}
標籤,不進行替換,使用v-pre
即可跳過這個元素和它的子元素的編譯過程。
-
在
{{}}
中除了簡單的繫結屬性值外,還可以使用JavaScript表示式進行簡單的運算、三元運算等。 - Vue只支援單個表示式,不支援語句和流程控制。
-
在表示式中不能使用使用者自定義的全域性變數,只能使用Vue白名單內的全域性變數,例如
Math
和Date
。
過濾器
Vue.js支援在{{}}
插值的尾部新增一個管道符(|)
對資料進行過濾,經常使用者格式化文字,比如字母全部大寫
、貨幣千位使用逗號分隔
等。過濾的規則是自定義的,通過給Vue例項新增選項filter
來設定。
<div id="app"> {{date | formatDate}} </div>
過濾器也可以串聯,而且可以接收引數:
<!--串聯--> {{message | filterA | filterB}} <!--接收引數--> {{message | filterA('arg1','arg2')}}
過濾器應當用於處理簡單的文字轉換,如果要實現更為複雜的資料轉換,應該使用計算屬性。
指令事件
指令(Directives
)是Vue.js模板中最常用的一項功能,它帶有字首v-
。指令的主要職責就是當其表示式的值改變時,相應地將某些行為應用到DOM上。
v-bind
的基本用途是動態更新HTML元素上的屬性,比如id
、class
等。
另一個非常重要的指令就是v-on
,用來繫結事件監聽器。
在普通元素上,v-on
可以監聽原生的DOM事件,除了click
外還有dbclick
、keyup
、mousemove
等。表示式可以是一個方法名,這些方法都寫在Vue市裡的methods
屬性內,並且是函式的形式,這些函式的this
指向的是當前Vue例項本身,因此可以直接使用this.xxx
的形式訪問或修改資料。
Vue.js將methods
裡的方法進行代理,可以像訪問Vue資料一樣呼叫方法:
<div id="app"> <p v-if="show">這是一段為本</p> <button @click="handleClose">點選隱藏</button> </div> new Vue({ el: "#app", data: { show: true }, methods: { handleClose: function () { this.close() }, close: function () { this.show = false } } });
在handleClose
方法中直接通過this.close()
呼叫了close()
函式。
var app = new Vue({ el: "#app", data: { show: true }, methods: { init: function (text) { console.log(text); }, }, mounted: function () { this.init('在初始化時呼叫'); } }); app.init('通過外部呼叫');
語法糖
語法糖是指在不影響功能的情況下,新增某種方法實現同樣的效果,從而方便程式開發。
Vue.js的v-bind
和v-on
指令都提供了語法糖,也可以說是縮寫,比如v-bind
縮寫成:
,多用於a
、img
標籤;v-on
縮寫成@
,所用於input
、button
標籤。