v-on
vue可以使用v-on指令来监听事件，方便与用户进行交互。我们不需要修改DOM中的数据，所有的操作都由Vue来实现，你编写的代码只需要关注底层逻辑。这也是Vue强大的地方之一
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="id">
{{message}}
<button v-on:click="reverseMessage">逆转信息</button>
</div>
</body>
<script>
var vm = new Vue({
el:"#id",
data:{
message:'Hello Vue.js!'
},
methods:{
reverseMessage:function(){
//把数据的顺序调换
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</html>
v-model
在上面的例子中再添加 v-model指令双向绑定表单输入和应用状态，实现指令之间的组合使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="id">
{{message}}
<input v-model="message">
<button v-on:click="reverseMessage">逆转信息</button>
</div>
</body>
<script>
var vm = new Vue({
el:"#id",
data:{
message:'Hello Vue.js!'
},
methods:{
reverseMessage:function(){
//把数据的顺序调换
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</html>