修饰符（小白跟着就对了，因为我也是小白）
day02-修饰符及生命周期
（一）key的使用
key的用法----：key='唯一表示的值'
key的作用：添加唯一的标识，只要元素需要循环，那么都需要添加一个唯一的标识key（通常情况下会给id，担不是绝对的）
在body中 <div id="app"> <!-- <div class="box" v-for='(item,index) in arr' :key='item.id'> --> <div class="box" v-for='(item,index) in arr' :key='index'> <span>{{item.id}}</span> <span>{{item.name}}</span> <button @click='changeName(index)'>修改姓名</button> </div> </div> 在script中 let vm = new Vue({ // element 挂载点 el: '#app', data: { arr: [ { id: 1, name: '张三' }, { id: 2, name: '李四' }, { id: 3, name: '王五' }, ] }, methods: { // 修改姓名 changeName(index){ this.arr[index].name='赵六' } }, // key:作用:添加唯一的标识,只要元素需要循环，那么都需要添加一个key作为唯一值(通常情况下会添加id) }) 在style中 .box{ width: 90%; margin: 20px; padding: 20px; border: 1px solid blue; }
（二）动态类名
class
1. :class='变量名' 变量名需要在data中声明,并且值要在style中定义
2. :class='[index%2==0:"red":"green"]' 只需要在style中声明类名
3. :class='{red:true,green:true}' 只需要在style中声明即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .p1 { color: pink; } .blue { background: blue; } .red{ background: red; } .green { background: green; } .yellow { background: yellow; } </style> </head> <body> <!-- 2.创建元素 --> <div id="app"> <!-- 这是第一种绑定样式 --> <p class="p1">我是P标签</p> <!-- --> <button @click="changeColor('green')">green</button> <button @click="changeColor('yellow')">yellow</button> <p class="p1" :class='change'>我是P标签修改后的</p> <hr> <!-- 0:green 1:yellow 2:green 3:yellow 4:green 5:yellow :class='[index%2==0?"green":"yellow"]' --> <div v-for='(item,index) in arr' :key='item.id' :class='[index%2==0?"green":"yellow"]'>{{item.name}}</div> <hr> <!-- {0:red,1:green,2:yellow 3:red,4:green，5:yellow} --> <!-- 三行改变颜色 :class='{red:index%3==0,green:index%3==1,yellow:index%3==2}'--> <div v-for='(item,index) in arr' :key='item.id' :class='{red:index%3,green:index%3,yellow:index%3}'>{{item.name}}</div> <hr> <hr> <div v-for='(item,index) in arr' :key='item.id' :class='{red:index%3==0,green:index%3==1,yellow:index%3==2}'>{{item.name}}</div> <!-- <div :class='{blue:false,green:true,yellow:false}'>我是测试用的</div> --> </div> </body> <!-- 1.引入vue文件 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // el,data,methods ...都叫做vue的配置项 let vm = new Vue({ // element 挂载点 el: '#app', data: { change: 'blue', arr: [ { id: 1, name: '苹果' }, { id: 2, name: '香蕉' }, { id: 3, name: '橘子' }, { id: 4, name: '橙子' }, { id: 5, name: '柚子' }, { id: 6, name: '葡萄' }, ] }, methods: { // 修改背景色 changeColor(color) { this.change = color } }, }) </script> </html>
style
1. :style='变量名' 必须要在data中声明 对应样式属性有连字符的需要换为驼峰写法
2. :style='[变量名1,变量名2]'
<!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> <!-- 2.创建元素 --> <div id="app"> <p style="background: red;">我是用来测试行内绑定样式</p> <hr> <p :style="bg">我是用来测试行内绑定样式</p> <hr> <hr> <p :style="[bg,color]">我是用来测试行内绑定样式</p> </div> </body> <!-- 1.引入vue文件 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // el,data,methods ...都叫做vue的配置项 let vm = new Vue({ // element 挂载点 el:'#app', data:{ bg:{ background:'blue' }, color:{ color:'yellow', fontSize:'40px' } }, methods: { }, }) </script> </html>
（三）表单操作
表单操作中的特殊情况
-
-
- 对于单选框，将自动把value值赋给data中定义的变量
- 对于确认密码，而后台不需要该字段时，进行本地验证，在data中单独使用
- 对于下拉框，将v-model绑定在select上，自动获取每一项的value值给select（multiple：实现下拉框的多选）
- 根据checkbox选中状态判断按钮状态，给按钮绑定属性：disabled=“布尔值”
-
<!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> <!-- 2.创建元素 --> <div id="app"> <h2>添加学员</h2> <div>姓名: <input type="text" v-model='user.name'> </div> <!-- 对于单选框来说,会把value的值赋值给你定义的变量(user.sex) --> <div>性别: <input type="radio" name='sex' value="0" v-model='user.sex'>男 <input type="radio" name='sex' value="1" v-model='user.sex'>女 </div> <div> 电话: <input type="number" v-model='user.tel'> </div> <div> 密码: <input type="password" v-model='user.pass'> </div> <div> 确认密码: <input type="password" v-model='confirm'> </div> <div> 爱好: <input type="checkbox" value="sing" v-model='user.hobby'>唱歌 <input type="checkbox" value="dancing" v-model='user.hobby'>跳舞 <input type="checkbox" value="playing" v-model='user.hobby'> 打游戏 <input type="checkbox" value="codding" v-model='user.hobby'>写代码 </div> <div> 专业: <!-- 下拉框:下拉框中的选中的那一项的value值会赋值为select --> <select name="" id="" v-model='user.job'> <option value="java">java工程师</option> <option value="web">web工程师</option> <option value="php">php工程师</option> </select> </div> <div> 证书: <!-- multiple 实现多选 --> <select name="" id="" v-model='user.cert' multiple> <option value="erji">计算机二级</option> <option value="siji">英语四级</option> <option value="liuji">英语6级</option> </select> </div> <div> 备注: <textarea name="" id="" cols="30" rows="10" v-model='user.des'></textarea> </div> <div> <input type="checkbox" v-model='user.isAgree'>是否同意 </div> <div> <button @click='submit()' :disabled='!user.isAgree'>提交</button> </div> </div> </body> <!-- 1.引入vue文件 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // el,data,methods ...都叫做vue的配置项 // 姓名 name eg:"张三" // 性别 sex eg:"0" 说明：男-0 女-1 // 电话 tel eg:"15747474747" // 密码 pass eg:"123" // 爱好 hobby eg:["codding","playing"] 说明：唱歌-sing 跳舞-dancing 打游戏-playing 写代码-codding // 专业 job eg:"web" 说明：java工程师-java web工程师-web php工程师-php // 证书 cert eg:["erji","siji"] eg:计算机二级-erji 英语四级-siji 英语6级-liuji // 备注 des eg:"他是一个党员" // 是否同意 isAgree eg:true 同意-true 不同意-false let vm = new Vue({ // element 挂载点 el: '#app', data: { confirm: '', user: { name: 'zs', sex: '1', tel: '110', pass: '123', hobby: ['sing','playing'], job: 'web', cert: ['liuji'], des: '是个好人', isAgree: false } }, methods: { // 提交 submit() { console.log(this.user) if(this.confirm==this.user.pass){ console.log('发送请求') }else{ console.log('密码不一致') } } }, }) </script> </html>
（四）事件的使用--event
事件使用中，有一个比较特殊的事件，就是获取event
在获取event时
- 如果方法名后面没有小括号，则进行隐式传参，默认获得event对象，直接在方法中获取即可
- 如果方法名后面有小括号，既要传参，实参必须是$event，方法中正常获取event即可
<body> <!-- 2.创建元素 --> <div id="app"> {{num}} <!-- <button @click = 'add()'>点击增加</button> --> <!-- <button @click = 'add(5)'>点击增加5</button> --> <!-- 默认不传参 不加括号的情况叫做隐式传参 --> <button @click = 'add2'>点击增加</button> <!-- 需要传递参数的时候务必使用$event获取 --> <button @click = 'add3($event)'>点击增加</button> <hr> <button @click = 'num+=2'>点击增加2</button> </div> </body> <script> // el,data,methods ...都叫做vue的配置项 let vm = new Vue({ // element 挂载点 el:'#app', data:{ num:0 }, methods: { // add(n){ // this.num+=n // } add2(e){ console.log(e) }, add3(e){ console.log(e) } }, }) </script>
（五）修饰符---重点
在Vue中，总共五大类修饰符：
-
-
- 事件修饰符 -----（stop、capture、once、self、prevent）
- 键盘修饰符 -----keydown.up/down/left/right
- 鼠标修饰符 -----@click.left/right/middle
- 表单修饰符 -----v-model.lazy/number/trim
-
a.事件修饰符
-冒泡stopPropagation
@click.stop <div id="app"> <div class="box" @click='box'> 我是大盒子 <div class="outer" @click='outer'> 我是外层盒子 <div class="inner" @click.stop='inner'>我是里层盒子</div> </div> </div> </div>
-捕获capture
@click.capture <!-- capture:给谁添加谁先触发，之后会按照冒泡来触发 --> <div id="app"> <div class="box" @click='box'> 我是大盒子 <div class="outer" @click.capture='outer'> 我是外层盒子 <div class="inner" @click='inner'>我是里层盒子</div> </div> </div> </div>
-once
@click.once 给谁添加，只执行一次 <!-- once；只执行一次 --> <div id="app"> <div class="box" @click='box'> 我是大盒子 <div class="outer" @click.once='outer'> 我是外层盒子 <div class="inner" @click='inner'>我是里层盒子</div> </div> </div> </div>
-self
@click.self 只能自己触发自己 <!-- once；只执行一次 --> <div id="app"> <div class="box" @click='box'> 我是大盒子 <div class="outer" @click.self='outer'> 我是外层盒子 <div class="inner" @click='inner'>我是里层盒子</div> </div> </div> </div>
-prevent
@click.prevent 阻止事件的默认行为 <div id="app"> <!-- prevent 阻止事件的默认行为 --> <a href="http://www.ujiuye.com" @click.prevent = 'skip'>点我跳转</a> <div @contextmenu.prevent = 'right'>我是右键菜单</div> </div>
b.键盘修饰符
@keydown.up，@keydown.down，@keydown.left，@keydown.right，@keydown.enter
<div id="app"> <input type="text" @keydown.down='down' placeholder="向下"> <input type="text" @keydown.up='up' placeholder="向上"> <input type="text" @keydown.left='left' placeholder="向左"> <input type="text" @keydown.right='right' placeholder="向右"> </div> <script> // el,data,methods ...都叫做vue的配置项 let vm = new Vue({ // element 挂载点 el:'#app', data:{ }, methods: { down(){ console.log('down') }, up(){ console.log('up') }, left(){ console.log('left') }, right(){ console.log('right') } }, }) </script>
c.鼠标修饰符
@click.left @click.middle @click.right
<div id="app"> <div @click.left='left'>点击鼠标左键</div> <div @click.middle='middle'>点击鼠标中键</div> <div @click.right.prevent='right'>点击鼠标右键</div> </div> <script> // el,data,methods ...都叫做vue的配置项 let vm = new Vue({ // element 挂载点 el:'#app', data:{ }, methods: { left(){ console.log('left') }, middle(){ console.log('middle') }, right(){ console.log('right') }, }, }) </script>
d.表单修饰符
v-model.lazy
layz:失去光标后更新数据 <input type="text" v-model.lazy='msg'>{{msg}}
v-model.number
number:判断定义变量的数据类型，只判断第一位 <input type="text" v-model.number='num'>{{typeof(num)}}
trim:去除用户输入的首尾空格,不能验证初始值 <input type="text" v-model.trim = 'content'>{{content.length}}
（六）生命周期
什么叫生命周期？
在创建Vue实例之前，都需要初始化过程，创建、挂载、更新、渲染、卸载等一些列过程称之为生命周期
生命周期内有8个钩子函数
beforeCreate -----创建之前
created ----创建完成
beforeMount ----挂载之前
mounted ----挂载完成
beforeUpdate ----更新之前
updated ----更新完成
beforeDestroy ----销毁之前
destroyed ----销毁完成
具体使用 <!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> <button>点击销毁</button> <!-- 2.创建元素 --> <div id="app"> {{msg}} <input type="text" v-model='msg'> </div> </body> <!-- 1.引入vue文件 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // el,data,methods ...都叫做vue的配置项 let vm = new Vue({ // element 挂载点 el:'#app', data:{ msg:'张三' }, methods: { }, // 以下是生命周期中的8个钩子函数 // 所有数据都是undefined beforeCreate(){ console.log(this) console.log('创建之前') console.log('el:',this.$el) console.log('data:',this.$data) console.log('msg:',this.msg) }, // el:undefined data和msg的值已经获取到 created() { console.log('创建完成') console.log('el:',this.$el) console.log('data:',this.$data) console.log('msg:',this.msg) }, // 数据都已经拿到，el:找到挂载点但是未解析数据 beforeMount() { console.log('挂载之前') console.log('el:',this.$el) console.log('data:',this.$data) console.log('msg:',this.msg) }, // 数据和节点都已经解析完毕 mounted() { console.log('挂载完成') console.log('el:',this.$el) console.log('data:',this.$data) console.log('msg:',this.msg) }, // 更新前后数据都是最新的 beforeUpdate() { console.log('更新之前') console.log('el:',this.$el) console.log('data:',this.$data) console.log('msg:',this.msg) }, updated() { console.log('更新完成') console.log('el:',this.$el) console.log('data:',this.$data) console.log('msg:',this.msg) }, beforeDestroy() { console.log('销毁之前') console.log('el:',this.$el) console.log('data:',this.$data) console.log('msg:',this.msg) }, destroyed() { console.log('销毁完成') console.log('el:',this.$el) console.log('data:',this.$data) console.log('msg:',this.msg) }, }) // 模拟销毁 document.querySelector('button').onclick = function(){ vm.$destroy() } </script> </html>
（注意：对于生命周期 最常用的是mounted钩子函数，代表挂载完成）
浙公网安备 33010602011771号