Vue入门教程--v-bind,v-on对属性和事件进行设置详解（article:3）

Vue.js 初步入门

---

属性介绍

1. v-bind : 用于给控件标签属性进行动态数据域的绑定
2. v-on ： 用于给控件标签事件进行方法域的绑定

使用详解

1. v-bind

vue中，对于标签属性的数据绑定操作是无法生效的，无论是以下代码块中任意一种的错误操作都无法绑定数据域中的msg对应的数据：

msg:"hello vue.js"

<input type="text" value="msg" />
<input type="text" value="{{msg}}" />

要想成功的将msg中的数据绑定到value属性上，就要在value前面加上v-bind:属性，这样就能成功读取msg：

<input type="text" v-bind:value="msg" />

同时，还有一种简写法，可以将v-bind省略，只留下冒号:,也能有同样的效果作用：

<input type="text" :value="msg" />

2. v-on

用原生js事件写很费力，vue中首先提供了methods方法块,用来放置各种方法

			//方法块,用来放置方法
			methods:{
				//这是es6写法
				showHello(){
					return this.msg;
				}
			}
			//在页面进行调用
			<p>{{showHello()}}</p>

创建一个按钮，并给这个按钮绑定onclick（单击）事件，用原生js方法如下：

<button type="button" onclick="alert('hello vue.js');">按钮</button>

vue提供的方法域则可以大大简化事件绑定的问题，首先要用v-on:来绑定事件，但事件的原生名称要删除on，如v-on:click：

<button type="button" v-on:click="handleClick">按钮</button>

//在方法域中添加事件
//这是es6写法
handleClick(){
	alert(this.msg);
}

这样写就能在元素上绑定各种事件了，方便数据层与视图层进行交互，大大简化了编码步骤，同时v-on:也有他的简写方式就是删去v-on:，替换成@,如@click。

<button type="button" @click="handleClick">按钮</button>

也会有同样的效果。

---