Vue.js 初步入门
属性介绍
v-bind
: 用于给控件标签属性进行动态数据域的绑定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>
也会有同样的效果。