vue-day02
1-事件处理
1.1-事件对象
-
无需给事件处理函数传递参数
在事件处理函数定义的位置, 直接通过形参接收事件对象即可
<input type="text" @keyup="change" />new Vue({ el: '#app', methods:{ change(e) { console.log(e.target.value); } } }) -
需要给事件处理函数传递参数
需要使用系统提供的关键字**$event**手动传递事件对象
<input type="text" @keyup="change($event,'hello')" />new Vue({ el: '#app', methods: { // 在事件处理函数定义的地方直接通过形参接受事件对象即可 change(e,msg) { console.log(e.target.value,msg); } } });
1.2-事件修饰符
-
作用: 限制事件触发的时机或者条件
-
语法格式
<div @事件名称.事件修饰符="事件处理函数"></div>
1.2.1-stop
-
作用: 阻止事件冒泡
-
书写位置: 子元素事件注册位置
<div class="parent" @click="handle2"> <!-- 通过stop事件修饰符阻止事件冒泡 --> <div class="child" @click.stop="handle1"></div> </div>new Vue({ el: '#app', methods: { handle1(event){ // 阻止事件冒泡 // event.stopPropagation(); console.log('子标签被点击了'); }, handle2(){ console.log('父标签被点击了'); } } });
1.2.2-prevent
-
作用: 阻止默认行为
<!-- 通过prevent事件修饰符,阻止默认行为 --> <a href="http://baidu.com" @click.prevent="handle">百度</a>new Vue({ el: '#app', methods: { handle(event){ // 传统方式阻止默认行为 // event.preventDefault(); console.log('a标签被点击了'); } } });
1.2.3-capture
-
作用: 修改事件执行顺序, 将事件执行顺序变为捕获模式(由外向内依次触发)
-
书写位置: 父元素的事件注册位置
<div class="parent" @click.capture="handle2"> <div class="child" @click="handle1"></div> </div>
1.2.4-self
-
作用: 限制事件只能别自己触发, 不能被冒泡行为触发
-
书写位置: 父元素事件注册位置
<!-- self: 限制事件只能被事件源触发, 不能被冒泡触发 --> <div class="parent" @click.self="handle2"> <div class="child" @click="handle1"></div> </div>
1.2.5-once
-
作用: 限制事件只能被触发一次
<!-- once: 限制事件只触发一次 --> <div class="child" @click.once="handle1"></div>
1.3-按键修饰符
-
作用: 修饰键盘事件, 从而限制键盘事件的触发条件(只有在按下按键修饰符对应的键盘按键的时候, 才执行事件处理函数)
-
语法格式
<div @键盘事件名称.按键修饰符="事件处理函数"></div>
1.3.1-系统内置的按键修饰符
.enter: 回车键.tab: tab键.delete(捕获“删除”和“退格”键).esc: esc键.space空格键.up: 上.down: 下.left: 左.right: 右
1.3.2-自定义按键修饰符
- 按键修饰符名字自定义即可
- 键盘码必须真实有效
// Vue.config.keyCodes.自定义按键修饰符别名 = 按键键盘码
Vue.config.keyCodes.f1 = 112;
2-表单处理
2.0-双向数据绑定
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pHG9xQcq-1608648849836)(D:\web前端\西安web0921\day02\笔记\media\双向数据绑定.jpg)]
2.1-v-model指令
-
作用: 将用户通过表单元素输入或者选择的内容同步到数据层
-
注意: v-model这个指令一般只能和表单元素结合起来使用
2.2-常见表单元素双向数据绑定
<div id="app">
<div>
用户名: <input v-model="info.username" type="text" />
</div>
<div>
性别: <input v-model="info.sex" type="radio" value="男"/>男
<input v-model="info.sex" type="radio" value="女"/>女
</div>
<div>
爱好: <input v-model="info.hobby" type="checkbox" value="下象棋"/> 下象棋
<input v-model="info.hobby" type="checkbox" value="下围棋"/> 下围棋
<input v-model="info.hobby" type="checkbox" value="五子棋"/> 五子棋
</div>
<div>
编程语言:
<select v-model="info.langs">
<option value="java">java</option>
<option value="C语言">C语言</option>
<option value="python">python</option>
</select>
</div>
<div>
个人简介: <textarea v-model="info.introduce" cols="30" rows="10"></textarea>
</div>
<div>
<button @click="submit">立即提交</button>
</div>
</div>
new Vue({
el:'#app',
data:{
// 和表单元素进行绑定
info:{
username:'admin',
sex:'男',
hobby:['下象棋'],
langs:'java',
introduce:''
}
},
methods:{
submit(){
console.log(this.info);
}
}
});
2.2-表单修饰符
- 作用: 对v-model指令所收集到的表单内容进行处理
2.2.1-书写位置
v-model.表单修饰符="数据"
2.2.2-系统表单修饰符
- trim
- 作用: 去除表单元素内容首位的空格
- number
- 作用: 对表单元素的内容进行数据类型的转换, 将表单内容转换成数值类型
- 特点:
- 当表单内容可以被转换成数值类型的时候, 会自动转换
- 当表单内容无法转换成数值类型的时候, 则不会做处理
- lazy
- 作用: 延迟v-model同步数据的时机, 失去焦点的时候, 再进行数据同步
3-vm.$set
3.1-作用
- 动态给数组添加元素
- 动态给对象添加属性
3.2-语法
vm.$set(目标数据,数组的索引/对象的属性名,数组元素的值/对象的属性值)
3.3-别名
Vue.set(目标数据,数组的索引/对象的属性名,数组元素的值/对象的属性值)
4-vue核心原理
4.1-响应式数据
-
数据劫持
-
Object.defineProperty(): 一种定义变量的方式, 通过这种方式定义的数据的读取和操作可以被监听到// Object.defineProperty(数据所属对象,数据名称,{get(){},set(){}}) Object.defineProperty(window,'msg',{ // 当读取变量的时候, 会自动触发 get(){ // 必须有返回值, 变量的值是由get方法的返回值来决定 console.log('get'); return 'hello' }, // 当对变量进行重新赋值的时候, set方法会自动触发, 并且可以通过形参接收用户的赋值 set(value){ console.log('set'); console.log(value); // 通知视图进行更新 } }); // 读取数据 console.log(msg); // 设置数据 msg='你好';
4.2-模板编译
-
模板编译的核心原理: 正则替换
class Vue{ // 构造器方法:系统方法, 会自动执行; 作用: 进行属性初始化 constructor(props){ // 将data中的数据解构之后, 挂载到this上 for(let key in props.data){ this[key]=props.data[key]; } // 将methods中的方法解构之后, 挂载到this上 for(let key in props.methods){ this[key]=props.methods[key]; } // 将el挂载到this上 this.$el=props.el; // 调用渲染方法, 对模板进行编译 this.render(); } // 渲染方法 render(){ // 1-获取模板内容 const html=document.querySelector(this.$el).innerHTML; const reg=/\{\{(\w+)\}\}/g; // 2-实现正则替换 // a:完整的正则表达式匹配到的内容 // b:子表达式匹配到的内容 const newHtml=html.replace(reg,(a,b)=>{ // 使用return的结果, 替换完整正则表达式匹配到的内容 return this[b]; }); // 3-更新视图 document.querySelector(this.$el).innerHTML=newHtml; } }
5-生命周期
- vue在创建, 运行, 销毁阶段的不同时间点, 自动触发的一系列函数, 统称为生命周期钩子函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PBLFfN7o-1608648849838)(media/生命周期.png)]
5.1-创建阶段
5.1.1-特点
- 只执行1次
5.1.2-钩子函数
- beforeCreate: 创建之前(创建数据和方法还没有创建完毕)
- 不能调用数据和方法
- created: 创建之后(完成数据和方法的创建)
- 调用数据和方法
- beforeMount: 挂载前
- 还没有完成视图的渲染
- mounted: 挂载后
- 已经完成了视图的渲染
5.2-运行阶段
5.2.1-钩子函数
- beforeUpdate: 更新之前
- 已经完成了数据更新, 但是还没有完成视图的更新
- updated: 更新之后
- 已经完成了数据更新, 并且完成了视图的更新
5.3-销毁阶段
5.3.1-特点
- 只执行1次
5.3.0-钩子函数
- beforeDestroy: 销毁前
- destroyed: 销毁后
在线文档
e: 创建之前(创建数据和方法还没有创建完毕)
- 不能调用数据和方法
- created: 创建之后(完成数据和方法的创建)
- 调用数据和方法
- beforeMount: 挂载前
- 还没有完成视图的渲染
- mounted: 挂载后
- 已经完成了视图的渲染
5.2-运行阶段
5.2.1-钩子函数
- beforeUpdate: 更新之前
- 已经完成了数据更新, 但是还没有完成视图的更新
- updated: 更新之后
- 已经完成了数据更新, 并且完成了视图的更新
5.3-销毁阶段
5.3.1-特点
- 只执行1次
5.3.0-钩子函数
- beforeDestroy: 销毁前
- destroyed: 销毁后
374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
