從壹開始先後端分離 [ Vue2.0+.NET Core2.1] 十八║Vue基礎: 指令(下)+計算屬性+watch

回顧

今天來晚辣，給公司作了一個小項目，一個瀑布流+動態視頻控制的DEMO，有須要的能夠聯繫我，公司的項目就不對外展現了（一個後端程序員真的要幹前端了哈哈哈）。

書接上文，昨天正式的開始了Vue的代碼的學習，簡單的經過一些假的數據來展現了下我的博客的首頁列表，不知道你們是否還記得昨天講的什麼，若是不太清楚呢，能夠再回顧下《從壹開始先後端分離 [ Vue2.0+.NET Core2.1] 十七 ║Vue基礎：使用Vue.js 來畫博客首頁（一）》，咱們主要說到了，Vue的核心語法是什麼，MVVM體如今哪些方面，如何簡單安裝Vue環境（經過直接引用Vue.js文件的形式），以及經常使用的十大指令的前五個，而且經過講解，我們作了一個小DEMO，就是一個我的的博客系統的首頁（這裏是盜取網友的一個樣式，由於我看着着實比較喜歡哈哈）。其實主要記住一點，用Vue這類MVVM框架開發，必定要擺脫以前的DOM操做的習慣，改爲操做數據來控制View，若是你Vue這一塊會的話，那學習微信小程序開發就是分分鐘的事兒，嗯~~~

關於後邊的實戰環節，我尚未肯定要用什麼樣式的博客，若是你們看到有好的，能夠留言下，我們以它爲基礎能夠擴展，若是不行的話，我就本身寫一個簡單的吧，固然仍是那句話，我只是一個拋磚引玉的做用，也給看到這篇文章的小夥伴們一丟丟的動力，這個時候要說下QQ羣裏的小夥伴，都已經開始用Vue，配合着前邊的教程和本身的.Net Core項目進行開發頁面了，我感受也是很開心的！至少能夠在平時的時間，一塊兒學點兒東西也是不錯的。雖然不能手把手吧，可是一些建議仍是儘可能給提問題的小夥伴的。哈哈，{{ 強硬收回話題 }}，今天咱們接着上一篇的內容，繼續往下走，主要是：把 基本指令 介紹完，說下計算屬性和偵聽器，Class 與 Style 綁定，主要是這三部分，在博客頁面上設計 添加文章，刪除文章，篩選文章等功能。

 

零、今天完成左下角淺藍色的部分

 

 

 

1、VUE 經常使用的一些指令總結 （ 下 ）

一、v-once 指令 —— 禁止修改

看名字就能夠知道，這個是 一次 的意思，也就是說在第一次渲染之後，後期的不管數據的如何修改都不會影響該節點，只渲染元素和組件一次。隨後的從新渲染，元素/組件及其全部的子節點將被視爲靜態內容並跳過。這能夠用於優化更新性能。

注意：可是，我想說的是，這個指令通常狀況不要使用，除非是含有大量的靜態數據，不想每次加載的時候佔用時間，若是過多的使用該指令會出現不少意想不到的問題，由於數據的不刷新，不適合剛入門的小夥伴使用。

 

二、v-bind （ : ）指令 —— 動態屬性

 在昨天的博客首頁的聯繫中，咱們其實已經用到了這個指令，你們應該沒有注意到，就是文章列表陪着 href 屬性的時候。

　　v-bind 指令的做用和用法，它用於動態綁定DOM元素的屬性，比較常見的好比：<a>標籤的href屬性，<img>標籤的src屬性。

 　　　　　　<ul class="post-list non-style-list">

                <li v-for='item in list' class="post-list-item">
                    <!--這裏用到了 v-bind 指令-->
                    <a v-bind:href="'https://www.cnblogs.com/laozhang-is-phi/p/'+ item.id +'.html'">{{item.name}}</a>
                    <!--還能夠這樣寫 這裏的linkUrl 是一個變量-->
                    <a :href="linkUrl">{{item.name}}</a>
                    <span class="post-list-date">({{item.date}})</span>
                </li>
            </ul>

 

還能夠：動態地綁定一個或多個特性，或一個組件 prop 到表達式（這裏要記得，是動態的綁定，就是指在特性中存在變量）。

<!-- 綁定一個有屬性的對象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 經過 prop 修飾符綁定 DOM 屬性 -->
<div v-bind:text-content.prop="text"></div>

 

 

三、v-on （ @ ）指令——事件觸發

綁定事件監聽器。事件類型由參數指定。表達式能夠是一個方法的名字或一個內聯語句，若是沒有修飾符也能夠省略。

