（二）vue基礎知識總彙

vue常用系統指令

1、插值表達式

2、v-text：可以将一段文本渲染到指定的元素中。

3、v-html：插值表達式和v-text會将資料解釋為純文字，而非html。為了輸出真正的html，需要使用v-html指令。

4、v-bind：可以給html元素或者元件動态綁定一個或者多個特性，例如：動态綁定style和class

5、v-for：循環

6、v-model：在表單控件或者元件上穿件雙向綁定。

v-model僅能在如下元素中使用：input、select、textarea、component（vue中的元件）

7、v-on：綁定時間監聽，表達式可以是一個方法的名字或一個内聯語句，如果沒有修飾符也可以省略，

用在普通的html元素上時，隻能監聽原生DOM事件。用在自定義元素元件上時，也可以監聽子元件觸發的自定義事件。

常用事件：

      v-on:click

      v-on:keydown

      v-on:keyup

      v-on:mousedown

      v-on:mouseover

      v-on:submit

      ....

按鍵修飾符：觸發想keydowm這樣的按鍵事件時，可以使用按鍵修飾符指定按下特殊的鍵後才觸發事件。

事件修飾符：

<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 送出事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 隻有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此處理，然後才交由内部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 隻當在 event.target 是目前元素自身時觸發處理函數 -->
<!-- 即事件不是從内部元素觸發的 -->
<div v-on:click.self="doThat">...</div>
           

用 

v-on:click.prevent.self

 會阻止所有的點選，而 

v-on:click.self.prevent

隻會阻止對元素自身的點選。

8、v-if：  1、作用：根據表達式的值的真假條件來決定是否渲染元素，如果條件為false不渲染（達到隐藏元素的目的），為true則渲染。在切換時元素及它的資料綁定被銷毀并重建。

v-show：根據表達式的真假值，切換元素的 display CSS 屬性，如果為false，則在元素上添加 display:none來隐藏元素，否則移除display:none實作顯示元素

v-if和v-show的總結：

      v-if和v-show 都能夠實作對一個元素的隐藏和顯示操作,但是v-if是将這個元素添加或者移除到dom中，而v-show

      是在這個元素上添加 style="display:none"和移除它來控制元素的顯示和隐藏的

9、v-cloak：v-cloak指令保持在元素上直到關聯執行個體結束編譯後自動移除，v-cloak和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隐藏未編譯的 Mustache 标簽直到執行個體準備完畢。

  通常用來防止{{}}表達式閃爍問題

<span v-cloak>{{msg}}</span>    

  new Vue({
      data:{
          msg:'hello ivan'
        }
  })
           

輸入框自動聚焦：（實作這個需求有三種方式）：

1、原生js操作DOM實作

可以使用document.getElementById()擷取到文本框元素對象後調用其focus()方法和設定style屬性。

// html代碼
  編号:<input type="text" v-model="product.id" id="id">

  // vue對象mounted(){}中代碼
  mounted(){
      document.getElementById('id').focus();
      document.getElementById('id').style="color:red";
  }
           

2、ref方式實作

可以在文本框元素上增加一個ref=“自定義名稱”，再使用this.$refs.自定義名稱.focus()和this.$refs.自定義名稱.style="color:red"設定style屬性。

// html代碼：
  編号:<input type="text" v-model="product.id" ref="id">

  // vue對象mounted(){}中代碼
  mounted(){
      this.$refs.id.focus();
      this.$refs.id.style="color:red";
    }
           

3、使用自定義指令

利用Vue.directive('指令id'，{inserted：function（el，binding）{}})

1、定義指令color
  Vue.directive('color',{
      inserted:function(el,binding){
        //将顔色設定給使用v-color指令的元素上
        el.style.color=binding.value;
      }
  });
           

過濾器

私有過濾器定義方式：new Vue（{filters：{ }}）中的filters中注冊一個私有過濾器。

全局過濾器定義方式：

Vue.filter('過濾器名稱'，function（管道符号|左邊參數的值，其他參數1，其他參數2，...）{

     return 對管道符号|左邊參數的值做處理以後的值

})

計算屬性：

計算屬性是基于它們的響應式依賴進行緩存的。隻在相關響應式依賴發生改變時它們才會重新求值。