VueJS 常用系統指令
- 2019 年 12 月 25 日
- 筆記
2.1 v-on
可以用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 程式碼
2.1.1 v-on:click
<!DOCTYPE html> <html xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>事件處理 v-on示例1</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> {{message}} <button v-on:click="fun1('good')">點擊改變</button> </div> <script> new Vue({ el: '#app', //表示當前vue對象接管了div區域 data: { message: 'hello world' //注意不要寫分號結尾 }, methods: { fun1: function (msg) { this.message = msg; } } }); </script> </body> </html>
2.1.2 v-on:keydown
<!DOCTYPE html> <html xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>事件處理 v-on示例2</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"><input type="text" v-on:keydown="fun2('good',$event)"></div> <script> new Vue({ el: '#app', //表示當前vue對象接管了div區域 methods: { fun2: function (msg, event) { if (!((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 8 || event.keyCode == 46)) { event.preventDefault(); } } } }); </script> </body> </html>
2.1.3 v-on:mouseover
<!DOCTYPE html> <html xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>事件處理 v-on示例3</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <div v-on:mouseover="fun1" id="div"><textarea v-on:mouseover="fun2($event)">這是一個文件域</textarea></div> </div> <script> new Vue({ el: '#app', //表示當前vue對象接管了div區域 methods: { fun1: function () { alert("div"); }, fun2: function (event) { alert("textarea"); event.stopPropagation(); //阻止冒泡 } } }); </script> </body> </html>
2.1.4 事件修飾符
Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或 event.stopPropagation()。 Vue.js通過由點(.)表示的指令後綴來調用修飾符。
- .stop
- .prevent
- .capture
- .self
- .once
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-on 事件修飾符</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <form @submit.prevent action="http://www.baidu.com" method="get"> <input type="submit" value="提交"/> </form> <div @click="fun1"> <a @click.stop href="http://www.itcast.cn">itcast</a> </div> </div> <script> new Vue({ el:'#app', //表示當前vue對象接管了div區域 methods:{ fun1:function(){ alert("hello itcast"); } } }); </script> </body> </html>
2.1.5 按鍵修飾符
Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符 全部的按鍵別名：
- .enter
- .tab
- .delete (捕獲 「刪除」 和 「退格」 鍵)
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
<!DOCTYPE html> <html xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>v-on 按鈕修飾符</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"><input type="text" v-on:keyup.enter="fun1"></div> <script> new Vue({ el: '#app', //表示當前vue對象接管了div區域 methods: { fun1: function () { alert("你按了回車"); } } }); </script> </body> </html>
<p> <!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>
v-on簡寫方式
<!-- 完整語法 --> <a v-on:click="doSomething">...</a> <!-- 縮寫 --> <a @click="doSomething">...</a>
2.2 v-text與v-html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>v-html與v-text</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <div v-text="message"></div> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', //表示當前vue對象接管了div區域 data: {message: "<h1>cwl</h1>"} }); </script> </body> </html>
2.3 v-bind
插值語法不能作用在 HTML 特性上，遇到這種情況應該使用 v-bind指令
<!DOCTYPE html> <html xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>v-bind</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"><font size="5" v-bind:color="ys1">CWL</font> <font size="5" :color="ys2">cwl</font> <hr> <a v-bind={href:"http://www.baidu.com"+id}>itcast</a></div> <script> new Vue({ el: '#app' }, //表示當前vue對象接管了div區域 data : { ys1:"red", ys2 : "green", id : 1 } }); </script> </body> </html>
v-bind簡寫方式
<!-- 完整語法 --> <a v-bind:href="url">...</a> <!-- 縮寫 --> <a :href="url">...</a>
2.4 v-model
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>v-model</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> 姓名:<input type="text" id="username" v-model="user.username"> <br> 密碼:<input type="password" id="password" v-model="user.password"><br> <input type="button" @click="fun" value="獲取"></div> <script> new Vue({ el: '#app', //表示當前vue對象接管了div區域 data: {user: {username: "", password: ""}}, methods: { fun: function () { alert(this.user.username + " " + this.user.password); this.user.username = "tom"; this.user.password = "11111111"; } } }); </script> </body> </html>
2.5 v-for
操作array
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>v-model</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(item,index) in list">{{item+" "+index}}</li> </ul> </div> <script> new Vue({ el: '#app', //表示當前vue對象接管了div區域 data: {list: [1, 2, 3, 4, 5, 6]} }); </script> </body> </html>
操作對象
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>v-for示例1</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(value,key) in product">{{key}}--{{value}}</li> </ul> </div> <script> new Vue({ el: '#app', //表示當前vue對象接管了div區域 data: {product: {id: 1, pname: "電視機", price: 6000}} }); </script> </body> </html>
操作對象數組
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>v-for示例1</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <table border="1"> <tr> <td>序號</td> <td>名稱</td> <td>價格</td> </tr> <tr v-for="p in products"> <td>{{p.id}}</td> <td>{{p.pname}}</td> <td>{{p.price}}</td> </tr> </table> </div> <script> new Vue({ el: '#app', //表示當前vue對象接管了div區域 data: { products: [{id: 1, pname: "電視機", price: 6000}, {id: 2, pname: "電冰箱", price: 8000}, { id: 3, pname: "電風扇", price: 600 }] } }); </script> </body> </html>
2.6 v-if與v-show
v-if是根據表達式的值來決定是否渲染元素 v-show是根據表達式的值來切換元素的display css屬性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>v-if與v-show</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"><span v-if="flag">CWL</span> <span v-show="flag">itcast</span> <button @click="toggle">切換</button> </div> <script> new Vue({ el: '#app', //表示當前vue對象接管了div區域 data: {flag: false}, methods: { toggle: function () { this.flag = !this.flag; } } }); </script> </body> </html> }
