v-on 用来监听 dom事件
方法是在选项对象 methods 中定义的 是一个对象属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>
<!--1、click事件直接使用 js语句-->
<button v-on:click="count += 1">Add 1</button>
<span>count:{{count}}</span>
</p>
<p>
<!--2、click事件直接绑定一个方法-->
<button v-on:click="greet">Greet</button>
<!-- 简写方式-->
<button @click="greet">Greet</button>
</p>
<p>
<!--3、click事件使用内联语句调用方法-->
<button v-on:click="say('Hi')">hi</button>
</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data(){
return {
count:0,
message:'hello,Vue.js'
}
},
// 在选项对象的methods属性对象中定义方法
methods:{
greet:function(){
// 方法的this值 始终指向组件实例
alert(this.message)
},
// 对象方法的简写方式
say(msg){
alert(msg)
}
}
}).mount("#app");
</script>
</body>
</html>