初学Vue,看到大佬写的代码总是很懵逼,为什么我学到的属性大佬都不用呢?
v-bind
V-bind是用来绑定属性到所在的控件上的,可以通过它对页面上属性进行绑定,但是它并不能实现双向绑定。
<div id='test'>
<input type="button" value="wao" v-bind:title="mytitle"/>
</div>
var vm=new Vue({
el:'#test',
data:{
mytitle:'this is my title'
}
});
这当然是标准的写法,而学的深入一些,就发现,原来是有简写的方式的,v-bind的简写就是:
<div id='test'>
<input type="button" value="wao" :title="mytitle"/>
</div>
var vm=new Vue({
el:'#test',
data:{
mytitle:'this is my title'
}
});
此时也可以再深入下,如果是普通的title属性,那里面的值就只是一个变量,而如果使用v-bind属性,那么会把里面的值当作是js的一个表达式,而表达式就意味着更多的可能,比如以下代码
<div id='test'>
<input type="button" value="wao" :title="mytitle+'123'"/>
</div>
var vm=new Vue({
el:'#test',
data:{
mytitle:'this is my title'
}
});
这时vue会把这个title中的值当作表达式全部输出,结果就为this is my title123
v-on
v-on其实就是相当于js中的各种方法如onclick,mouseover,mouseenter
<div id='test'>
<input type="button" value="按钮" v-on:click="show" />
</div>
var vm=new Vue({
el:'#test',
methods:{
show:function() {
alert('Hello World')
}
}
});
它的简写是@
<div id='test'>
<input type="button" value="按钮" @click="show" />
</div>
var vm=new Vue({
el:'#test',
methods:{
show:function() {
alert('Hello World')
}
}
});
v-model
v-model真的是可以实现双向绑定,所谓双向,就是说页面上的数据可以转到model中,而model中的也可以传到页面上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
<h3>{{message}}</h3>
<input type="text" :value="message" v-model="message" />
</div>
</head>
<body>
</body>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
message:'爱敲代码爱学习',
},
});
</script>
</html>
这就是加入了v-model
这并没有加入v-model
注意:v-model只能用于表单中