Vue中v-model和v-bind简单对比

刚开始学Vue,前端好复杂,好不容易在Angular、React和Vue中选了一个好好学下,看了看还有webpack和各种组件库,路漫漫其修远兮,吾将上下而求索。

References:

Vue中绑定数据有三种方式,一种是插值,也就是{{ name }}的形式(Mustache语法),一种是v-bind,还有一种是v-model。

  • v-bind
    v-bind主要用法是动态更新HTML元素上的属性。例如:
<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

当classObject对象的属性变化时,html中的class属性也会相应改变。

  • v-model
    v-model用于表单元素的双向绑定。例如:
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

当message的值改变时,input的value会跟着改变。当input输入框中的值改变时,message的值也会随之改变。

Snipaste_2018-09-21_19-57-51.png

在vue官网中对于v-model的描述有这样一句:“本质上不过是语法糖”。但是下面就没有详细的描述了,但是在组件的部分又有这样一段代码:
Snipaste_2018-09-21_20-01-26.png

参考其他的文章知道,其实v-model就是v-on:inputv-bind:value的语法糖。即:

<input v-model="searchText">

其实就是

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

的简写。

所以简单的理解就是:

  • v-bind是单向绑定,可以通过操作model的值实现DOM中元素的联动更新。
  • v-model是双向绑定,主要用于表单元素,可以通过操作model更新DOM,也能通过改变表单的值反过来影响model的值。
  • v-model其实就是在v-bind的基础上做了v-on:input事件处理

文章到这里就结束,其实文章大多数网上都有,但是我找了很多都不得其解,在敲书上的一个Demo时遇到的问题。下面想分享下我敲的Demo和遇到的问题。


目的是实现一个输入框组件,可以直接数字数字或点击按钮增加和减少数字。这里为了描述问题就删减一些代码,方便突出问题所在。
Snipaste_2018-09-21_20-30-46.png

组件定义部分如下:

Vue.component("input-number", {
    template: '<div>\
                <input type="text" :value="currentValue"/>\
                </div>',
    props: {
        min: {
            type: Number,
            default: -Infinity
        },
        max: {
            type: Number,
            default: Infinity
        },
        value: {
            type: Number,
            default: 0
        }
    },
    data: function() {
        return {
            currentValue: this.value
        }
    }
});


var app = new Vue({
    el: "#app",
    data: {
        ParentValue: 3
    }
});

html代码如下:

<input-number :min="1" :max="10" v-model="ParentValue"></input-number>

可以看到组件的props中定义了3个变量:min、max、value,在html中定义了3个绑定的变量min、max、ParentValue。
首先v-model绑定的是ParentValue,这里为了区分父组件和子组件的值,特意把这个变量写成了ParentValue,而不是value。在定义的模板中,value绑定的值是组件中的currentValue,而currentValue来自于props的value,这个value默认值为0。但是实际展示发现确是ParentValue的值3。
没有明显的传值过去,但是却被用到了。猜测是有隐式传递,于是把组件定义的value改为其他名字发现都是默认值0,无论ParentValue怎么改变都不影响。基本可以确定是隐式传递了名为value的变量。但是还是不敢下定论,终于在vue的文档中确定了我的猜测(上图)。
总结:多动手,多看文档,前端坑好多。

标签: none

添加新评论

ali-01.gifali-58.gifali-09.gifali-23.gifali-04.gifali-46.gifali-57.gifali-22.gifali-38.gifali-13.gifali-10.gifali-34.gifali-06.gifali-37.gifali-42.gifali-35.gifali-12.gifali-30.gifali-16.gifali-54.gifali-55.gifali-59.gif

加载中……