版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/Knight_vae/article/details/100117655

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>

也会有同样的效果。