Vue-Directives

• 基本指令

1. v-cloak
2. v-once

• 條件渲染指令

1. v-if(v-else)
2. v-show

• 列表渲染指令

1. v-for

• 數組更新檢測
• 方法與事件
• v-model（表單）

 

 

1、基本指令

v-cloak

做用：解決初始化慢致使的頁面閃動，常與display：none結合使用

*加載緩慢的狀況下，頁面會出現如{{msg}}，加載完以後纔會顯示對應的內容，影響用戶體驗。v-cloak解決了這個問題。

 

v-once

做用：定義它的元素只能渲染一次，後續都不會再渲染

 

例：

<style>
  [v-cloak]: {
    display: none
  }

</style>

<div id="app">
  <div v-cloak>{{msg}}</div>
  <span v-once>{{word}}</span>
  <hr>
  <button @click='changeEnglish'>點擊修改</button>
</div>

new Vue({
  el: '#app',
  data: {
    msg: '今天週一',
    word: 'Today is Monday.'
  },
  methods: {
    changeEnglish() {
      this.msg = '今天週二' //中文修改
      this.word = 'Today is Tuesday' //v-once 使得英文不會被修改
    }
  }
})

 

2、條件渲染指令

v-if（v-else）

v-if後面接的是等號，等號後面接的是布爾值；if true顯示if後面的內容，if false顯示else後面的額內容。

• 真正的渲染
• v-else須要緊跟在v-if後面
• v-else-if（vue.2.1.0新增）
• key管理可複用的元素（key惟一，提供key值來決定是否複用該元素）

 

例：點擊按鈕，用戶、密碼框切換

<div id="app">
  <template v-if="ok === 'you'">
    用戶名：<input type="text" value="請輸入用戶名" key="userName">
  </template>
  <template v-else>
    密碼：<input type="password" value="" key="userPass">
  </template>
  <button @click='clickChange()'>點擊切換</button>
</div>

new Vue({
  el: '#app',
  data: {
    ok: 'you'
  },
  methods: {
    clickChange() {
      if (this.ok === 'you') {
        this.ok = ''
      } else {
        this.ok = 'you'
      }
    }
  }
})

這裏若是不加key，會有bug

*用v-for更新已渲染過的列表時，它默認採用的是「就地複用」的原則，也就是若是數據項順序發生了改變，vue將不是移動DOM元素來匹配數據項的順序，而是簡單複用此處的元素。

*若是想跟蹤每一個節點的身份，從而重用或從新排列現有元素，可以使用key。

*在表單或者選框中，加上key，可使得原先填寫的內容或勾選的選項，雖有順序或切換的變化,可是原先填寫的內容或勾選處始終跟着原來對應的項。

 

v-show

• 簡單的切換display屬性
• v-show=‘條件’  當條件爲true時，則內容顯現
• v-show不支持template語法
• v-show不支持v-else

<span v-show='3>1'>{{num}}</span>

 

總結：

v-if

• 當條件不成立時，不會渲染
• 切換開銷較大，適合不太變化的場景
• 實時渲染：頁面顯示，元素渲染；不顯示，元素移除（切換用戶、密碼的例子能夠看出，當從用戶切換到密碼時，頁面中用戶代碼會被移除）

v-show

• 不管成不成立都會渲染
• 首次渲染開銷較大，但切換開銷較小，所以適合常常變化的場景
• 只是改變了display的屬性，元素會一直在頁面中

應用：

• 渲染的結果根據時間而變化，推薦v-if
• 頻繁切換頁面推薦v-show

 

3、列表渲染指令

v-for

應用：

• 當須要將一個數組遍歷或枚舉一個對象屬性的時候循環顯示時，就會用列表渲染指定v-for。

• v-for寫在要遍歷的元素上

 

兩種使用場景：

• 遍歷多個對象

遍歷多個對象，遍歷的必定是數組

這裏的fruit值的是  {name:'banana'} ...

<div id="app">
  <ul>
    <li v-for='fruit in fruits'>{{fruit.name}}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
   fruits:[
   {name:'banana'},
   {name:'apple'},
   {name:'orange'}
   ]
  }
})

 

帶索引的寫法

<div id="app">
  <ul>
    <li v-for='(fruit,index) in fruits'>{{index}}---{{fruit.name}}</li>
  </ul>
</div>

 

• 遍歷一個對象的多個屬性

<div id="app">
  <ul>
    <li v-for='value in fruits'>{{value}}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
   fruits:{
   a:'banana',
   b:'apple',
   c:'orange'
   }
  }
})

 

帶value key index的寫法（v--k--i   順序不可變）

