<!doctype html>
<html lang="gbk">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VUE 练习</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button v-on:click="num+=1">点我加1</button>
<p>{{num}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
num:0
}
});
</script>
</body>
</html>
vue里的学习，个人感觉，需要熟悉那一套语法，本次学习了v-on:click的用法。
如上点击只是让num自增，如果有比较复杂的逻辑，把js代码写到v-on指令是不可行的，我们可以使用@click指定方法名。
<body>
<div id="app">
<button @click="hbk">点我，运行复杂逻辑</button>
<!--也可以使用 <button v-on:click="hbk">点我，运行复杂逻辑</button> -->
</div>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
hbk(){
alert("hello huangbaokang");
console.log("do something else...");
}
}
});
</script>
</body>
参数传递，直接在方法上增加参数即可。
<body>
<div id="app">
<button v-on:click="say('hello world')">点我</button>
</div>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
say:function(msg){
alert(msg);
}
}
});
</script>
</body>
有时需要访问原始的DOM事件，可以传递$event特殊变量。
<div id="app">
<button v-on:click="say('hello world',$event)">传递特殊变量</button>
</div>
methods:{
say:function(msg,event){
if(event) {
event.preventDefault();
}
alert(msg);
}
}
事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
写法(使用后缀)：<a v-on:click.stop="doSomething"></a>
支持串联：<a v-on:click.stop.prevent="doThat"></a>
监听按键事件
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
举例：绑定按键esc键
<body>
<div id="app">
<input type="text" @keyup.esc="say" v-model="keywords"/>
</div>
<script>
new Vue({
el:'#app',
data:{
keywords:"huangbaokang"
},
methods:{
say:function(){
alert("hello"+this.keywords);
}
}
});
</script>
</body>
运行如下：
