創建一個Vue實例僅需4步,如下所示:
我們知道,定義一個Vue實例的參數有el(指定掛載的DOM元素),data(實例的數據),上一節講過除了這兩個之外,還可以定義其他參數。今天,我們就來學習在開發中,我們要怎么定義一個vue實例才能滿足我們的需要?
下面,我們先用上一節的知識,先創建一個Vue實例:
<div id = "app"></div>
<script>
let vm = new Vue({
// 掛載元素
el: '#app',
// 實例vm的數據
data: {}
})
</script>
很簡單,接下來,就用這個實例來展開講解。
我們就具體講一下定義一個Vue實例會用到的4個常用參數選項。
1、filters 過濾器
第一個要講的是過濾器filters選項。為什么要有這個東西呢?舉個例子,假設我們有一組數字,都是小數,如下:
let vm = new Vue({
el: '#app',
data: {
num1: 33.141,
num2: 46.212,
num3: 78.541
}
})
num1,num2,num3都是Vue實例vm的小數,我們把它展示在視圖上:
<div id="app">
數字1:{{ num1 }}<br>
數字2:{{ num2 }}<br>
數字3:{{ num3 }}
</div>
利用上節講到的雙大括號{{ }}渲染出來,很簡單。如下圖所示:
然而當需求突然改變了,我們不能把小數展示出來,需要把小數轉換成整數再顯示。
這個時候,我們需要把三個小數經過過濾處理后再展示,不能直接展示。這種情況就需要用到Vue的filters過濾器了。
let vm = new Vue({
el: ‘#app',
data: {
num1: 33.141,
num2: 46.212,
num3: 78.541
},
// 過濾器
filters: {
toInt(value) {
return pareseInt(value)
}
}
})
參數對象處理el和data屬性之外,還多了一個filters屬性,它的值也是一個對象,里面定義了一個叫toInt()的方法,傳入了一個value的參數,函數的作用就是把傳入的參數value,簡單地轉成一個整數,并return回去。
如果toInt()函數的寫法你看起來覺得陌生的話,這樣寫你會不會覺得熟悉很多:
// 過濾器
filters: {
toInt: function(value) {
return parseInt(value)
}
}
這是ES5的語法,我們后面都會使用ES6的最新寫法,如果還不是很了解,建議先學習一下ES6的相關教程。
回到過濾器filters,定義完filters屬性后,接下來怎么做呢?
<div id="app">
數字1:{{ num1 | toInt }}<br>
數字2:{{ num2 | toInt }}<br>
數字3:{{ num3 | toInt }}
</div>
如上代碼所示,通過管道符 | 把函數toInt放到變量后面即可,num1,num2,num3會分別作為參數value傳入toInt(value)方法進行運算,并返回一個整數。
我們運行后得到的結果:
2、computed 計算屬性
有時候,我們拿到一些數據,需要經過處理計算后得到的結果,這才是我們要展示的內容。
比如:我們有三個數,但需要展示的是三個數字之和。這種情況,就適合我們的計算屬性computed。
let vm = new Vue({
el: '#app',
data: {
num1: 1,
num2: 3,
num3: 6
},
// 計算屬性
computed: {
sum() {
return this.num1 + this.num2 + this.num3
}
}
})
計算屬性computed的定義語法和過濾器filters類似,但是用法不一,如下:
<div id="app">
總和:{{ sum }}
</div>
計算屬性computed用法更簡潔,僅需{{ sum }}就能讀取到它的計算結果:1+3+6結果應該為10。
需要注意的是,sum的值是依賴data中的數據num1,num2,num3的值,一旦它們發送了變化,sum的值也會自動更新。
我們試一下,通過chrome控制臺把num1的值從1變成2,再看看sum的結果會是多少?
3、methods 方法
顧名思義,在methods中,我們可以定義一些方法,共組件使用。
比如,我們定義一個數據a,當用戶點擊按鈕的時候,a的值加1。這種情況,我們可以利用methods來實現。
let vm = new Vue({
el: '#app',
data: {
a: 0
},
// methods方法
methods: {
plus() {
return this.a++
}
}
})
定義一個plus()的方法在methods中,下面我們把plus()綁定在按鈕的點擊事件上:
<div id="app">
{{ a }}
<button @click="plus"> +1 </button>
</div>
在Vue中通過@指令來綁定事件,@是v-on:的簡寫形式,以后都用@來綁定事件。當我們點擊按鈕時,methods中的方法plus()就會被調用,實現給a的加1的操作,并更新視圖。
4、watch 觀察
watch選項是Vue提供的用于檢測指定的數據發生改變的api。
上面點擊按鈕a的值加1的例子,不就是數據發生變化了嗎?我們就用watch選項來監聽數字a是否發生了變化,如果監聽到了變化,我們就在控制臺輸出以下a的最新值。
在上個例子的代碼基礎上,我們加上watch部分的代碼:
let vm = new Vue({
el: '#app',
data: {
a: 0
},
methods: {
plus() {
return this.a++
}
},
watch: {
a() {
console.log('發生了改變,最新值為:')
console.log(this.a)
}
}
})
最后一部分watch就是我們新加的代碼,a()表示我們要觀察監聽的就是數據a,我們看運行結果: