vue小白入手（二），對你多多少少會有一點幫助的

王叔叔又來了，小白第二篇爲你們獻上

一， 列表循環

功能：根據一組數據的選項列表進行渲染（自動for循環）。 語法： value,key in items / value,key for items

vue.js 的循環渲染是依賴於 v-for 指令，它可以根據 vue 的實例裏面的信息，循環遍歷所需數據，而後渲染出相應的內容。它能夠遍歷數組類型以及對象類型的數據，js 裏面的數組自己實質上也是對象，這裏遍歷數組和對象的時候，方式類似但又稍有不一樣。

（1）遍歷對象

<div id="app">
  <ul>
    <li v-for="(val, key, index) in me">{{index}}. {{key}}: {{val}}</li>
  </ul>
</div>
...
var vm = new Vue({
  el: '#app',
  data: {
    me: {
      name: 'Dale',
      age: 22,
      sex: 'male',
      height: 170
    }
  }
});
複製代碼

這裏，v-for 接收的參數相對較複雜，可是能夠分爲三個部分

（1）括號及其內的遍歷結果信息（val, key, index）

其中，val 是遍歷獲得的屬性值，key 是遍歷獲得的屬性名，index 是遍歷次序，這裏的 key/index 都是可選參數，若是不須要，這個指令其實能夠寫成 v-for="val in me"；

（2）遍歷關鍵詞 in

其實也有疑惑in of 有什麼區別

in 可使用 of 替代，官方的說法是「它是最接近 JavaScript 迭代器的語法」，但其實使用上並無任何區別；

me 是綁定在實例 data屬性上的一個屬性，實際上，它是有一個執行環境的，也便是咱們接觸最多的 vue 實例，模板中，咱們仍舊能夠像在 methods 以及計算屬性中同樣，經過 this 訪問到它，這裏的 me 其實就至關於 this.me，模板中直接寫 this.me 也是可行的。

渲染結果以下：

（二）遍歷數組

<div id="app">
  <ul>
    <li v-for="(item, index) in items">{{index}}. {{item}}</li>
  </ul>
</div>
...
var vm = new Vue({
  el: '#app',
  data: {
    items: ['apple', 'tomato', 'banana', 'watermelon']
  }
});
複製代碼

和遍歷對象相相似，最大的不一樣點在於對象的 「key」 和 「index」 是一致的，因此這裏咱們只須要取一個 index 便可，上面代碼的渲染結果以下：

（三） 項目中

<div id="app">
   <ul class="persons">
    <li v-for="(person,index) in persons" :key="index">name: {{person.name}}, age: {{person.age}};</li>
  </ul> 
</div>
...
var vm = new Vue({
  el: '#app',
  data: {
    persons: [
      {
        name: 'Dale',
        age: 22
      }, 
      {
        name: 'Tim',
        age: 30
      },
      {
        name: 'Rex',
        age: 23
      }
    ]
  }
});
複製代碼

v-for 同樣，在不綁定 key 屬性的狀況下，vue 默認會重用元素以提升性能，若是不須要它的默認行爲，顯式綁定一個惟一的 key 便可。 本質上是遍歷的一個數組，可是數組的每一個元素倒是一個對象，也就是上面的 person，咱們能夠經過 [] 以及 . 兩種方式去訪問這個對象的屬性，好比這裏的 name / age，渲染結果以下：

實際上，更加經常使用且強大的模式，是使用組件與數組/對象進行組合，操做方式與上面相相似

（四）v-for 和 v-if 同時使用的坑

緣由：v-for比v-if優先級高，因此不會執行v-if，若是每一次都須要遍歷整個數組，將會影響速度，尤爲是當之須要渲染很小一部分的時候。

<ul>
<li
  v-for="user in users"
  v-if="user.isActive"
  :key="user.id"
>
  {{ user.name }}
</li>
  </ul>
複製代碼

如上狀況，即便100個user中之須要使用一個數據，也會循環整個數組

正確應該是把你要判斷的數據放到vue的計算屬性裏，它會把數據依據你的條件判斷出來而後再進行循環

computed: {
activeUsers: function () {
return this.users.filter(function (user) {
  return user.isActive
})
}
}
<ul>
<li
  v-for="user in activeUsers"
  :key="user.id"
>
{{ user.name }}
</li>
</ul>

