Vue指令

內容處理

• v-once
• v-text
• v-html

v-once : 使元素內部的插值表達式只生效一次

<div id="app">
  <p v-once> {{xxxxx}} </p>
</div>

---

v-text : 元素內容總體替換爲指定純文本數據

• 與插值表達式區別：插值表達式是用來進行元素動態設置的，v-text是直接將 純文本內容 設置爲 指定數據，會覆蓋老元素

• 只會顯示純文本，添加標籤元素，也不會生成標籤元素

  <div id="app">
  <p v-text="content"> 這段內容會被覆蓋 </p>
  </div>

  new Vue({
  el:"#app",
  data:{
    content:"我是新內容" // 純文本
  
    content:"<span> span內容 </span>" // 非純文本 不會生成span標籤
  }
  })

  ---

  v-html ：元素內容總體替換爲指定的HTML文本

• 相似於v-text，可是非純文本能夠轉換成對應元素

  <div id="app">
  <p v-html="content"> 這段內容會被覆蓋 </p>
  </div>

  new Vue({
  el:"#app",
  data:{
    content:"我是新內容" // 純文本 ok
  
    content:"<span> span內容 </span>" // 非純文本 生成span標籤
  }
  })

屬性綁定

v-bind指令：v-bind指令用於動態綁定HTML屬性

• Class綁定
• Style綁定

內容綁定方法只能處理內容，若是對標籤屬性進行處理，經過綁定屬性

<div id="app">
  <p v-bind:title ="content_title"> 內容 </p>
  <p :title ="content_title"> 內容 </p>  // 簡寫
</div>

new Vue({
  el:"#app",
  data:{
    content_title :"我是title屬性內容",
    demo:"hello"
  }
})

• v-bind容許使用表達式 , 與插值表達式相似

• 不容許使用語句內容 <p :class ="var num = 10"> , error

  <div id="app">
  <p :class ="'demo'+3"> 內容 </p> // ok
  </div>

• 若是須要一次綁定多個屬性，還能夠綁定對象。

  <div id="#app">
  <p v-bind="attrObj"> 內容 </p>
  </div>

  new Vue({
  el:"#app",
  data:{
    attrObj:{
  
      id :"box", // id屬性
  
      title :"我是title", // title屬性
  
      class :"clsbox", // class屬性
  
      'data-title':"這是內容" // 自定義屬性
    }
  }
  })

  ---

  Class綁定

• class是HTML屬性，能夠經過v-bind進行綁定，而且能夠與class屬性共存

  <div id="app">
  <p class="a" :class= "clsbox"> 內容 </p>
  </div>

  new Vue({
  el:"#app",
  data:{
    clsbox:"x" // 此時添加了兩個class 一個 "a" 一個 "x", clsbox是動態綁定的
  }
  })

  注意事項

• 元素多個動態類名的綁定的錯誤寫法

  <p class="a" :class= "clsbox clsbox1 clsbox2"> 內容 </p>  // error
  
  <p class="a" :class= "clsbox"> 內容 </p>  // ok

  new Vue({
  el:"#app",
  data:{
    clsbox:"x y z" // 多動態名稱 不經常使用
  
    // clsbox1:"y"
    // clsbox2:"z"
  }
  })

• 三元運算動態添加 class

  <p class="a" :class= "bol ? clsbox1 : clsbox2"> 內容 </p>  // ok

  new Vue({
  el:"#app",
  data:{
    bol:true,
    clsbox1:"y",
    clsbox2:"z"
  }
  })

• 若是類名既有條件判斷，又同時存在多個類名，組合則寫法比較複雜。對於class綁定，Vue.js中還提供了特殊處理方式。

• 對象表示法，鍵表示類名，值表示鍵是否生效。對於帶橫線類名用引號包裹

  <p :class= "{ b:isB, c:isC, 'class-d':true }"> 內容 </p>

  new Vue({
  el:"#app",
  data:{
    isB:true,
    isC:false
  }
  })

