vue02

v-model是双向绑定
相当于v-bind:value="message"将信息绑定到value v-on:input="message=$event.target.value实时监听输入框的值

v-model和radio结合使用
男女二选一，互斥
第一种添加key值相同，name=sex
第二种用v-model=sex value=男

v-model和checkbox 布尔值和数组
单选框v-model=“isAgree” data:isAgree:false
button :disabled="!isAgree"当没有选的时候，不能点击下一步按钮
多选框v-model=“hobbies” data:hobbies:[]

v-model和 select
单选多选 select v-model multiple
data: “香蕉” []

值绑定，原本有值，多选值并传送 v-bind在input里的应用

{{item}}

v-model的三个修饰符
v-model.lazy 在回车或失去焦点时才延迟显示输入的数据
v-model.number 默认捆绑渲染的数值类型为string，如果想数字类型就这样
v-model.trim 消除输入左右空格

组件化，注册组件的步骤
1.Vue.extend()创建组件构造器 template
2.Vue.component()注册组件
3.在vue使用组件

全局组件和局部组件
两个vueapp都能用，就是全局组件
局部组件是不要Vue.component()注册组件
在const中components:{cpn:cpnC}

父子组件，局部组件的套娃写法，const app可以看为根组件

注册组件的语法糖，不要extend的写法
全局组件
Vue.component(‘cpn1’,{template:’’})
局部组件
const app
components:{
‘cpn2’:{
template:’’
}
}

组件模板的分离写法，尽量不要在js代码里写html
分离template的内容
第一种
//

template组件不能直接调用vue根组件的值，每个组件的方法和值都应该设置在当前组件中，且组件data的值必须为函数，以保证每次组件复用的时候，两个组件之间的传值不会相互影响，如果设置为对象就会相互影响。

父子组件之间的通信，父到子props
子组件props自定义值对应父组件的值
在父组件app的子组件标签中，进行捆绑
然后就可以在子组件中获取父组件的值了
props可以是数组，也可以是别的数据类型。但如果是对象或者数组时，设置的默认值必须是个函数返回，否则报错

props的驼峰标识
标签中：不支持驼峰标识，应改为大写字母前-链接，否则不识别。现在可能识了，没试

子传父通过自定义事件
子组件methods this.$emit(‘item-click’,item)
父标签中监听
cpnclick在父组件methods中定义方法