本文小編為大家詳細介紹“Vue計算屬性、事件監(jiān)聽以及條件渲染實例分析”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“Vue計算屬性、事件監(jiān)聽以及條件渲染實例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

成都一家集口碑和實力的網(wǎng)站建設服務商，擁有專業(yè)的企業(yè)建站團隊和靠譜的建站技術(shù)，十余年企業(yè)及個人網(wǎng)站建設經(jīng)驗 ,為成都千余家客戶提供網(wǎng)頁設計制作,網(wǎng)站開發(fā),企業(yè)網(wǎng)站制作建設等服務,包括成都營銷型網(wǎng)站建設，品牌網(wǎng)站建設，同時也為不同行業(yè)的客戶提供成都網(wǎng)站建設、成都網(wǎng)站設計的服務,包括成都電商型網(wǎng)站制作建設,裝修行業(yè)網(wǎng)站制作建設，傳統(tǒng)機械行業(yè)網(wǎng)站建設,傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設。在成都做網(wǎng)站,選網(wǎng)站制作建設服務商就選創(chuàng)新互聯(lián)。

基礎語法

1、 插值（動態(tài)內(nèi)容）

Mustache語法(雙大括號)

將data中的文本數(shù)據(jù)，插入到HTML中，此時數(shù)據(jù)是響應式的。

Message: {{ msg }}
{{firstName}}{{lastName}}
{{firstName+lastName}}
{{firstName+""+lastName}}
//使用 JavaScript 表達式
 {{counter*2}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

指令

• v-once：執(zhí)行一次性地插值，當數(shù)據(jù)改變時，插值處的內(nèi)容不會更新

這個將不會改變: {{ msg }}

• v-html :解析html并展示

• v-text：渲染指定dom的內(nèi)容文本，類似Mustache，一般不用，不夠靈活，會覆蓋標簽內(nèi)所有內(nèi)容

• v-pre：原封不動展示標簽內(nèi)容，不進行解析

{{message}} 

結(jié)果：{{message}}

• v-cloak：解決vue解析卡頓會出現(xiàn){

  {}}閃爍的問題
  vue解析之前，p有屬性v-cloak，解析后沒有此屬性。
  所以 可以通過這個指令隱藏未編譯的 Mustache 標簽直到實例準備完畢

  {{message}}

2、綁定屬性（動態(tài)屬性）

v-bind用于綁定一個或多個屬性值，或者向另一個組件傳遞props值。簡寫為冒號:

1、元素的src和href

百度

2、class綁定

對象語法

我們可以傳給 v-bind:class 一個對象，以動態(tài)地切換 class

上面的語法表示 active 這個 class 存在與否將取決于數(shù)據(jù) property isActive 的 truthiness。
你可以在對象中傳入更多字段來動態(tài)切換多個 class。此外，v-bind:class 指令也可以與普通的 class attribute 共存。

data: {
  isActive: true,
  hasError: false}

結(jié)果渲染為：

當 isActive 或者 hasError 變化時，class 列表將相應地更新。例如，如果 hasError 的值為 true，class 列表將變?yōu)?"static active text-danger"。
綁定的數(shù)據(jù)對象不必內(nèi)聯(lián)定義在模板里，也可以定義在data

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

渲染的結(jié)果和上面一樣。我們也可以在這里綁定一個返回對象的計算屬性。

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

返回對象的方法

data: {
  isActive: true,
  error: null
},
methods: {
  IsActive() {
    return {
      active: this.isActive && !this.error,
      line:isLine
    }
  }
}

數(shù)組語法

我們可以把一個數(shù)組傳給 v-bind:class，以應用一個 class 列表：

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染為：

根據(jù)條件切換列表中的 class，可以用三元表達式：

這樣寫將始終添加 errorClass，但是只有在 isActive 是 truthy[1] 時才添加 activeClass。

不過，當有多個條件 class 時這樣寫有些繁瑣。所以在數(shù)組語法中也可以使用對象語法：

3、 style綁定內(nèi)聯(lián)樣式

對象語法
v-bind:style 的對象語法十分直觀——看著非常像 CSS，但其實是一個 JavaScript 對象。CSS property 名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名：

 data: {
  activeColor: 'red',
  fontSize: 30
}