用在普通元素上時，只能監聽原生 DOM 事件。用在自定義元素組件上時，也能夠監聽子組件觸發的自定義事件。至關於綁定事件的監聽器，綁定的事件觸發了，能夠指定事件的處理函數。

咱們能夠簡單說個栗子，在咱們的博客首頁的頭像上，增長一個點擊事件（就是以前的click事件），

// 注意這個alert是我本身寫的方法，讀者能夠自行看文末個人在GitHub上的demo 
<div  v-on:click="alert('我是老張的哲學的頭像')">  </div>
//注意 v-on: 能夠用@代替，好比
//<div  @click="alert('我是老張的哲學的頭像')">  </div>

 

 

在咱們的頁面裏，咱們能夠用來觸發：添加、篩選功能

a、新建一個 input 標籤，添加一個 回車 事件

<input @keydown.enter="addArticle" type="text" class="edit" placeholder="按回車添加文章">

 

b、在 vue 實例的 methods 中，統一添加咱們的 addArticle 方法。

            //咱們的方法都統一寫到這裏
            methods: {
                //添加事件
                addArticle: function () {
                    //將文章存入list數組，注意 this指向！
                    //將數據反轉
                    this.list = this.list.reverse();
                    this.list.push(this.task);
                    this.list = this.list.reverse();
                    //存入list[]後，重置task
                    this.task = {
                        name: '',//內容爲空
                        id: 1000,
                        date: " Just Now ",
                        finished: false,//未完成
                        deleted: false//未刪除
                    }
                }
            },

 

c、這個時候，差最後一步，就是獲取 input 的指（這個時候可千萬不要再像之前那樣，根據id來獲取結果了）

還記得我們前幾章將基本語法和Vue的核心功能的時候，說到了其中的一個很大的特性就是數據驅動 —— 雙向數據綁定，不只咱們能夠給 Data 賦值，還能夠經過在 DOM 操做的時候，將指獲取到 Data，沒錯就是下邊的這個指令，v-model。 

此外，還有其餘的一些用到的指令

 

 

 

四、v-model 指令 —— 雙向數據綁定

 這是一個我認爲很重要，也是常用到的指令，主要是表單操做，它能夠很容易的實現表單控件和數據的雙向綁定，相對之前的手動更新DOM，這個上邊也說到了。

在以前的 input 輸入框中，添加 v-model 指令

<input @keydown.enter="addArticle" type="text" class="edit" v-model="task.name" placeholder="按回車添加文章">

這個時候，咱們的博客添加的功能就行了（固然如今是最低端最low的，只是爲了講解 v-model 指令用，博客添加到時候會用 express 後臺管理）。

 

好啦，經常使用的 vue 指令已經講解完成，還有其餘的一些不經常使用的幾個你們能夠用到的時候瞭解下。

 

2、計算屬性 Computed

一、計算屬性的原理

在模板內使用表達式很便利，可是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板太重且難以維護。例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在這個地方，模板再也不是簡單的聲明式邏輯。你必須看一段時間才能意識到，這裏是想要顯示變量 message 的翻轉字符串。當你想要在模板中屢次引用此處的翻轉字符串時，就會更加難以處理，而後若是大量的使用這樣的表達式，會使得整個頁面不只很差看，還很繁重。

因此，對於任何複雜邏輯，你都應當使用計算屬性。

就好比上邊的栗子，咱們就能夠寫成這樣：

<div id="example">
    //一、這裏是咱們在 computed中定義的值，而不是在data中
  <p>message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // 注意 ！`this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  }
})

這樣看起來就清晰明瞭，減輕頁面的負重。這裏你可能會好奇，這就像一個data的中間件同樣，不用作任何的其餘操做，均可以實現這個邏輯，就好像data的影子同樣，沒錯！計算屬性就是一個getter器。

你能夠像綁定普通屬性同樣在模板中綁定計算屬性。Vue 知道 vm.reversedMessage 依賴於 vm.message，所以當 vm.message 發生改變時，全部依賴 vm.reversedMessage 的綁定也會更新。並且最妙的是咱們已經以聲明的方式建立了這種依賴關係：計算屬性的 getter 函數是沒有反作用 (side effect) 的，這使它更易於測試和理解。

 

二、知道了他的原理和如何使用，那麼咱們就能夠在咱們的項目中使用 計算屬性 來達到咱們的動態查詢文章的功能

 咱們首先添加一個計算屬性來過濾咱們的文章list數據

            //經過計算屬性過濾數據
            computed: {
                listSearch: function () {
                    //爲何要存這個this呢，由於filter過濾器會改變this的指向
                    let that = this;
                    return this.list.filter(function (item) {
                        //簡單的 判斷文章name是否包含 input中的值，由於雙向綁定，因此也就是 task.name
                        return item.name.indexOf(that.$data.task.name) >= 0;
                    });
                }
            }

