我们可以用 v-on
指令绑定一个事件监听器,通过它调用我们 Vue 实例中定义的方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue</title>
<script src="vue.js"></script>
</head>
<body>
<div id="test">{{msg}}
<p v-for="val in arr">
{{val.a}}
</p>
<a href="javascript:void(0)" v-on:click="tap">点我</a>
</div>
</body>
</html>
<script>
// window.οnlοad= function(){
var app2 = new Vue ({
el:"#test",
data:{
msg:'润元装饰',
msg1:"家装"+new Date(),
msg2:'lianxi',
show:true,
arr:[
{a:'bb'},
{a:'cc'}
]
},
methods:{
tap : function(){
this.arr.unshift({a:'new'})
}
}
})
// }
</script>
注意在 tap 方法中,我们更新了应用的状态,但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理,你编写的代码不需要关注底层逻辑。