04、定義一個Vue實例的4個常用選項

創建一個Vue實例僅需4步,如下所示:


創建Vue實例.png

我們知道,定義一個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>

利用上節講到的雙大括號{{ }}渲染出來,很簡單。如下圖所示:


效果圖.png

然而當需求突然改變了,我們不能把小數展示出來,需要把小數轉換成整數再顯示。
這個時候,我們需要把三個小數經過過濾處理后再展示,不能直接展示。這種情況就需要用到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)方法進行運算,并返回一個整數。
我們運行后得到的結果:


過濾后的效果.png

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。


計算結果.png

需要注意的是,sum的值是依賴data中的數據num1,num2,num3的值,一旦它們發送了變化,sum的值也會自動更新。
我們試一下,通過chrome控制臺把num1的值從1變成2,再看看sum的結果會是多少?


效果圖.png

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,我們看運行結果:


效果圖.png
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Vue實例的參數有el(指定掛載的DOM元素),data(實例的數據),還可以定義其他參數;vue實例會用到的4個...
    hiddensmile閱讀 1,328評論 0 2
  • 0.linux啟動的步驟 設備加電----》BIOS自檢-----》grub引導啟動-----》加載內核----》...
    萌面大叔2閱讀 791評論 0 1
  • 11js關系運算符 <!DOCTYPE html> 11js關系運算符 /*關系運算符存在的意義:1、默認情況下,...
    ouyangqinbin閱讀 354評論 0 0
  • import Foundation print("1","2","3","4"); //輸出多個字符串,并用“**...
    風的低語閱讀 479評論 0 0
  • 渲染: 1 當前屏幕渲染:在GPU的當前屏幕緩沖區中進行的渲染 2 離屏渲染:在GPU當前屏幕緩沖區外另建緩沖區渲...
    adrian920閱讀 400評論 0 0