事件修饰符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 阻止默认的跳转行为 --> <a href="https://www.baidu.com/?tn=44004473_27_oem_dg" @click.prevent="add">baidu</a> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { num: 0 }, methods: { add(e) { } } }) </script> </body> </html>
按键修饰符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="text" @keyup.esc="clear"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: '#app', methods: { clear( e ) { e.target.value = '' } } }) </script> </body> </html>
双向绑定指令
vue提供了v-model双向绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 文本框的输入会实时更新到data中的username --> <input type="text" v-model="username"> <!-- vue会把data中的username的数据实时绑定到标签中 --> <p>姓名：{{ username }}</p> <hr> <!-- 属性绑定，不能将文本框的输入实时更新到username中 --> <!-- 单向绑定 --> <!-- 只能vue实时把数据更新到标签中 --> <input type="text" :value="username"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { username: '' } }) </script> </body> </html>
v-model可以使用的标签：
1.input输入框
type=“radio”
type=“checkbox”
type=“xxxx”
2.textarea
3.select
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <select v-model="content"> <option value="">请选择：</option> <option value="1">111111</option> <option value="2">222222</option> <option value="3">333333</option> </select> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { content: '' } }) </script> </body> </html>
v-model指令的修饰符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 实现对输入的数字进行加法 --> <!-- 不对指令修饰，会当成字符串拼接 --> <input type="text" v-model='num1'> + <input type="text" v-model='num2'> = <span>{{ num1+ num2 }}</span> <hr> <!-- 修饰成数字 --> <input type="text" v-model.number='num3'> + <input type="text" v-model.number='num4'> = <span>{{ num3+ num4 }}</span> <hr> <!-- 去除字符串两边的空白 --> <input type="text" v-model.trim="str"> <span>结果{{ str }}结果</span> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { num1: 0, num2: 0, num3: 0, num4: 0, str: '' } }) </script> </body> </html>
条件渲染指令
条件渲染指令用来辅助开发者控制DOM的显示与隐藏，条件渲染指令有：
1.v-if
2.v-show
判断条件为真时，显示；为假时，隐藏
<body> <div id="app"> <p v-if="flag"> v-if </p> <p v-show="flag"> v-if </p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { flag: true } }) </script> </body>
v-else-if
该指令必须配合v-if指令一起使用
<body> <div id="app"> <p v-if="flag"> v-if </p> <p v-show="flag"> v-if </p> <input type="text" v-model="type"> <div v-if="type==='A'">AAAAAAAAAAA</div> <div v-else-if="type==='B'">BBBBBBBBBBB</div> <div v-else>CCCCCCCCCCC</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { flag: true, type: '' } }) </script> </body>
列表渲染指令
<body> <div id="app"> <table style="border: red solid 2px;"> <tr v-for="(item, index) in list"> <td style="border: red solid 2px;">{{ item.id }}</td> <td style="border: red solid 2px;">{{ item.name }}</td> <td style="border: red solid 2px;">{{ index }}</td> </tr> </table> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { list: [ { id: 1, name: 'lisi' }, { id: 2, name: 'zhangsan' }, { id: 3, name: 'wangwu' } ] } }) </script> </body>
