vue笔记二

七.列表渲染

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">