Vue知识点总结

表单输入绑定

1. 使用v-model在表单<input> <textarea> <select>元素上创建双向数据绑定。v-model负责监听用户的输入事件以更新数据。
2. v-model会忽略表单元素的value checked selected特性的初始值而总是将vue实例的数据作为数据来源。要通过js在组件的data选项中声明初始值。
3. v-model在内部为不同的输入元素使用不同的属性并且抛出不同的事件。
   （１）text和textarea元素使用value属性和input事件。
   （２）checkbox和radio使用checked属性和change事件
   （３）select字段使用value作为prop并且change作为事件。
   实例如下

//input元素，单行文本
<input v-model="message" placeholder="edit me">
<p>Message is:{
  {message}}</p>

//多行文本 textarea元素
<span>Multiline message is:</span>
//white-space:pre-line表示合并空格，识别换行符
<p style="white-space:pre-line">{
  {message}}</p>
//换行
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

//单个复选框，绑定到布尔值
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{
  {checked}}</label>
//实现点击选中方框的复选框，对应的值变成true布尔值，若点击取消选中复选框，则值变为false布尔值
//要注意的是label标签的for值要与input标签中的id值一致。

//多个复选框，绑定到同一个数组
//实现选中的复选框对应的值就进入到数组中，可以选０个、１个或者多个。
<div id="example">
<input type="c