Vue：v-on、v-bind、v-model用法

1、v-on：用于绑定HTML事件 ：

一般v-on:click 可以缩写为 @click，其中@代表v-on:

示例：例如我们在HTML的body中加入一个绑定了事件的button

  点击这里

在js的methods中加入一个onClick事件：

var app = new Vue({
el : '#app',
methods : {
  onClick : function(){
    console.log("clicked");
  }
}
})

也可以绑定多个事件，但是注意在用对象同时绑定多个事件时，不能用@代替v-on：

点击这里

上面我们通过对象的方式绑定多个事件，对象中的键是事件的名称 值是methods中的成员属性方法：

methods : {
  onClick : function(){
    console.log("clicked");
  },
  onEnter : function(){
    console.log("mouseenter");
  },
  onOut : function(){
    console.log("mouseout");
  }
}

2、v-bind：用于设置HTML属性：

一般v-bind:href  缩写为 :href

例如：

aa

可以写成下面这种形式 

aa

 多标签的页面也可以使用is特性来切换不同的组件，例如：

详细用法可以参考文档：https://www.cnblogs.com/liuchuanfeng/p/6742631.html

3、v-model：在表单控件元素上创建双向数据绑定：

所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。最基础的就是实现一个联动的效果：

    

        
        jack
        
        John
        
        Mike
        

        Checked names:{{checkedNames}}
    
    

我们要注意的是，

等价于