2.VueJS 常用系统指令
2.1 v-on
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
2.1.1 v-on:click
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>methods</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', data:{ message:'hello,kris!' }, methods:{ fun1:function(msg){ this.message=msg; } } }) </script> </body> </html>
2.1.2 v-on:keydown
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阻止默认行为</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <input type="text" v-on:keydown="fun3($event)" /> </div> <script> new Vue({ el:'#app', methods:{ fun3:function(event){ if(!((event.keyCode>=48&&event.keyCode<=57)||event.keyCode==8||event.keyCode==46)){ alert(event.keyCode); event.preventDefault(); } } }, } ) </script> </body> </html>
2.1.3 v-on:mouseover
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阻止冒泡事件</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <div v-on:mouseover="fun4a()"> <textarea v-on:mouseover="fun4b($event)"></textarea> </div> </div> <script> new Vue({ el:'#app', methods:{ fun4a(){ alert("这是div域"); }, fun4b(event){ alert("这是一个文本域"); event.stopPropagation(); } } } ) </script> </body> </html>
2.1.4 事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。 Vue.js通过由点(.)表示的指令后缀来调用修饰符。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件修饰符</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <form @submit.prevent action="http://www.baidu.com"> <input type="submit" value="百度一下" /> </form> <div @click="fun5"> <a @click.stop href="http://www.baidu.com" >百度一下</a> </div> </div> <script> new Vue({ el:"#app", methods:{ fun5:function(){ alert("百度一下"); } } } ); </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> <head> <meta charset="utf-8"> <title>按键修饰符</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <input type="text" v-on:keydown.delete="fun6($event)"> </div> <script> new Vue({ el:"#app", methods:{ fun6:function(event){ alert("你按了删除"); event.preventDefault(); } } } ); </script> </body> </html>
v-on简写方式
<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a>
<p><!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>
2.2 v-text与v-html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-text/v-html</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", data:{ message:"<h1>hello kris</h1>" } } ); </script> </body> </html>
2.3 v-bind
插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-bind</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <font v-bind:color="red">hello</font> <font :color="green">kris</font> </div> <script> new Vue({ el:"#app", data:{ red:"red", green:"green" } } ); </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="fun9" value="获取"> <script> new Vue({ el:"#app", data:{ user:{ username:"kris", password:"kris" } }, methods:{ fun9:function(){ alert("{username:"+this.user.username+",password:"+this.user.password+"}") } } } ); </script> </body> </html>
2.5 v-for
操作数组或者对象
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-for</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(item,index) in list">{{index}},{{item}}</li> </ul> <ul> <li v-for="(key,value) in user1">{{key}}====={{value}}</li> </ul> </div> <script> new Vue({ el:"#app", data:{ user1:{ id:"1", username:"kris", password:"kris", addr:"滨江" }, list:[1,2,3,4,5,'a','b'] } } ); </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">kris</span> <span v-show="!flag">hello</span> <button @click="fun11()">切换</button> </div> <script> new Vue({ el:"#app", data:{ flag:true }, methods:{ fun11:function(){ this.flag=!this.flag; } } } ); </script> </body> </html>
浙公网安备 33010602011771号