VUE的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{名称}}的形式,一种是v-绑定,还有一种是v模型{{名称}}的形式比较好理解,就是以文本的形式和实例数据中对应的属性进行绑定比如。:

var app = new Vue({el:'#app',template:'<div @ click =“toggleName”> {{name}} </ div>',data:{name:'tom',},method: {toggleName(){this.name = this.name ==='tom'?'sony':'tom'},},})

上面的字符串模板中,有一个{{名}},它和data.name是绑定的,当data.name发生变化时,视图也发生变化。

但是V-绑定和V型这两种绑定比较难区分,特别是在表单元素中,刚开始会混淆到底应该怎么使用。

V-绑定

首先来看下V-绑定,它的用法是后面加冒号,跟上HTML元素的归属,例如:

<p v-bind:class =“classed”>

这里的v-bind:class会产生什么效果呢?实际上,首先你可以看下如果不加v-bind:,也就是:<p class="classed">,这只是一个普通的p元素,含有一个.classed的类,没有任何数据参与进来。

当加上V-绑定:之后,就不一样了它的值归类不是字符串,而是VUE实例对应的data.classed的这个变量也就是说data.classed是什么值,它就会给类。属性传递什么值,当data.classed发生变化的时候,阶级属性也发生变化,这非常适合用在通过CSS来实现动画效果的场合,除了类,其他大部分HTML原始的属性都可以通过这种方式来绑定,而且为了方便,它可以直接缩写成冒号形式,例如:

var app = Vue({el:'#app',template:'<img  src =“ src ”>',data:{src:'',},beforeMount(){fetch(...)。then ...)。then(res => this.src = res.src)//这里修改了data.src},})

上面这段代码中,默认情况下data.src是空字符串,也就说不会有图片显示出来,但是当从远端获取到图片地址之后,更新了data.src,图片就会显示出来了。

V模型

V模型主要是用在表单元素中,实现它了双向绑定,双向绑定大家都非常熟了,简单的说就是默认情况下,它跟上面两种情况的数据绑定是一样的,实例的data.name发生变化的时候,对应的试图中也会发生变化。但是v-模型绑定后,它还会反过来,在输入中手动输入新的内容,会反过来修改data.name的值,如果在视图中其他地方使用到了data.name ,那么这个地方就会因为data.name的变化而变化,从而实现关联动态效果下面来举个栗子

var app = Vue({el:'#app',template:'<label> <input v-model =“name”> {{name}} </ label>',data:{name:'',}, })

上面<输入>中绑定了名称,那么当输入的值发生变化时,data.name就会跟着发生变化,而data.name变化了{{名称}}的地方也会跟着变化。

v-model是一种双向绑定,那么也就是说,你绑定的元素得有机会改变值。所以实际上v-model基本上只会用在input,textarea,select这些表单元素上。

V-绑定和V型混用

有一些情况我们需要V-绑定和V-模型一起使用这个时候如果不留神,就会搞乱状况,分不清哪里应该怎么控制举个栗子。:

<input:value =“name”v-model =“body”>

上面就是一个栗子.data.name和data.body,到底谁跟着谁变呢?甚至,它们会不会产生冲突呢?

实际上它们的关系和上面的阐述是一样的,V-结合产生的效果不含有双向绑定,所以:值的效果就是让输入的值属性值等于data.name的值,而V模型的效果是使输入和data.body建立双向绑定,因此首先data.body的值会给输入的值属性,其次,当输入中输入的值发生变化的时候,data.body还会跟着改变。

现在的问题是,当这两个一起使用的时候,谁都优先级高?谁会无效?实验证明,V模型将会被使用,V绑定这个时候无效了,因为它正好绑定在值属性上,如果绑在其他属性上v-绑定是不受影响的。在这种情况下,v-绑定失效,即使你修改data.name,输入里面不会有任何变化。

这也说明,v-model建立的双向绑定对输入型元素输入,textarea,选择等具有优先权,会强制实行双向绑定,如果你愿意的话。

这说明,在单独的输入中,同时使用v型绑定和V-模型是没有必要的,虽然不会造成冲突。

注意上面我说道“单独”,也就是说,在一组输入中,它们又要另当别论。一组输入包括单选组,复选组,下拉选项,下拉选项组。

<label for =“value in options”> <input type =“checkbox”:value =“value”v-model =“selected”> </ label>

在数据中,它们是这样的:

数据:{选项:[1,2,3,4,5],选中:[],}

一组复选框,或者一组下拉选项组,也就是select mutiple =“true”的情况,它们的结果是一个数组,而非单个值,因此data.selected是一个数组,当一个选项被选中之后,这个选项的值值会被加入到data.selected中(不是按选项里面的顺序,而是操作过程中的逻辑)这个时候:值就是有效的,因为它表示把选项数组中对应的选项值传递给值,并不是双向绑定的意思,而只是传值过去(当然,当选项中对应的值发生变化时,值值也会变化)。相当于说,v-绑定负责值的值,v -model负责选中状态。当然,v模型是双向绑定,界面上你去勾选会影响data.selected的值,你在程序中操作了data.selected,也会反过来影响界面.V模型影响的是勾选效果,而v-绑定影响的是值(实际上,v绑定虽然只是影响值,但是也会影响勾选效果,比如本来一个选框是被勾选的,通过V-绑定绑 值发生了变化,那么新来的值就不会在data.selected中,这个选项就不会被勾选。如果没有被勾选,改变后的值又在data.selected中,那又会被勾选上。)

注意,只有当类型= “复选框” 是确定的情况下,才会让上述情况生效,类型值不能是动态值,因为V型模型被多次绑定同一个变量时,需要去检查输入值,而如果这个时候类型是动态的,比如用:类型= “类型” 进行动态绑定,就会导致模板编译报错。

V模型其实是V-绑定和V系列的语法糖

这是VUE官方文档中特别指出的,在阅读到这一句之前,我还对此很模糊,当阅读到:

<input v-model =“something”>其实是<input v-bind:value =“something”v-on:input =“something = $ event.target.value”>的语法糖

时,这种认识上的模糊就被消除了。

我们这篇文章没有讲到v型上,它其实就是一个事件绑定器我们仔细阅读一下<input v-bind:value="something" v-on:input="something = $event.target.value">,发现它由两部分组成:V-绑定:值和V-上:输入,必须是值属性和输入事件,否则也不会等价于v型,而且输入事件里面,正好是东西等于当前输入值。

真因为这一原理,V模型瞬间就不再难理解了。

小结

总之,要区分V-绑定和V型,只需要记住三句话:

1. v-bind是数据绑定,没有双向绑定效果,但不一定在表单元素上使用,任何有效元素上都可以使用;

2. v-model是双向绑定,基本上只用在表单元素上;

3.当v-bind和v-model同时用在一个元素上时,它们各自的作用没变,但v-model优先级更高,而且需要区分这个元素是单个的还是一组出现的。


Logo

前往低代码交流专区

更多推荐