<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础事件绑定</title>
<script src="../../js/vue.min.js"></script>
</head>
<body>
<div id="top">
单击事件
<h2>测试单击事件</h2>
<button v-on:click="clickhandler">按钮</button>
onchange事件
<h2>测试onchange事件</h2>
v-on 的简写形式为@
<select @change="changehandler">
<option value="java">java</option>
<option value="前端">前端</option>
<option value="测试">测试</option>
</select>
input事件
<h2>input测试</h2>
需要传值的时候使用（）
<input type="text" @input="inputhandler('tom',event)" >
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: '#top',
函数所存放的位置
methods: {
clickhandler: function () {
console.log('测试单机');
},
changehandler: function (event) {
console.log(event.target.value);
},
inputhandler: function (name,event) {
console.log('测试input',event);
}
},
})
</script>
</body>
</html>
