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在内部为不同的元素使用不同的属性并抛出不同的事件：- text 和 textarea元素使用value属性和input事件
- checkbox 和 radio使用 checked 和 change 事件
- select字段将value 作为prop并将 change 作为事件
-
修饰符
- .lazy
在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加lazy修饰符，从而转变为使用change事件进行同步：
- .lazy
<!-- 在“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必须满足以下要求：
- 因为组件是一个可复用的vue实例，所以它们与 new Vue 接收几乎相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。
- 组件不接受el
- 这里的 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可以包括：
- 已经注册组件的名字
- 一个组件的选项对象