<div id="app">
  <ul>
    <li v-for='(value,key,index) in fruits'>第{{index}}個是{{value}}，鍵是{{key}}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
   fruits:{
   a:'banana',
   b:'apple',
   c:'orange'
   }
  }
})

 

4、數組更新檢測

<div id="app">
  <div v-for="fruit in arr">{{fruit}}</div>
</div>

new Vue({
  el: '#app',
  data: {
    arr: ['apple', 'banana', 'orange']
  }
})

如下代碼均在此代碼基礎上修改

 

• 變異方法

.push()　　往數組的末尾添加一個元素，返回的是添加完元素後整個數組的長度

.pop()　　將數組的最後一個元素刪除，返回的是刪除的那個元素

.shift()　　將數組的第一個元素刪除，返回的是那個刪除的元素

.unshift()　　在數組的第一個元素位置添加一個元素，返回的是添加完元素後整個數組的長度

.splice()　　

含三個參數：

第一個參數表示開始操做的位置（索引）

第二個參數表示要操做的長度

第三個參數表示可選參數（能夠添加一個元素，可是這個元素會自動跳到數組索引爲0的位置上）

.sort()　　給數組排序

.reverse()　　翻轉數組

<div id="app">
  <div v-for="fruit in arr">{{fruit}}</div>
  <button @click='num1'>點擊排序</button>
  <button @click='num2'>點擊翻轉</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    arr: ['apple', 'banana', 'pizza'],
  },
  methods: {
    num1(a, b) {
      this.arr.sort((a, b) => {
        return a.length - b.length
      })
    },
    num2(){
    this.arr.reverse()
    }
  }
})

 

• 修改數組的某一項內容

Vue.set(該數組，要修改的那一項的索引，替換的內容)

Vue.set(app.arr,1,"mango")

 

• 修改數組的長度

.splice(索引) 從哪一項開始刪除後面的內容，包括這一項

app.arr.splice(1) //["banana","pizza"] 頁面上還有apple 

 

• 重塑數組（不會改變原來的數組，而是返回一個新的數組）

.filter（）過濾

{{matchpp}}

computed: {
    matchpp() {
      return this.arr.filter(function(pro) {
        return pro.match(/pp/)
      })
    }
  }

 

.concat()  合併

......
matchpp() {
      return this.arr.concat('water','juice') 
　　　　//[ "apple", "banana", "pizza", "water", "juice" ]
    }
......

 

.slice(開始索引，結束索引)  返回選定的元素

......
matchpp() {
      return this.arr.slice(1,2) //[ "banana" ]
    }
......

 

5、方法與事件

例：點擊按鈕數字加1

<div id="app">
  {{count}}
  <button @click='add1(1)'>點擊加1</button>
</div>

new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    add1() {
      this.count += 1
    }
  },
  // addNum(count) {
  // count = count || 1
  // this.count += count
  // }
})

*若是方法中帶有參數，可是調用時沒有加括號，默認傳原生事件對象event

 

修飾符

.stop

阻止單擊事件向上冒泡

<div id='app'>
  <div @click='divClick' style='width:100px;height:100px;background:skyblue'>
    <button @click.stop='btnClick'>點擊</button>
  </div>
</div>

new Vue({
  el: '#app',
  methods: {
    divClick() {
      alert('div被點擊了')
    },
    btnClick() {
      alert('btn被點擊了')
    }
  }
})

 

.prevent

提交事件而且不重載頁面

<div id='app'>
  <form action="" @submit.prevent='hangle'>
    <button type='submit'>提交</button>
  </form>
</div>

new Vue({
  el: '#app',
  methods: {
    hangle() {
      alert('sub提交')
    }
  }
})

 

.self

只是做用在元素自己而非子元素的時候調用

<div id='app'>
  <div @click.self='divClick' style='width:100px;height:100px;background:skyblue'>
    <button @click='btnClick'>點擊</button>
  </div>
</div>

 

.once

只執行一次

<button @click.once='aaa'>這個按鈕只能執行一次哦</button>

 

能夠監聽鍵盤事件：

<input @keyup.13 = 'submitMe'>
<input @keyup.enter = 'submitMe'>

submitMe(){
    alert('enter被按了')
    }

*vue提供了一些如enter，能夠直接使用

 

6、表單與v-model

v-model

v-model做用：用於表單類元素上的雙向綁定事件

v-model默認作了兩件事

<input type="text" v-model="message"/>
//至關於
<input typt="text" :value="message" @input="message = $event">

 

• input框、textarea

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


new Vue({
el:'#app',
data:{
msg:''
}
})

 

*所顯示的值只依賴於所綁定的數據，再也不關心初始化時插入的value

 

• 單選框

