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

Posted 2020-09-05

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

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">

//自动去除字符串收尾的空格。

 

今天以此收尾，昨天晚上因为其他事耽搁了，后面尽量补上一篇，同时明天晚上也许也会交白卷，希望大家谅解，这两天学习状态不是很好，会及时调整，感谢各位的支持，晚安。