v-on和v-bind的区别深度解析

v-bind指令

You may have an infinite update loop in a component render function.

(found in )

这里学习vue报错了
百度找了一下 简单看了看
豁然开朗啊

HTML DOM 属性 对象

HTML DOM 事件

v-bind用于绑定数据和元素属性
例如：绑定a标签的href属性

<div class="app">
    <a v-bind:href="url">click me</a>
</div>  

var app = new Vue({
    el:'.app',
    data:{
        url:"https://www.baidu.com",
    }
});

以上代码中，使用v-bind绑定了a标签的href属性，当a标签被点击时，会根据对应vue中的对应的url数据进行跳转到https://www.baidu.com
不光是href属性可以被v-bind指令绑定，任何属性都可以被绑定
例如，绑定src属性、class属性

<div class="app">
    <a v-bind:href="url" v-bind:class="klass">click me</a>
    <img v-bind:src="imgsrc">
</div>  

var app = new Vue({
    el:'.app',
    data:{
        url:"https://www.baidu.com",
        imgsrc:"https://cn.vuejs.org/images/logo.png",
        kclass:"btn btn-default"
    }
});

上述代码中，同时绑定了a标签的href属性和class属性，以及img标签的src属性，其数据分别对应data里中的数据
也许你会奇怪，为什么它会知道a标签的href值url对应的就是data中的url？这其实就是vue背后的一种默认机制，它就是知道。但需要注意他们的名字得对应

用v-bind的绑定的属性的值也可以是一个对象，例如：

<div class="app">
    <a v-bind:class="{active:isActive}">click me</a>
</div>  

以上代码，active表示要添加的类名，isActive对应vue中的数据，表示在什么情况下添加该类名，对应isActive为真才添加active类

由于使用频繁，通常将v-bind:属性名=" “的格式简写成:属性名=” "

<div class="app">
    <a :class="{active:isActive}">click me</a>
</div>