首页 > 代码库 > Vue学习之路---No.6（分享心得，欢迎批评指正）

Vue学习之路---No.6（分享心得，欢迎批评指正）

2024-09-09 03:31:26   215人阅读

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

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

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

3.各类事件修饰器

 

 

之前我们提到过表单绑定，那么现在我们来深入了解一下，Vue这一令人惊奇的双向表单绑定功能：
直接进入正题：
 
<input v-model=" message ">
<p>{{ message }}</p>
这是最简单的表单双向绑定，标签P中的值将随着vm中值的变化而变化
值得注意的是，就算我们这样写：
<input v-model=" message " value="http://www.mamicode.com/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="http://www.mamicode.com/f" v-model="checked">
<lable for="a">a</lable>
 
<input type=" checkbox " id="b" value="http://www.mamicode.com/m" v-model="checked">
<lable for="b">b</lable>

<input type=" checkbox " id="c" value="http://www.mamicode.com/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="http://www.mamicode.com/f" v-model="picked">
<lable for=" a ">a</lable> 
 
<input type="radio" id="b" value="http://www.mamicode.com/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="http://www.mamicode.com/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" vhttp://www.mamicode.com/alue="a">
//选中picked时是字符串 ”a“
<input type="radio" v-model="toggle">
//选中时，将会是true和false间切换
<select v-model="selected">
    <option value="http://www.mamicode.com/aaa">aaa</option>
</select> 
//selected时会输入字符串aaa
 
 
<input type="checkbox" v-model="toggle"  v-bind:true-vhttp://www.mamicode.com/alue="a" v-bind:false-value="http://www.mamicode.com/b">
//  vm.toggle === vm.a (checked)
// vm.toggle === vm.b( unchecked )
 
这里其实没有多大变化，我们仅仅是对true和false分别绑定了一个值而已，很好理解
 
<select v-model="selected">
    <option v-bind:value="http://www.mamicode.com/{ 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">
//自动去除字符串收尾的空格。
 
今天以此收尾，昨天晚上因为其他事耽搁了，后面尽量补上一篇，同时明天晚上也许也会交白卷，希望大家谅解，这两天学习状态不是很好，会及时调整，感谢各位的支持，晚安。

Vue学习之路---No.6（分享心得，欢迎批评指正）


联系
我们