前端框架vue中的v-on和v-bind的区别

1.v-on

指令监听DOM事件，并在触发时运行一些JavaScript代码
"v-on: "的语法糖为 "@"，语法糖就是简写的意思。
例如：

<!-- 事件处理函数 -->
<div id="app">
	<!-- 语法：v-on:事件名="js 语句"-->
	<button v-on:click='num+=1'>点我+1</button>
	<!-- js语句也可以替换为函数 -->
	<button v-on:click="sayHi">Say Hi</button>
	<!-- 上下两句完全相同 -->
	<button @click="sayHi">Say Hi</button>
</div>
<script type="text/javascript">
	new Vue({
		el:'#app',
		data:{
		
		},
		//函数必须写在此
		methods: {
			sayHi() {
				alert('HI');
			},
					
		},
	})
</script>

2.v-bind

用来给属性赋值
v-bind：是单向数据流
标签里面用插值语法：{{}}

2.1对象方式绑定动态属性用： v-bind: 属性名#

属性名就是类名，属性值就是布尔变量或布尔表达式。
'v-bind:'的语法糖是 ':'
例如：

<style type="text/css">
	.box{
		width: 100px;height: 100px;
		background-color: pink;
	}
	.size{
		font-size:30px;
		margin-top: 5px;
	}
</style>
<div id="app">
	<a v-bind:href="link">打开</a>
	<img v-bind:src="url" alt="">
	<!-- 语法糖：    : -->
	<img :src="url" alt="">
	<!-- 动态绑定 -->
	<!-- 前面一个是静态class，后面的是动态，当冒号后面的变量或者表达式为true时，样式才会生效；box和size类写在样式表里面 -->
	<div class="bold" :class="{box:flag,size:3>2}">对象方式</div>
</div>
<script type="text/javascript">
	new Vue({
		el:'#app',
		data:{
			link:'http://www.baidu.com',
			url:'https://v2.cn.vuejs.org/images/logo.svg'
		}
	})
</script>

2.2数组方式动态绑定类型属性#

也就是在数组中放入多个对象。
例如：

<style type="text/css">
	.box{
		width: 100px;height: 100px;
		background-color: pink;
	}
	.bold{
		font-weight: 900;
		color: green;
	}
</style>
<div id="app">
	<!-- 第二种：数组方式，active 是个变量，它的值是类名 -->
	<div v-bind:class="[active,{bold:false}]">数组方式</div>
</div>
<script type="text/javascript">
	new Vue({
		el:'#app',
		data:{
			flag:false,
			active:'box'
		}
	})
</script>