• 數組表示法，對 對象表示法 的擴展

  <p :class= "['a',{ b:isB, 'class-d':true }, c]"> 內容 </p>

  new Vue({
  el:"#app",
  data:{
    isB:false,   // 此時有 a class-d z 三個屬性
    c:"z"
  }
  })

  ---

  Style綁定

• style是HTML屬性，能夠經過v-bind進行綁定，而且能夠與style屬性共存。
• 不建議寫在行內很差維護，建議從 data 中獲取 , 注意要加單位px等。

• 相同屬性，框架會優先取 綁定的屬性的值

  <p style="width=50px;" :style= "styleObj"> 內容 </p>

  new Vue({
  el:"#app",
  data:{
    styleObj:{
      width:'100px',  // 覆蓋以前設置的 50px width
      height:'100px',
      border:'1px solid #ccc',
      backgroundColor:'red', // 駝峯
      'font-size':'30px' // 非駝峯
    }
  }
  })

• 當咱們但願給元素綁定多個樣式對象時，能夠設置爲數組

  <p :style= "[styleObj1 , styleObj2]"> 內容 </p>

  new Vue({
  el:"#app",
  data:{
    styleObj1:{ ... },
    styleObj2:{ ... }
  }
  })

  經常使用於公共樣式和單獨樣式的組合

渲染指令

• v-for
• v-show
• v-if

v-for指令

• 用於遍歷數據渲染結構，經常使用的數組與對象都可遍歷。
• 哪一個元素要屢次建立，將指令添加到哪一個元素

• 遍歷時的參數： index爲索引,key爲鍵

  <div id="app">
  <ul>
    <li v-for="(item,index) in arr">{{ item }}</li> // 數組
  </ul>
  
  <ul>
    <li v-for="(val,key,index) in obj">{{ val }}</li> // 對象
  </ul>
  </div>

  new Vue({
  el:"#app",
  data:{
    arr:["1","asd",2],
    obj:{ 
      content1:"內1",
      content2:"內2"
    }
  }
  })

• 數值遍歷 : 適用於沒有基礎數據，憑空建立 數值個 元素

<div id="app">
  <ul>
    <li v-for="(item,index) in 5">{{ item }}</li>  // 1,2,3,4,5
  </ul>
</div>

注意事項

• 使用v-for的同時，應始終指定惟一的 key屬性
• key屬性是經過 v-bind 綁定的一個屬性，是標識 每項的 惟一值
• for循環中 index下標 沒法做爲 key，若是屬性值也不惟一（沒法做爲key）。能夠把數據改爲對象，添加惟一key屬性

• 爲何會要添加key?

  • vue.js 在進行結構渲染時，會爲了提升執行效率，對於結構一致的內容只進行修補操做，不會進行移除替換，所以用戶輸入的內容得以保留未被刪除。

如圖，初始時文本1->輸入框1，一一對應。當控制檯執行 vm.arr.reverse() 時

vue 修改而非替換的操做，會致使結構和內容不一致

正確寫法

<ul>
  <li v-for="item in items" :key="item.id">{{ item }}</li>
</ul>

---

• 經過<template>標籤設置模板佔位符，能夠將部分元素或內容做爲總體進行操做。
• template 不會生成標籤，只是佔位符，內部內容是個總體，能夠只對總體進行重複添加。
• 若是用div，會額外增長div標籤，可能並非咱們想要的結構。

• 因爲 template 自己不是元素，沒法綁定 key 屬性

  <div id="app">
  <template v-for="(item,index) in items">
    <span>{{ 標籤內容1 }}</span>
    <span>{{ 標籤內容2 }}</span>
  </template>
  </div>

  ---

  v-show指令

• 用於控制元素顯示與隱藏，適用於顯示隱藏頻繁切換時使用

