1.v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。
既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：
input
select
textarea
radio
components（Vue中的自定义组件）
基本上除了最后一项，其它都是表单的输入项。
举例：
html：
<body>
<div id="app">
<!--双向绑定 -->
<input type="text" v-model="num">
<button v-on:click="tips="num++">+</button>
<h1>
我是<span v-text="name"></span><br>
吃了{{num}}个人
</h1>
<span v-text="name"></span><br>
<span v-html="name"></span>
<h1>开售以下课程</h1>
<input type="checkbox" value="java" v-model="lessons"/>java<br>
<input type="checkbox" value="python" v-model="lessons"/>python<br>
<input type="checkbox" value="ios" v-model="lessons"/>ios<br>
<h1>您已经够卖</h1>
<!--join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的-->
{{lessons.join(",")}}
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",//element
data: {
name: "大老虎",
num: 1,
lessons: []
},
});
</script>
</body>
2.v-on指令用于给页面元素绑定事件。
<body>
<div id="app">
<!--v-on 绑定事件-->
<!--单机弹出一个提示框-->
<button v-on:click="tips">点我</button>
<br>
<!--单机按钮 但是不触发div的v-on 事件冒泡使用 v-on:click.stop="触发的事件" -->
<div style="height: 100px;width: 100px;background-color: aqua;" v-on:click="printf(‘div‘)">
<button v-on:click.stop="printf(‘button‘)">点我试试</button>
</div>
<!--单机超链接 不触发href的地址 使用 v-on:clikc.prenevt="触发的事件"-->
<a href="http://www.baidu.com" v-on:click.prevent="printf(‘百度一下‘)">百度一下</a>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
methods: {
tips: function () {
alert("hello");
},
created: function () {
this.name = "你好"
},
printf:function (msg) {
console.log(msg)
}
},
});
</script>
</body>
原文：https://www.cnblogs.com/asndxj/p/11494350.html