過濾器

Vue. 支持在｛｛｝｝插值的尾部添加一小管道符 “ | ” 對數(shù)據(jù)進行過濾贡避，經(jīng)常用于格 式化文本沼琉，比如字母全部大寫、貨幣千位使用逗號分隔等闪朱。過濾的規(guī)則是自定義 的， 通過給 Vue 實例添加選項 filters 來設(shè)置 過濾器：{{ data | filter1 |filter2}} {{date | formatDate(66,99)}} 中的第一個和第二個參數(shù)钻洒，分別對應(yīng)過濾器的第二個和 第三個參數(shù)

{{date | formatDate(66,99)}}

filters:{
            //這里的value就是需要過濾的數(shù)據(jù)
            formatDate: function(value,a,b){
                //將字符串轉(zhuǎn)化為date類型
                var date = new Date(value);
                var year = date.getFullYear();//年
                var month = plusDate(date.getMonth()+1);//月
                var day = plusDate(date.getDate());//日
                var hours = plusDate(date.getHours());
                var min = plusDate(date.getMinutes());
                var sec = plusDate(date.getSeconds());
            //將整理好的數(shù)據(jù)返回
            return year +'--'+month +'--'+day +'   '+hours+'--'+min+'--'+sec+a+b;
            }

注意 competed VS method的區(qū)別

1. 渲染方式奋姿、計算屬性依賴
2. 緩存

注意competed VS watch的區(qū)別

1. 異步和大量操作
2. 例如異步訪問api，debounce素标，設(shè)置中間狀態(tài)称诗。

Class與Style綁定

v-bind:class

1. 綁定HTML Class
   • 對象語法，鍵值對头遭，注意計算屬性使用粪狼，實現(xiàn)復(fù)雜邏輯的class綁定
   • 數(shù)組語法，多個class
   • 用在組件上
2. 內(nèi)聯(lián)樣式綁定
   • 對象語法任岸，用對象寫css看起來很像再榄，注意用駝峰命名
   • 數(shù)組語法，內(nèi)聯(lián)綁定多個樣式在一個元素上

條件渲染

使用key管理可以復(fù)用的元素

Vue會盡可能高效的渲染元素享潜，通常會復(fù)用已有元素而不是從頭開始渲染困鸥。

Vue提供了一種方式來表達“這兩個元素是完全獨立的，不要復(fù)用它們”

添加一個具有唯一值的key屬性即可

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

元素仍然會被高效復(fù)用，因為沒有添加key屬性

v-if VS v-show

<h1 v-show="ok">Hello!</h1>

不同的是v-show的元素會始終會被渲染保留在DOM中疾就。v-show只是簡單地切換元素的css屬性的display澜术。

=> v-show不支持元素和v-else

• v-if
  1. v-if是真正的條件渲染，會確保在切換過程中條件塊類的事件監(jiān)聽器和自主家適當(dāng)?shù)乇讳N毀和重建猬腰。
  2. v-if也是惰性的：如果在初始渲染時條件為假鸟废，則什么也不做直到條件第一次變?yōu)檎妫艜_始渲染條件塊姑荷。
• v-show
  1. 無論初始條件是什么盒延，元素總會被渲染，并且只是簡單地基于css進行切換

總結(jié)：v-if有更高的切換開銷鼠冕，而v-show有更高的初始渲染開銷添寺。

如果需要頻繁地切換，則v-show更好

如果在運行時條件改變很少懈费，則v-show更好

v-if與v-for

不推薦兩者一起使用计露，當(dāng)v-if和v-for一起使用時，v-for具有比v-if更高的優(yōu)先級憎乙。

列表渲染

v-for數(shù)組

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
<script>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
</script>
=>
Parent-0-Foo
Parent-1-Bar

第二個參數(shù)index可選

可以用of代替in作為分隔符

v-for對象

<ul id="v-for-object" class="demo">
  <li v-for="(value,name) in object">
    {{ value }}: {{value}}
  </li>
</ul>
<script>
  new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})
</script>

可選第二個參數(shù)為property名稱（也就是鍵名）

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>
=>
0.title: How to do lists in Vue
1.author: Jane Doe
2.publishedAt: 2016-04-10

