本文主要是对于Vue非常浅显的知识进行介绍，并不深入了解，只接触表面，对一些较复杂的内容也不过多描述。如文中有错误之处，望不吝赐教，谢谢~
本文的示例代码是在上一篇Vue学习（一）-简单入门实例的实例上展开的。
（1）插值表达式：{{…}}
vue采用双大括号的形式进行文本插值
（2）监听事件：v-on
- v-on:click 点击事件
新建von.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>v-on:click</title>
<script src="vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
//按钮
<button v-on:click="fun1('v-on')">v-on</button>
</div>
<script>
new Vue({
el:"#app",
data:{
message:"Hello world"
},
//方法
methods:{
fun1:function(msg){
alert("Hello");
this.message = msg;
}
}
});
</script>
</body>
</html>
启动程序后，在浏览器中输入
http://localhost:8080/von.html
可得到如下画面
点击按钮
-
keydown 键盘事件
-
mouseover 鼠标事件
（3）事件修饰符
vue提供事件修饰符来处理DOM事件细节。
- stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡，即启动子事件时不会启动父事件。
- prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
- capture：与事件冒泡的方向相反，事件捕获由外到内
- self：只会触发自己范围内的事件，不包含子元素
- once：只会触发一次
（3）按键修饰符
按键修饰符主要用于键盘事件。
- .enter :enter键
- .tab:tab键
- .delete : 删除键
- .esc : 取消键
- .space : 空格键
- .up : 上
- .down : 下
- .left: 左
- .right :右
2020.04.05
扫描二维码关注公众号，回复：
10748351 查看本文章
