Vue学习之路---No.6(分享心得,欢迎批评指正)

我们还是先回顾一下上一次的重点:

1.事件绑定,我们可以对分别用方法和js表达式对事件进行处理

2.当方法名带括号的时候,在方法中一定要传参;而不带括号的时候,vm会自动配置默认event

3.各类事件修饰器

 

 

之前我们提到过表单绑定,那么现在我们来深入了解一下,Vue这一令人惊奇的双向表单绑定功能:
直接进入正题:
 
<input v-model=" message ">
<p>{{ message }}</p>
这是最简单的表单双向绑定,标签P中的值将随着vm中值的变化而变化
值得注意的是,就算我们这样写:
<input v-model=" message " value=" ye ">
也不会读取value,message的值只会随着vm中的数据而变化,也就应证了vue数据驱动视图的原理
 
我们再延展一下:
<span> 文本框中输入的值为: </span>
<p> {{ message }} </p>
<textarea v-model=" message " ></textarea>
同理:
我们这样写也是没有作用的:
<textarea>{{ message }}</textarea>
 
继续深入:
当我们在使用多选框的时候:
 
单个checkbox:
<input v-model="checked" type="checkbox" id=" lla ">
<lable for=" lla ">{{ checked }}</lable>
这个时候checked的值将会在true和false之间切换。
 
多个checkbox的时候:
<input type=" checkbox " id="a" value="f" v-model="checked">
<lable for="a">a</lable>
 
<input type=" checkbox " id="b" value="m" v-model="checked">
<lable for="b">b</lable>

<input type=" checkbox " id="c" value="c" v-model="checked">
<lable for="c">c</lable>
 
<span>选中的为:{{ checked }}</span>
当我们对input设置了value的时候,那么checked的值就不再是true or false了,而是相应的value值
 
new Vue:({
    el:'',
    data:{
        checked:[]
}
})
如上面的代码,这个时候,返回在span中的值,是以数组的形式渲染的

单个radio:
<input type="radio" id="a" value="f" v-model="picked">
<lable for=" a ">a</lable> 
 
<input type="radio" id="b" value="m" v-model="picked">
<lable for=" b ">b</lable>
 
<span>{{ picked }}</span>
其实和多选框的原理是一样的,区别仅仅在于这里span中的值不是一个数组而是一个单一的值
 
下拉菜单 select:::
 
单选:
 
<select v-mode="selected">
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>
 
<span>{{ selected }}</span>
option标签没有指定value属性时,那么返回的值就是标签中的内容
 
 
多选:
<select v-mode="selected" multiple>
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>
 
<span>{{ selected }}</span>
这和多选框checked一样,返回的值依然为一个数组
 
 
渲染option列表:
 
我们可以发现option总是为多个,那么我们为何不能用列表来渲染呢:
<select v-model="selected">
    <option v-for=" item in items " v-bind:value=" option.value ">{{ option.text }}</option>
</select>
 
<span>{{ selected }}</span> 
 
new Vue({
    el:'',
    data:{
        selected:'a',
        option:
            [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
 
}
})
这里需要注意的是:
我们在这里绑定了option的value属性,如果不对它进行绑定,那么最后选出来的值就是
value而不是text
 
 
 
下面我们来总结一下数据绑定及了解一下相关修饰器:
<input type="radio" v-model="picked" value="a">
//选中picked时是字符串 ”a“
<input type="radio" v-model="toggle">
//选中时,将会是true和false间切换
<select v-model="selected">
    <option value="aaa">aaa</option>
</select> 
//selected时会输入字符串aaa
 
 
<input type="checkbox" v-model="toggle"  v-bind:true-value="a" v-bind:false-value="b">
//  vm.toggle === vm.a (checked)
// vm.toggle === vm.b( unchecked )
 
这里其实没有多大变化,我们仅仅是对true和false分别绑定了一个值而已,很好理解
 
<select v-model="selected">
    <option v-bind:value=" { number : aaa } ">aaa</option>
</select>
 
vm.selected.number === aaa

这里我们绑定了一个对象,相应的我们也读取了对象的值
 
 
接下来进入今天最后的环节,讲一讲数据绑定中相应的修饰器:
 
Lazy:
<input v-model.lazy="message">
// 这样的话,视图将会在输入完成之后变化,而不会即时变化
 
number:
<input v-model.number="message">
//这个可以强制将输入的数据转换成数字
 
trim
<input v-model.trim="message">
//自动去除字符串收尾的空格。
 
今天以此收尾,昨天晚上因为其他事耽搁了,后面尽量补上一篇,同时明天晚上也许也会交白卷,希望大家谅解,这两天学习状态不是很好,会及时调整,感谢各位的支持,晚安。
posted @ 2017-03-16 23:02  coopermc  阅读(462)  评论(0编辑  收藏  举报