可選第三個參數(shù)為索引index

遍歷對象時票罐，會按Object.keys()的結(jié)果遍歷

維護狀態(tài)

當(dāng) Vue 正在更新使用 v-for 渲染的元素列表時，它默認使用“就地更新”的策略泞边。如果數(shù)據(jù)項的順序被改變胶坠，Vue 將不會移動 DOM 元素來匹配數(shù)據(jù)項的順序，而是就地更新每個元素繁堡，并且確保它們在每個索引位置正確渲染

為了給 Vue 一個提示沈善，以便它能跟蹤每個節(jié)點的身份，從而重用和重新排序現(xiàn)有元素椭蹄，你需要為每項提供一個唯一 key 屬性：

建議盡可能在使用 v-for 時提供 key attribute闻牡，除非遍歷輸出的 DOM 內(nèi)容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升绳矩。

<div v-for="item in items" v-bind:key="item.id">
  <!-- 內(nèi)容 -->
</div>

數(shù)組更新檢測

變異更新

這些方法會改變原數(shù)組罩润，Vue將被偵聽的數(shù)組的變異方法進行包裹，所以它們也將觸發(fā)視圖更新

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

替換數(shù)組

（計算屬性）這些方法它們不會改變原始數(shù)組翼馆，而總是返回一個新數(shù)組割以。當(dāng)使用非變異方法時，可以用新數(shù)組替換舊數(shù)組应媚，filter(),concat(),slice()

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

Vue不會丟棄現(xiàn)有DOM并重新渲染整個列表严沥。Vue為了使DOM元素得到最大范圍的重用而實現(xiàn)了一些智能的方式。

兩個數(shù)組變動Vue檢測不到

1. 改變數(shù)組的指定項
2. 改變數(shù)組的長度

解決方法

1. set方法用于改變數(shù)組的某個元素

   //改變數(shù)組的指定項 （set）
           changeOne: function(){
             Vue.set(app.arr, 1, 'car')
             // this.arr[1] = 'car'無效
           },
   
   

2. splice

   //改變數(shù)組的長度
           changeLength: function(){
             this.arr.splice(1)
             //this.arr.length = 1 無效
           }
   
   

事件處理

v-on

內(nèi)聯(lián)處理器中的方法

都是say這個方法中姜，只是值不同消玄。

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
<script>
  new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
</script>

在內(nèi)聯(lián)語句中處理原始DOM事件跟伏，可以用特殊變量$event把它傳入方法。

如果方法中帶有參數(shù)翩瓜，但是尼沒有加括號受扳，默認傳原生事件對象event

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
<script>
  methods: {
  warn: function (message, event) {
    // 現(xiàn)在我們可以訪問原生事件對象
    if (event) event.preventDefault()
    alert(message)
    //$event.preventDefault
  }
}
</script

<div id="app"> //沒有傳參數(shù),就是原生的⊥玫或者$event
<button @click="showBtnname($event)">顯示按鈕的名字</button> <br><br>
{{msg}}
</div>

new Vue({
el: "#app",
data: {
msg:''
},
methods: {
showBtnname: function(e){
this.msg = e.target.innerText;
}
}
})

事件修飾符

在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求勘高。

為了方法只有純粹的數(shù)據(jù)邏輯，而不是去處理DOM事件細節(jié)Vue.js為v-on提供了事件修飾符

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

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

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

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

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

<!-- 添加事件監(jiān)聽器時使用事件捕獲模式 -->
<!-- 即內(nèi)部元素觸發(fā)的事件先在此處理坟桅，然后才交由內(nèi)部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>

.stop和.self有時結(jié)合使用

<div @click.self="divClick" style="background-color: cadetblue; width: 100px; height: 100px;">
   <button @click.stop="btnClick">點擊</button>
</div>

使用修飾符時注意順序

v-on:click.prevent.self 會阻止所有的點擊

v-on:click.self.prevent 只會阻止對元素自身的點擊

passive

Vue 還對應(yīng) addEventListener 中的 passive 選項提供了 .passive 修飾符华望。

<!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發(fā) -->
<!-- 而不會等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>

