1. html 页面
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>v-on</h2>
<!--mouseenter 获取焦点-->
<!--mouseleave 失去焦点-->
<button v-on="{mouseenter: onEnter, mouseleave: onOut}" v-on:click="onClick(1)">点我</button>
<!--submit.prevent 无刷新提交表单-->
<!--v-on: 可以替换为 @-->
<form @submit.prevent="onSubmit()" @keyup.enter="onKeyUp">
<input type="text">
<input type="submit" value="提交">
</form>
</div>
<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>
2. js 内容
var app = new Vue({
el: '#app' , //作用在id为app 的组件
data: { //定义数据
},
methods:{ //定义方法
onClick: function (data) {
console.log("click"+data);
},
onEnter: function () {
console.log("enter")
},
onOut:function () {
console.log("out")
},
onSubmit:function () {
console.log("out")
},
onKeyUp:function () {
console.log("表单提交")
}
}
});
3. 效果图
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于