本文主要是對於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