複製代碼

vue提供一組方法，對數組進行操做的時候，會觸發視圖更新（map()不會觸發） ,但其並非原生的方法，原生的方法是不會觸發視圖的更新

push()   |  pop()   |  shift()  |  unshift()
  splice() | sort()   | reverse()
複製代碼

2. 事件處理器（指令，綁定事件） — v-on=""

功能：用來監聽DOM事件觸發代碼。    語法： v-on:eventName = "eventHandle"    指令簡寫： @eventName = "eventHandle"

事件處理函數： 寫在Vue實例的methods中統一進行管理。

事件對象是事件系統提供的，在事件處理函數中獲取

a) 當行間不觸發的時候

v-on:keyup.enter = "addTodo"   
addTodo(ev){  ｝  //這裏的ev就是事件對象
複製代碼

b) 當行間觸發的時候（也就是加了個執行的括號）

v-on:keyup.enter = "addTodo(123,$event)"   //行間傳入事件對象$event
addTodo(data,ev){  }  //須要在頁面傳參的時候，第一個參數爲傳入的參數，第二個參數纔是事件對象
複製代碼

3. 事件修飾符

事件處理函數只有純粹的邏輯判斷，不處理DOM事件的細節。

   例如，阻止冒泡，取消默認行爲、判斷按鍵 修飾符位置： 以「.」寫在事件名稱後面。 （ v-on:eventName.修飾符 = "xxx")

.stop（冒泡） | .prevent（默認事件） | .capture（捕獲） | .self | .once（執行一次）
複製代碼

若是須要在內聯語句處理器中訪問原生DOM事件。可使用特殊變量$event，把它傳入到methods中的方法中    

 
• .stop：等同於JavaScript中的event.stopPropagation()，防止事件冒泡

• .prevent：等同於JavaScript中的event.preventDefault()，防止執行預設的行爲（若是事件可取消，則取消該事件，而不中止事件的進一步傳播）
• .capture：與事件冒泡的方向相反，事件捕獲由外到內
• .self：只會觸發本身範圍內的事件，不包含子元素
• .once：只會觸發一次
 

 4 鍵盤修飾符   

 
• .enter：回車鍵
• ..tab：製表鍵
• .delete：含delete和backspace鍵
• .esc：返回鍵
• .up：向上鍵
• .down：向下鍵
• .left：向左鍵
• .space: 空格鍵
• .right：向右鍵
 

 

5. 條件渲染 — v-show=""

• 根據表達式的值，用來顯示/隱藏元素**    語法： v-show="表達式"，根據表達式的值true和false，來判斷顯示或隱藏    元素會被渲染到頁面中，只是根據表達式的值進行css切換（display:none） Eg：數據list數組是否有內容 v-show="!list.length" v-if = "xxx"，是不在頁面渲染的

6 動態綁定class

-最簡單的綁定（這裏的active加不加單引號均可以，如下也同樣都能渲染）

:class="{ 'active': isActive }"
複製代碼

• 判斷是否綁定一個active、

:class="{'active':isActive==-1}"  
或者
:class="{'active':isActive==index}"
複製代碼

• 綁定並判斷多個

第一種（用逗號隔開）
:class="{ 'active': isActive, 'sort': isSort }"
第二種（放在data裏面）
//也能夠把後面綁定的對象寫在一個變量放在data裏面，能夠變成下面這樣
:class="classObject"
data() {
  return {
    classObject:{ active: true, sort:false }
  }
}
第三種（使用computed屬性）
:class="classObject"
data() {
  return {
    isActive: true,
    isSort: false
  }
},
computed: {
  classObject: function () {
    return {
      active: this.isActive,
      sort:this.isSort
    }
  }
}
複製代碼

*數組與三元運算符結合判斷選擇須要的class （注意：三元運算符後面的「：」兩邊的class須要加上單引號，不然不能正確渲染）

:class="[isActive?'active':'']"
或者
:class="[isActive==1?'active':'']"
或者
:class="[isActive==index?'active':'']"
或者
:class="[isActive==index?'active':'otherActiveClass']"

複製代碼

今天的內容到這裏就結束了，這些都是一些很基礎很基礎一些東西，能夠幫助小白更好的學習，對老人也能夠起到一個簡單的回憶吧，期待下一篇的到來