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> }
