七.列表渲染

1.示例

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: ‘#example-2‘,
  data: {
    parentMessage: ‘Parent‘,
    items: [
      { message: ‘Foo‘ },
      { message: ‘Bar‘ }
    ]
  }
})

ps:
a.如果不需要索引,可以簡寫為item in items
b.item in items中的in可以用of替代

2.渲染一個對象:

<template>
  <div id="app">
    <span v-for="(value, key, index) in obj">
      value: {{ value }}, key: {{ key }}, index: {{ index }}
    </span>
  </div>
</template>

<script>
export default {
  name: ‘app‘,
  data () {
    return {
      obj: {
        first: 10,
        second: 20,
        third: 30
      }
    }
  }
}
</script>

ps:如果是對象的話,列表渲染的第二個參數為key,第三個參數為索引

3.數組更新檢測

Vue 包含一組觀察數組的變異方法，所以它們也將會觸發視圖更新。這些方法如下：

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

4.由於 JavaScript 的限制，Vue 不能檢測以下變動的數組：
a.當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue
b.當你修改數組的長度時，例如：vm.items.length = newLength

為了解決a問題,可以使用

Vue.set(example1.items, indexOfItem, newValue)
或
example1.items.splice(indexOfItem, 1, newValue)

為了解決b問題,可以使用

example1.items.splice(newLength)

5.還是由於 JavaScript 的限制，Vue 不能檢測對象屬性的添加或刪除
可以使用 Vue.set(object, key, value)來解決相應

6.顯示過濾或排序後的結果;可以使用computed屬性或方法

<template>
  <div id="app">
    <span v-for="(value, index) in filterItem(lists)">
      value: {{ value }},  index: {{ index }}
    </span>
  </div>
</template>

<script>
export default {
  name: ‘app‘,
  data () {
    return {
      obj: [0, 1, 2, 7]
    }
  },
  computed: {
    lists () {
      return this.obj.filter(function (item) {
        return item > 0
      })
    }
  },
  methods: {
    filterItem (lists) {
      return lists.filter(function (item) {
        return item > 1
      })
    }
  }
}
</script>

7.一段取值範圍

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

八.事件處理

1.示例:

<template>
  <div id="app">
    <button @click="onClick(‘hi‘, $event)">click</button>
  </div>
</template>

<script>
export default {
  name: ‘app‘,
  methods: {
    onClick (msg, event) {
      if (event) {
        event.preventDefault()
      }
      alert(msg)
    }
  }
}
</script>

2.事件修飾符

Vue.js 為 v-on 提供了 事件修飾符。通過由點 (.) 表示的指令後綴來調用修飾符。

.stop
.prevent
.capture
.self
.once

<!-- 阻止單擊事件冒泡 -->
<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>
<!-- 只當事件在該元素本身 (比如不是子元素) 觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>
<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>

3.鍵盤事件

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

全部的按鍵別名：

.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right

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

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

九.表單輸入綁定

1.你可以用 v-model 指令在表單控件元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。

ps:v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值。因為它會選擇 Vue 實例數據來作為具體的值。你應該通過 JavaScript 在組件的 data 選項中聲明初始值。

2.文本:

<template>
  <div id="app">
    <span>{{ msg }}</span>
    <input v-model="msg">
  </div>
</template>

<script>
export default {
  name: ‘app‘,
  data () {
    return {msg: ‘ok‘}
  }
}
</script>

3.多行文本

<template>
  <div id="app">
    <span>{{ msg }}</span>
    <textarea v-model="msg"></textarea>
  </div>
</template>

<script>
export default {
  name: ‘app‘,
  data () {
    return {msg: ‘ok‘}
  }
}
</script>

ps:
在文本區域插值 (<textarea></textarea>) 並不會生效，應用 v-model 來代替。

4.復選框

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

<script>
export default {
  name: ‘app‘,
  data () {
    return {checked: true}
  }
}
</script>

多個勾選框，綁定到同一個數組：

<template>
  <div id="app">
    <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>
</template>

<script>
export default {
  name: ‘app‘,
  data () {
    return {checkedNames: []}
  }
}
</script>

5.單選按鈕

<template>
  <div id="app">
    <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>
</template>

<script>
export default {
  name: ‘app‘,
  data () {
    return {picked: ‘‘}
  }
}
</script>

6.選擇列表

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

<script>
export default {
  name: ‘app‘,
  data () {
    return {selected: ‘‘}
  }
}
</script>

綁定一個數組

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

<script>
export default {
  name: ‘app‘,
  data () {
    return {selected: []}
  }
}
</script>

用v-for渲染:

<template>
  <div id="app">
    <select v-model="selected">
    <option v-for="option in options" v-bind:value="option.value">
      {{ option.text }}
    </option>
  </select>
  <span>Selected: {{ selected }}</span>
  </div>
</template>

<script>
export default {
  name: ‘app‘,
  data () {
    return {
      selected: ‘A‘,
      options: [
        { text: ‘One‘, value: ‘A‘ },
        { text: ‘Two‘, value: ‘B‘ },
        { text: ‘Three‘, value: ‘C‘ }
      ]}
  }
}
</script>

7.值綁定:
對於單選按鈕，勾選框及選擇列表選項，v-model 綁定的 value 通常是靜態字符串 (對於勾選框是邏輯值)：

<!-- 當選中時，`picked` 為字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 為 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 當選中時，`selected` 為字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

有時我們想綁定 value 到 Vue 實例的一個動態屬性上，這時可以用 v-bind 實現，並且這個屬性的值可以不是字符串

8.復選框的值綁定:

<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b"
>

9.單選按鈕的值綁定

<input type="radio" v-model="pick" v-bind:value="a">

10.選擇列表的選項:

<select v-model="selected">
    <!-- 內聯對象字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

11.修飾符

.lazy
在默認情況下，v-model 在 input 事件中同步輸入框的值與數據 ，但你可以添加一個修飾符 lazy ，從而轉變為在 change 事件中同步

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number
如果想自動將用戶的輸入值轉為 Number 類型 (如果原值的轉換結果為 NaN 則返回原值)，可以添加一個修飾符 number 給 v-model 來處理輸入值

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

.trim
如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入

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

vue筆記二