vue学习第4天，表单输入绑定 组件

1，v-model 是一个语法糖 会根据使用v-model的元素的不同 绑定相应的数据

2，单个勾选框 对应的是单个值

data:{

value:"123"

}

<input  type="checkbox" v-model="value" value="456"/>

v-model 会把这个勾选框被勾选时候的值返回到 data 中更新 data 中的 value

3，多个勾选框 对应的是一个数组

data:{

values:[

"123",

"456"

]

}

<input type="checkbox" v-model="values" value="123" />

<input type="checkbox" v-model="values" value="456"/>

v-model 会把选中的所有的勾选框的值 返回到data 中的一个数组中

4，单个单选框 对应的是一个boolean值

data:{value:true}

<input type="radio" v-model="value"/>

v-model 会在这个单选框被选中的时候 返回 true 在没有被选中的时候返回false

5，下拉框 对应的是单个值

data:{value:"123"}

<select v-model="value">

<option value="123">123</option>

<option value="456">456</option>

</select>

v-model 会在option被选中的时候 返回这个值到datad的value

6，可以多选的下拉框 对应的是一个数组

data:{values:["123","456"]}

<select moutifile v-model="values">

<option value="123">123</option>

<option value="456">456</option>

<option value="789">789</option>

</select>

v-model 会在option被选中的时候 把所有被选中的 option 的值返回给 data 的 values

7，输入域 对应一个数值

data:{value:"123456789"}

<textarea v-model="value"></textarea>

v-model 会在textarea 输入内容的时候 把内容返回给 data 中的value

在输入域初始的时候 写在元素标签之间的文本 不会显示

8，组件 就是扩展了特定功能的元素

9，对于特殊的元素不能直接在其内部使用组件名字来使用组件 table slect ol ul 内部

不能这样写 <table><my-component></my-component></table> 浏览器无法识别 因为vue不是基于字符串的引擎 

可以这样写 <table><tr is="my-component"></tr></table>

10，Vue.component('my-component',{

template:"<tr><td>123</td></tr>",

在vue实例里面的大多数属性都可以写在模板里面

比如计算属性

computed:{

values:function(){

return this.value;

}

}

比如data

比如方法methods

还可以加上显示声明的接受父组件传递的参数的props

props:['prop1','prop2']

})

11，模板分为全局模板和局部模板

12，全局模板 构建之后 到处都可以用

13，局部模板 只有指定的vue实例可以使用

14，模板必选在使用这个模板的 vue 实例构建之前先声明 无论是全局模板还是局部模板

15，模板内部可以嵌套使用其它模板 父组件可以把自己的数据传递给子元素使用 为了解耦 子模版使用显示的属性来接受父容器的数据

<parent>

<child v-bind:prop1="msg1" v-bind:prop2="msg2"></child>

</parent>

data:{

msg1:"parentmsg1",

msg2:"parentmsg2"

}

Vue.component('child',{

props:['prop1','prop2'],

methods:{

self:function(){

console.log(this.prop1)

}

}

})

如果父容器传递给子容器的是一个引用类型的数据的话 父子容器持有的是同一个数据 改一个都会改变 

应该在子容器上通过计算属性或者方法来使用父容器传递的数据;