vue2.x学习笔记（十一）

接着前面的内容：https://www.cnblogs.com/yanggb/p/12586416.html。

表单的输入绑定

表单的输入绑定是一块很重要的内容，因为所有的业务系统都离不开基础表单的录入功能，因此要特别认真仔细地掌握其中的相关知识点。

基础用法

你可以使用【v-model】指令在表单<input>、<textarea>以及<select>元素上创建双向数据绑定，它会根据控件（元素）的类型自动选取正确的方式来更新元素。尽管看起来有些神奇，但是【v-model】实际上不过是语法糖（将复杂的语法整合成简单的语法），它负责监听用户的输入事件以更新数据，并对一些极端的场景进行一些特殊的处理。

v-model会忽略所有表单元素的value、checked和selected属性的初始值，而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。

在了解v-model的之前，要特别记住官方文档上的这句话，开发的过程中很多的问题都和这个注意事项有关系。

事实上，【v-model】指令在内部为不同的输入元素使用了不同的属性并抛出不同的事件：

1.text和textarea元素使用value属性和input事件。

2.checkbox和radio使用checked属性和change事件。

3.select字段将value作为prop并将change作为事件。

另外要注意的一点是，对于需要使用输入法（如中文、日文或者韩文等）的语言，【v-model】指令并不会在输入法组合文字的过程中得到更新。如果你想要处理这个过程的话，请使用【input】事件。

文本

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

多行文本

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

这里要注意，与原生的<textarea>的使用不同，在文本区域插值（<textarea>{{text}}</textarea>）并不会生效，必须要使用【v-model】指令来代替。

复选框

单个复选框，绑定到布尔值：

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

多个复选框，绑定到同一个数组：

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

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

在页面上勾选的值，就会将value的值作为单个元素被添加到数组中，比如在页面上勾选了Jack和John，那么数组的值就会是["Jack", "John"]。同样的，去除勾选，也会从数组中移除相应value的元素。此外，如果你需要默认值的话，只需要在初始化数组的时候添加相应的勾选值元素即可。

单选按钮

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

new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

下拉选择框

单选时：

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

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

这里要注意，如果【v-model】指令中绑定的表达式的初始值未能匹配任何选项，<select>元素就会被渲染成【未选中】的状态。这样的状态在ios中会使用户无法选择第一个选项，因为在这种情况下ios不会去触发change事件。因此一般是建议像上面的例子一样提供一个值为空的禁用选项。

多选时（绑定到一个数组）：

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

new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})

需要按住键盘上的shift进行多选，和前面的复选框一样，选中的项的value值会被被作为元素添加到数组中，反之则会被从数组中移除。

使用【v-for】指令渲染动态选项：

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

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

注意到了吗，这里没有使用【v-model】指令，而是使用的【v-bind:value】指令，因为这里绑定的是对象的某个动态属性。

值绑定

对于单选按钮、复选框以及选择框的选项，【v-model】指令绑定的值通常是静态字符串（对于复选框也可以是布尔值）：

<!-- 当选中时，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>

但是有的时候我们可能想要把值绑定到vue实例的一个动态属性上，这个时候就可以使用【v-bind】指令实现，并且这个属性的值可以不是字符串。

值绑定-复选框

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no">

// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'

这里的true-value和false-value属性并不会影响输入控件的value属性，因为浏览器在提交表单的时候并不会包含未被选中的复选框。如果要确保表单中的这两个值中的一个能够被提交（比如yes或者no），请换用单选按钮。

值绑定-单选按钮

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

// 当选中时
vm.pick === vm.a

值绑定-下拉选择框的选项

<select v-model="selected">
    <!-- 内联对象字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

// 当选中时
typeof vm.selected // 'object'
vm.selected.number // 123

官方文档中关于下拉选择框<select>的例子都是使用的【v-bind:value】指令，可以视作下拉选择框对【v-model】的支持并不好。

修饰符【.lazy】

在默认的情况下，【v-model】指令在每次input事件触发之后都会将输入框的值与数据进行同步（除了上述输入法组合文字的时候）。如果你想要在整体输入完成之后再触发数据同步的话，可以使用【.lazy】修饰符手动转变为使用change事件。

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

修饰符【.nubmer】

如果你想要自动将用户的输入值转为数值类型的话，可以给【v-model】指令添加【.number】修饰符。

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

这个修饰符通常是很有用的，因为即使是在【type="number"】的时候，html输入元素的值也总会返回字符串。如果这个值无法被parseFloat()函数解析的话，就会返回原始的值。

修饰符【.trim】

如果你想要自动过滤用户输入的首尾空白字符，可以给【v-model】指令添加【.trim】修饰符。

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

在组件上使用【v-model】指令

html原生的输入元素类型并不总能满足需求，因此vue的组件系统允许开发者创建具有完全自定义行为且可复用的输入组件。这些组件甚至可以和【v-model】一起使用。

这一方面的知识将在学习组件的时候会涉及到，这里先知道可以在组件上使用【v-model】指令即可。

 

"我还是很喜欢你，像纵然苦涩尝尽，甘之若饴。"