接下來，咱們就須要把咱們的計算屬性 listSearch 替換掉view中的 list，從而達到過濾：

 <li v-for='item in listSearch' class="post-list-item">
      <span class="post-list-date">({{item.date}})</span>
  </li>

最後咱們能夠看看效果：

 

注意：計算屬性默認只有 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]
    }
  }
}

如今再運行 vm.fullName = '老張 哲學' 時，setter 會被調用，vm.firstName 和 vm.lastName 也會相應地被更新。

 

3、偵聽器 （不建議多使用）

雖然計算屬性在大多數狀況下更合適，但有時也須要一個自定義的偵聽器。這就是爲何 Vue 經過 watch 選項提供了一個更通用的方法，來響應數據的變化。當須要在數據變化時執行異步或開銷較大的操做時，這個方式是最有用的（這個要強調，是異步操做，或者開銷較大的操做）。

在這裏，咱們監聽下咱們的 input 輸入的數據變化，也就是 task.name 的值

通常的寫法是這樣的：(這是監聽單一屬性)

new Vue({
  data: {
   author: "老張的哲學",
    task: {
                    name: '',//內容爲空
                    id: 100,
                    date: " Just Now ",
                    finished: false,//未完成
                    deleted: false//未刪除
                },
  },
  watch: {
    author: function (newval, oldVal) {
      console.log("author 變化辣，")
    }
  }
})

 

注意：vm.author 和 vm._data.author 是同樣的。

 

 

 

可是在咱們的栗子中，是監聽一個對象的中某個屬性，也就是 task.name，

因此咱們就會這麼寫：

 watch: {
     task.name() {
         //這裏面能夠執行一旦監聽的值發生變化你想作的操做

     }
 },

可是，這樣寫是不符合規則的，必須是一個變量，所以會報錯：

一、這裏提供兩個方法：第一個深度監聽，第二個配合計算屬性監聽

 首先先說下深度監聽：

若是咱們要監聽 task 對象屬性變化的話——好比：應用場景是，若是咱們是異步獲取數據的，這個時候就能夠監聽是否獲取到了值。能夠在通常方法上，直接加上 deep：true

vm=new Vue({
  data: {
   author: "老張的哲學",
    task: {
                    name: '',//內容爲空
                    id: 100,
                    date: " Just Now ",
                    finished: false,//未完成
                    deleted: false//未刪除
                },
  },
  watch: {
    author: function (newval, oldVal) {
      console.log(`author 變化辣，從 ${oldVal} 變成了 ${newval} `)
    },
    task:{
      handler:(Value) =>{
       console.log(`task被修改了${Value.name}`);
    },
   deep:true //表示監視對象的屬性變化
   }
  }
})    

---

 

注意：vm.task.name 和 vm._data.task.name 是同樣的。

 

 

 

二、經過計算屬性監聽

因此咱們就須要仍是用到 計算屬性來定義，還記得計算屬性是幹什麼的麼，它就像一個數據的中間件，把原始數據再封裝一下，

那正好，咱們能夠把 task.name 給封裝下，最終會是這樣的：

vm=new Vue({
  data: {
   author: "老張的哲學",
    task: {
            name: '',//內容爲空
            id: 100,
            date: " Just Now ",
            finished: false,//未完成
            deleted: false//未刪除
          },
  },
  watch: {
    author: function (newval, oldVal) {
      console.log("author 變化辣，")
    },
    nameCpt: function (newval, oldVal) {
      console.log("task.name 變化辣，")
    },

  },
 //經過計算屬性來操做咱們須要用到的任何數據
  computed: {
      nameCpt() {
           return this.task.name
      }
  }
})

 

三、固然watch 也能夠寫在全局的

vm.$watch('author',function(newValue,oldValue){
    console.log('author被修改了,'newValue,oldValue)
})

 

注意：雖然Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變更：偵聽屬性。可是監聽是特別浪費資源的，當咱們有一些數據須要隨着其它數據變更而變更時，咱們很容易濫用 watch，所以一般更好的作法是使用計算屬性而不是命令式的 watch 回調。

 

4、匆匆結語

今天時間晚了些，動態Class 與 Style 綁定沒有說到，那咱們就下次再說吧！今天呢，咱們主要說了經常使用的指令，主要的是 v-model、v-bind、v-on三個指令，而後還說了計算屬性和偵聽器，我在開發的過程當中，計算屬性是使用較多的，可是某些時候，watch 偵聽器會發揮不同的做用！好啦，下次我們繼續說說 動態Class 與 Style 綁定 和 很重要的 生命週期講解 吧。

 

5、CODE

https://github.com/anjoy8/Blog.Vue/tree/master/Demo/Vue_17