1. 表单输入绑定

• v-model指令在表单input、textarea、selelct元素上创建双向数据绑定。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

• v-model只是一个语法糖：

  <input v-model="searchText">
  //等价于下面：；
  <input 
     v-bind="value",
     v-on="searchText = $event.target.value"
  >    
  

• v-model用在自定义组件上使用时跟input 稍有不同：

     <custom-input v-model="searchText"></custom-input>
       //等价于
    <custom-input
       v-bind:value="searchText"
       v-on:input="searchText = $event"
   ></custom-input>
  

• 表单值绑定
  v-model在内部为不同的元素使用不同的属性并抛出不同的事件：

  1. text 和 textarea元素使用value属性和input事件
  2. checkbox 和 radio使用 checked 和 change 事件
  3. select字段将value 作为prop并将 change 作为事件

• 修饰符

  • .lazy
    在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

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

• .number
  如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

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

• .trim
  如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

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

---

2. 组件

2.1 注册一个全局组件基础语法

Vue.component('button-counter', options)

这里的options必须满足以下要求：

1. 因为组件是一个可复用的vue实例，所以它们与 new Vue 接收几乎相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。
2. 组件不接受el
3. 这里的 options.data 选项必须是一个函数

2.2 组件的组织

每一个vue组件都必须只有一个根元素

• 反例一

//每个 Vue 组件必须只有一个根元素，所以下面的组件是错的（控制台会出现一个警告）
Vue.component('xxx',{
  template:`
    hi
  `
})

• 反例二

//两个div必须有一个根元素
Vue.component('xxx',{
  template:`
    <div></div>
    <div></div>
  `
})

2.3 通过prop向子组件传递数据

• Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。

//js
Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

//html
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

• Vue 组件想要修改外部传进来的 props.xxx，方法是使用$emit触发一个事件，让外部去修改 props.xxx。

2.4 动态组件

<component v-bind:is="currentTabComponent"></component>

通过修改 currentTabComponent 的值，我们就可以让 component 在不同组件之间进行动态切换,这里的currentTabComponent可以包括：

1. 已经注册组件的名字
2. 一个组件的选项对象