[Vue學習筆記](二)資料綁定與Vue基礎
本篇重點會描述Vue如何做資料的綁定,及基礎的指令(v-if、v-bind)。
ㄧ、Vue實例與資料綁定
(ㄧ)Vue的實例化
要建立Vue的應用非常容易,只要建置出一個Vue的物件,就能使用,
var app = new Vue({
// 選項
})
- el 選項
el是用來指定一個頁面中的DOM元素,可以是HTMLElement、CSS選擇器,比方說:
<div id = "app></div>
var app = new Vue({
el: '#app'
})
這樣就掛載成功了,之後我們如果要存取<div id = “app></div>的元素,我們都能直接透過app.$e1來進行存取,Vue提供很多的屬性跟方法,之後會一一做介紹。
- data 選項
我們也可以在Vue中建立data的選項,將可能會用到的資料全部放到data之中,方便我們維護。
var app = new Vue({
el:'#app',
data: {
name: 'andy'
}
})
console.log(app.name); // andy
// 修改資料
app.name = 'alex';
console.log(app.name); // alex
(二)Vue的生命週期
- 鉤子函數:在所有函數執行前,先執行的函數
Vue實例化之前,會經歷一系列的初始化過程,也會呼叫對應的生命週期鉤子函數,如下圖所示
從以下程式碼,我們先創建上圖中每一個生命週期函數,並在console打印出來,要注意的是,beforeDestroy與destroyed只會在Vue自己使用$destroy摧毀才會被調用。
結果為下圖:
(三)Vue的內插與運算式
如果我們想要在視圖中看到資料的內容,可以使用{{ }}來內插資料,並將我們綁定的資料即時顯示出來。
如下面程式碼,我們在data中定義一個名為car的資料,只要在視圖中使用{{car}} 就能顯示出car的資料內容 ‘藍寶堅尼’。
若只想顯示html而非將資料解釋後的純文字,可以使用v-html
我們也可以在{{}}裡面進行js的運算式操作,如:
{{ number/10 }}
{{ isOK ? '確定':'取消' }}
(五)篩檢程式
如果想要先格式化文本,我們可以添加” | ”對資料進行過濾,舉例,假設我暪想要讓字母全部變成大寫可以這樣寫,先在Vue的選項中加入一個filters的屬性,裡面是放你想要怎麼修改資料的函數。
輸出: ANDY
二、指令與事件
指令是Vue中最常使用的功能,它的字首為“v-”,上面寫過的v-html就是一種指令,主要的功能為當運算式的值改變時,對應將某些行為應用到DOM之上。
v-if
<div id = '#app'>
<p v-if = "show">顯示此文</p>
</div>
<script>
var app = new Vue({
el:'#app'
data:{
show:true
}
})
當show為true時,v-if = true,p標籤就會被插入,反之為flase的話,p標籤就會被移除,Vue會優雅地幫你處理DOM的事情。
v-bind
v-bind是用來跟data進行綁定,如下列所示,當imgUrl的資料變更時,src也會進行變更,這是bind最基本的用法,我們也可以使用它來操作class屬性。
<div id = '#app'>
<img v-bind:src = "imgUrl" />
</div>
<script>
var app = new Vue({
el:'#app'
data:{
imgUrl: 'http://xxx.png'
}
})
v-on
v-on超級重要,他就是用來監聽DOM事件,比方說onclick、onmouseover等事件,如下列程式:
<div id = '#app'>
<input type="button" value="按鈕" v-on:click="onClick">
</div>
<script>
var app = new Vue({
el:'#app',
methods: {
onClick:function(){
alert("123");
}
}
})
</script>
當我們按下按鈕時,就會觸發onClick這個方法。
我們通常會將方法或函數寫在methods裡面,與data分開管理,函數內有一個this屬性指向的是目前Vue實例的本身,所以可以透過「this.屬性」的形式改變資料。
v-bind v-on簡寫
- v-bind
<a v-bind:href="url"></a>
可寫成:
<a :href="url"></a>
- v-on
<button v-on:click="handleClick"></button>
可寫成:
<button @click="handleClick"></button>
這次介紹了Vue的生命週期與許多基本的概念,我覺得最難理解的地方就是v-bind,需要透過多加練習來理解此觀念。
Github連結
我是Andy,謝謝你看完這篇文章,如果文章有幫助到你的話,希望不吝於幫我拍手 🙌🙌