單個單選框，v-bind綁定布爾值（v-model不生效）

多個單選框，使用v-model配合value使用，綁定選中的單選框的value值，綁定的初始值能夠隨意給

<div id='app'>
  蘋果<input type="radio" name="checks" value="蘋果" v-model="checkname"> <br>
  香蕉<input type="radio" name="checks" value="香蕉" v-model="checkname"> <br>
  橘子<input type="radio" name="checks" value="橘子" v-model="checkname"> <br>
  如今選中的是---{{checkname}}
</div>


new Vue({
  el: '#app',
  data: {
   checkname:''
  }
})

 

• 複選框

單個複選框

v-bind v-model 都可使用

 v-bind單個複選框 <input type="checkbox" v-bind:checked = 'onCheck1'> <br>
 v-model單個複選框 <input type="checkbox" v-model='onCkeck1'>


new Vue({
  el: '#app',
  data: {
   onCheck1:true
  }
})

 

多個複選框

使用v-model，綁定一個數組

若是綁定的是字符串，則會轉化爲true，false，與全部綁定的複選框的checked屬性相對應

蘋果 <input type="checkbox" value='蘋果' v-model='onCheck2'>
香蕉 <input type="checkbox" value='香蕉' v-model='onCheck2'>
橘子 <input type="checkbox" value='橘子' v-model='onCheck2'>
{{onCheck2}}


new Vue({
  el: '#app',
  data: {
   onCheck2:[]
  }
})

 

• 下拉框

v-model必定是綁定在select上

 

單選下拉框

<select v-model="sele">
    <option value="蘋果">蘋果</option>
    <option value="香蕉">香蕉</option>
    <option value="橘子">橘子</option>
  </select>
  {{sele}}


new Vue({
  el: '#app',
  data: {
    sele: [] //sele:''
  }
})

 

多選下拉框

按住ctrl鍵選擇

<select v-model="sele" multiple>
   <option value="蘋果">蘋果</option>
   <option value="香蕉">香蕉</option>
   <option value="橘子">橘子</option>
</select>
{{sele}}


new Vue({
  el: '#app',
  data: {
    sele: []
  }
})

 

總結

若是是單選，初始化給定字符串，由於v-model此時綁定的是字符串或者布爾值。

若是是多選，初始化給定一個數組。

 

綁定值

單選按鈕

只要給單選按鈕v-bind一個value值，此時v-model綁定的就是這個value值

<div id="app">
  一個單選框<input type="radio" v-model='picked' v-bind:value='value'> <br>
  picked---{{picked}}
  value---{{value}}
</div>


new Vue({
  el: '#app',
  data: {
    picked: true,
    value: '111'
  }
})

 

複選框

要求：選中和不選中的value不同

<div id="app">
  複選框 <br>
  <input type="checkbox" v-model='toggle' :true-value='value1' :false-value='value2'> <br>
  {{toggle == value1}} -- {{value1}}<br>
  {{toggle == value2}} -- {{value2}}
</div>


new Vue({
  el: '#app',
  data: {
    toggle: true,
    value1: '被選中',
    value2: '未被選中'
  }
})

 

下拉框

在select標籤上綁定value值對option沒有影響；

在option標籤上綁定value值，v-model綁定的就是這個value的值。

 

修飾符

.lazy

v-model默認是在input輸入時實時同步輸入框的數據

.lazy可使其在失去焦點或者敲回車鍵以後再更新

<div id="app">
 <input type="text" v-model='changeSth'> {{changeSth}}
 <input type="text" v-model.lazy='lazySth'> {{lazySth}}
</div>


new Vue({
  el: '#app',
  data: {
  changeSth:'',
  lazySth:''
  }
})

 

.number

輸入的內容，只要都是數字內容則實時轉化爲數字類型

<div id="app">
 <input type="text" v-model.number='isNum'> <br>
 {{isNum}}---{{typeof isNum}}
</div>


new Vue({
  el: '#app',
  data: {
  isNum:''
  }
})

 

.trim

過濾輸入框中的首尾空格

<div id="app">
 <input type="text" v-model.trim='trimStr'> <br>
 {{trimStr.split('').length}}
</div>


new Vue({
  el: '#app',
  data: {
  trimStr:''
  }
})

 

自定義指令

• 全局自定義指令

<div id="app">
        獲取焦點：<input type="text" v-focus>
</div>

<script>
  Vue.directive('focus',{
        inserted(el){
             el.focus()
         }
      })
   new Vue({
       el: '#app'
   })
</script>

 

• 局部自定義指令

new Vue({
  el: '#app',
  directives: {
    focus: {
      inserted(el) {
        el.focus()
      }
    }
  }
})