• 經過display 控制元素顯示和隱藏

  <div id="app">
  <p v-show="true">這個元素顯示</p>
  <p v-show="false">這個元素隱藏</p>
  <p v-show="2>11">這個元素隱藏</p>
  <p v-show="bol">這個元素看bol值</p>
  </div>

  注意事項：

• template沒法使用 v-show 指令，不是元素

---

v-if指令

• 用於根據條件控制元素的建立與移除。

• 不適合頻繁的顯示隱藏，由於他是移除和建立，是消耗性能的操做

  <div id="app">
  <p v-if="false">這個元素不會建立</p>
  <p v-else-if="true">這個元素會建立</p>
  <p v-else-if="true">這個元素不會建立</p> // 上一個進了這個不會進
  <p v-else>這個元素不會建立</p>
  </div>

  注意事項：

• 給使用v-if 的同類型元素綁定不一樣的 key

如圖，添加了v-if 和 v-else

• 當bool=true時，代碼會運行至 v-if，此時給輸入框輸入123。
• 修改 bool，當bool=false時，代碼會執行v-else內的代碼，輸入框內的 123 也被第二個輸入框保留
• 這種代碼方式 應用於在用戶登錄時，使用帳號，手機號，郵箱等 , 樣式一致，可是不一樣功能元素切換登陸時，輸入框內判斷邏輯不一樣確定是不一樣的。
• 問題也發生在，vue對相同結構進行修補，而不是移除舊的，建立新的

正確作法，添加key綁定

<div id="app">
  <p v-if=" type === 'username' " :key="'username'">
    用戶輸入框： <input type="text">
  </p>
  <p v-else :key="'email'">
    郵箱輸入框： <input type="text">
  </p>
</div>

---

• 出於性能考慮，應避免將v-if 與v-for應用於同一標籤

例若有個列表，要經過指定數據 v-for 循環建立， 同時列表內每項的 建立和移除 還要取決於某個條件

v-for的優先級會更高，若是此時v-if=false，則v-for執行是毫無心義的，還會消耗沒必要要的性能

解決辦法，建立列表循環的v-for操做賦予子元素li，v-if條件判斷賦予父元素ul

此函數執行效率很低

<div id="app">
  <ul>
    <li v-if="false" v-for="item in items">{{ item }}</li>
  </ul>
</div>

new Vue({
  el:"#app",
  data:{
    items:{ 
      content1:"內1",
      content2:"內2",
      content3:"內3",
    }
  }
})

修改後

<div id="app">
  <ul v-if="false">   // 放到父元素,false時 內部的 v-for不會被執行
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

其餘修改方法，既然遍歷的循環對象有判斷，那麼咱們把判斷寫在方法內，即在遍歷前處理遍歷的數據

<div id="app">
  <ul>
    <li v-for="item in handleItems()">{{ item }}</li>
  </ul>
</div>

事件處理

• v-on

v-on指令

• 用於進行元素的事件綁定。
• 當事件處理程序較少時，能夠直接寫在行內，儘可能不要，很差維護

• 能夠指定 methods 函數 處理事件

  <div id="app">
  <p>{{ content }}</p>
  
  <button v-on:click=" content='新內容' ">按鈕</button>
  
  <button @click=" content='新內容' ">按鈕</button>   // 簡寫
  
  <button @click="fn">按鈕</button>   // methods 函數設置
  </div>

  new Vue({
  el:"#app",
  data:{
    content:"默認內容"
  },
  methods:{
    fn(){
      this.content='新內容'
    }
  }
  })

• 設置事件處理程序後，能夠從參數中接收事件對象 event。

  new Vue({
  el:"#app",
  data:{
    content:"默認內容"
  },
  methods:{
    fn(event){   // 接收事件對象
      console.log(event) 
    }
  }
  })

• 在 視圖中 能夠經過 $event 訪問事件對象。