直接綁定到一個樣式對象通常更好，這會讓模板更清晰：

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

同樣的，對象語法常常結(jié)合返回對象的計算屬性使用?；蛘叻椒?/p>

 //計算屬性
 //方法

數(shù)組語法

v-bind:style 的數(shù)組語法可以將多個樣式對象應用到同一個元素上：

3、計算屬性

在模板中放入太多的邏輯會讓模板過重且難以維護，需要對數(shù)據(jù)進行變化處理后再顯示

   {{ message.split('').reverse().join('') }} 

基礎例子

  
Original message: "{{ message }}"
  
Computed reversed message: "{{ reversedMessage }}"
 

結(jié)果：

Original message: “Hello”

Computed reversed message: “olleH”

這里我們聲明了一個計算屬性 reversedMessage。我們提供的函數(shù)將用作 property vm.reversedMessage 的 getter 函數(shù)：

console.log(vm.reversedMessage) // => 'olleH'vm.message = 'Goodbye'console.log(vm.reversedMessage) // => 'eybdooG'

你可以打開瀏覽器的控制臺，自行修改例子中的 vm。vm.reversedMessage 的值始終取決于 vm.message 的值。
你可以像綁定普通 property 一樣在模板中綁定計算屬性。Vue 知道 vm.reversedMessage 依賴于 vm.message，因此當 vm.message 發(fā)生改變時，所有依賴 vm.reversedMessage 的綁定也會更新。而且最妙的是我們已經(jīng)以聲明的方式創(chuàng)建了這種依賴關(guān)系：計算屬性的 getter 函數(shù)是沒有副作用 (side effect) 的，這使它更易于測試和理解。

計算屬性的 getter和setter

計算屬性默認只有 getter，是只讀屬性，不過在需要時你也可以提供一個 setter：

// ...computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }}// ...

現(xiàn)在再運行 vm.fullName = 'John Doe' 時，setter 會被調(diào)用，vm.firstName 和 vm.lastName 也會相應地被更新。

因為計算屬性一般沒有setter，所以簡寫為

 fullName:  function () {
      return this.firstName + ' ' + this.lastName }

計算屬性 vs 方法
通過在表達式中調(diào)用方法也能達到同樣的效果

Reversed message: "{{ reversedMessage() }}"
// 在組件中

兩種方式的最終結(jié)果確實是完全相同的。然而，不同的是計算屬性是基于它們的響應式依賴進行緩存的。只在相關(guān)響應式依賴發(fā)生改變時它們才會重新求值。這就意味著只要 message 還沒有發(fā)生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行函數(shù)。
這也同樣意味著下面的計算屬性將不再更新，相比之下，每當觸發(fā)重新渲染時，調(diào)用方法將總會再次執(zhí)行函數(shù)。

計算屬性 vs 偵聽屬性

Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數(shù)據(jù)變動：偵聽屬性。

{{ fullName }}

上面代碼是命令式且重復的。將它與計算屬性的版本進行比較：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName    }
  }})

計算屬性傳參

計算屬性本身是不能傳參的，但是可以通過閉包傳參，但是傳參之后沒有緩存機制了，和methods沒有什么區(qū)別，所以官網(wǎng)并沒有介紹這個

 computed: {
	  usertype(){
		  return function (value){
			  var user = ''
			  value === 1 ? user = '學生' : user = '老師'
			  return user		  }
	  }
  }

4、事件監(jiān)聽

基礎

可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運行一些 JavaScript 代碼。簡寫@click
許多事件處理邏輯會更為復雜，因此 v-on 還可以接收一個需要調(diào)用的方法名稱

    Add 1
     + 
     - 
    
The button above has been clicked {{ counter }} times.

參數(shù)問題(括號問題)

1、無參

Greet
Greet

2、有參

Greet 

Greet

只需要event對象時，

111

需要event對象，同時也需要其他對象時，可以用特殊變量 $event 把它傳入方法：

  Submit

幾種錯誤寫法

111
111

事件修飾符

在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在方法中輕松實現(xiàn)這點，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細節(jié)。

為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令后綴來表示的。

  




 



...