VUE入门-数据绑定及事件绑定
摘要: 介绍VUE数据绑定及事件绑定
vue数据绑定：
vue单向数据流绑定属性值 v-bind: (属性),简写 :(属性)
vue双向数据流 v-model 只作用于有value属性的元素
vue事件绑定:
事件绑定v-on:事件名="表达式||函数名", 简写 @事件名="表达式||函数名"
例子代码如下
<!doctype html>
<html>
<head>
<script src="vue.js"></script>
<style>
.tom{border:1px solid #000;height:30px;padding-left:10px;}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
new Vue({
el:"#app",
template:`
<div>
<div id="one_way_bind">
<input type="text" v-bind:value="name" :class="name" v-on:blur="onBlur(this)"/>
</div>
<hr />
<div id="two_way_bind">
<input type="text" v-model="name"/>
</div>
<button v-on:click="changeName">Change Name Button</button>
</div>
`,
data:function() {
return {
name:"tom"
}
},
methods:{
changeName:function() {
this.name = "henry";
},
onBlur:function(obj){
alert(this.name);
}
}
})
</script>
</body>
</html>