• 當傳參時也想訪問event事件對象，能夠經過傳入 $event在 方法中獲取 event 對象

  <div id="app">
  <p>{{ content }}</p>
  
  <button @click="fn(content, $event)">按鈕</button> // 本身傳參也想訪問event事件對象時
  </div>

  new Vue({
  el:"#app",
  data:{
    content:"默認內容"
  },
  methods:{
    fn(content,event){
      console.log(content)
      console.log(event)
    }
  }
  })

  表單輸入綁定

• v-model

v-model指令

• 用於給可輸入元素 <input>、<textarea>及<select>元素設置雙向數據綁定。
• 當輸入框輸入時，依賴v-model的變量的元素都會動態改變
• v-model 不能使用表達式，若是要計算，能夠添加計算屬性雙向綁定

• v-model 實質就是 v-bind+v-on:input事件結合

  <div id="app">
  <p>{{ value }}</p>
  
  <input type="text" v-model="value">
  </div>

  new Vue({
  el:"#app",
  data:{
    value:""
  }
  })

  輸入框綁定

  輸入框分爲單行輸入框input與多行輸入框 textarea

  <div id="app">
  <p>{{ value1 }}</p>
  <input type="text" v-model="value1">
  
  <p>{{ value2 }}</p>
  <textarea v-model="value2"></textarea>
  </div>

  單選按鈕綁定

  單選按鈕的雙向數據綁定方式以下:

  <div id="app">
  <p>{{ value3 }}</p>
  
  <input type="radio" id="one" value="1" v-model="value3">
  <label for="one">選項一</label>
  
  <input type="radio" id="two" value="2" v-model="value3">
  <label for="two">選項二</label>
  </div>

  new Vue({
  el:"#app",
  data:{
    value3:""  // 選哪一個，哪一個input 的 value 就會賦給 value3
  }
  })

  複選框綁定

  複選框綁定分爲單個選項與多個選項兩種狀況，書寫方式不一樣

單個複選框應用，可勾可取消

<div id="app">
  <p>單複選框： {{ value4 }}</p>
  <input type="checkbox" id="item" value="內容" v-model="value4">
  <label for="item">選項</label>
  
  <p>多複選框： {{ value5 }}</p>
  <input type="checkbox" id="one" value="選項一內容" v-model="value5">
  <label for="one">選項一</label>
  <input type="checkbox" id="two" value="選項二內容" v-model="value5">
  <label for="two">選項二</label>
</div>

單複選和多複選區別在於

• 點擊單複選時，返回true / false表示是否勾選， value4值不會返回。可是value4依然要設置，若是處理做表單提交，提交的值是value4

• 多複選是個數組，存放每一個複選框的value5值，且value5值必須不一樣

  new Vue({
  el:"#app",
  data:{
    value4:"",  // 單複選
    value5:[] // 多複選
  }
  })

  選擇框綁定

  選擇框綁定分爲單選綁定與多選綁定兩種狀況，書寫方式不一樣。

  <div id="app">
  <p>單選select： {{ value6 }}</p>  // 顯示的是option的value值
  <select v-model="value6">   // v-model綁定給select
    <option value="">請選擇</option> // 默認選項，無實際意義
    <option value="1">選項一</option>
    <option value="2">選項二</option>
    <option value="3">選項三</option>
  </select>
  
  <p>多選select： {{ value7 }}</p>
  <select v-model="value7" multiple>
    <option value="1">選項一</option>
    <option value="2">選項二</option>
    <option value="3">選項三</option>
  </select>
  </div>

  var vm = new Vue({
  data:{
    value6:'',
    value7:[]
  },
  }).$mount("#app")

  按住ctrl進行多選

v-model 小結

• input輸入框:綁定字符串值。
• textarea輸入框:綁定字符串值。
• radio:綁定字符串值。
• checkbox:單個綁定布爾值，多個綁定數組。
• select:單選綁定字符串，多選綁定數組。