這個 .passive 修飾符尤其能夠提升移動端的性能。

不要吧.passive 和 .prevent 一起使用桦卒，prevent會被忽略。

按鍵修飾符按鍵碼

<input v-on:keyup.enter="submit">

<input v-on:keyup.13="submit">

可以通過全局config.keyCodes對象自定義修飾符別名

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

系統(tǒng)修飾鍵

用如下修飾符來實現(xiàn)僅在按下相應(yīng)按鍵時才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器匿又。

• .ctrl
• .alt
• .shift
• .meta

.exact

鼠標(biāo)修飾鍵

• .left
• .right
• .middle

為什么在HTML中監(jiān)聽事件

所有的Vue.js事件處理方法和表達式都嚴格綁定在當(dāng)前視圖的ViewModel上

1. 在html里輕松找到JavaScript里對應(yīng)的方法
2. 無須在JavaScript里手動解綁事件
3. 當(dāng)一個 ViewModel 被銷毀時方灾，所有的事件處理器都會自動被刪除。你無須擔(dān)心如何清理它們碌更。

表單輸入綁定v-model

v-model指令在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定裕偿。它會根據(jù)控件類型自動選取正確的方法來更新元素

<input>
<textarea>
<select>

v-model本質(zhì)上不過是語法糖。負責(zé)監(jiān)聽用戶輸入事件以及更新數(shù)據(jù)痛单，并對一些極端場景進行一些特殊處理

v-model在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件

• text 和 textarea 元素使用 value 屬性和 input 事件嘿棘；
• checkbox 和 radio 使用 checked 屬性和 change 事件；
• select 字段將 value 作為 prop 并將 change 作為事件旭绒。

復(fù)選框

單個復(fù)選框綁定到布爾值

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

多個復(fù)選框綁定到同一個數(shù)組

個復(fù)選框鸟妙，綁定到同一個數(shù)組：

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>
<script>
    new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})
</script>   

單選按鈕

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>
<script>
    new Vue({
  el: '#example-4',
  data: {
    picked: '' //'One'
  }
})
</script>

空字符串，或非要綁定的字符串值

選擇框

有value直接優(yōu) 先匹配一個value值挥吵，沒有value就匹配一個text值

單選下拉框重父，空字符串

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">請選擇</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

<script>
  new Vue({
  el: '...',
  data: {
    selected: ''
  }
})
</script>

推薦像上面這樣提供一個值為空的禁用選項，兼容ios

多選下拉框（綁定到一個數(shù)組）

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>
<script>
    new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})
</script>

用v-for渲染的動態(tài)選項

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>
<script>
  new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [ //數(shù)組 忽匈，對象
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})
</script>

值綁定

 單選按鈕:
    <input type="radio" v-model="picked" v-bind:value="value"> {{picked}} 
    <!-- 123 -->
    復(fù)選按鈕
    <input type="checkbox" name="" id="" v-model="toggle" v-bind:true-value="value1" v-bind:false-value="value2">
    {{toggle}}
    {{toggle == value1}}
    {{toggle == value2}}
    <hr> 
    下拉框
    <select v-model="valueselect" >
      <option  v-bind:value="{num:111}">小狗</option>
      <option value="小貓">小貓</option>
      <option value="小豬">小豬</option>
    </select>
    現(xiàn)在選中的是{{typeof valueselect}} -> {{valueselect}}

<script>
   new Vue({
  el: '...',
  data: {

        //綁定value
        //單選按鈕
             picked:'true',
        value: '123', //value的值會轉(zhuǎn)到綁定的v-model
        //復(fù)選按鈕
        toggle: true, //:true-value="value1" :false-value="value2"兩個屬性來控制
        value1: '我被選中',
        value2:'我未被選中',
        //下拉框
        valueselect: '',
})
</script>

修飾符

1. .lazy

<!-- 在“change”時而非“input”時更新 -->
<input v-model.lazy="msg" >

2. .number

<input v-model.number="age" type="number">

如果想自動將用戶的輸入值轉(zhuǎn)為數(shù)值類型

3. .trim

<input v-model.trim="msg">

自動過濾用戶輸入的首尾空白字符