网络营销网站源码,学校网站建设评审会议通知,定制网站建设制作商,seo链接提交入口目录 一、事件处理
#xff08;一#xff09;基本语法
#xff08;二#xff09;点击事件语法
1.事件绑定
2.回调函数
3.参数 event
注意#xff1a;
#xff08;三#xff09;事件修饰符
1.阻止默认事件 常用
2.阻止事件冒泡 常用
3.事件只触发一次 常用 …目录 一、事件处理
一基本语法
二点击事件语法
1.事件绑定
2.回调函数
3.参数 event
注意
三事件修饰符
1.阻止默认事件 常用
2.阻止事件冒泡 常用
3.事件只触发一次 常用
4.使用事件的捕获模式
5.当前操作元素触发事件
6.事件默认立即执行
四键盘事件语法
1.事件绑定
通过键盘名绑定
通过按键的编码绑定
自定义按键名
2.回调函数
二、计算属性
一简介
原理
二方法实现 姓名案例
1.流程
2.代码部分
三计算属性实现 姓名案例
1.流程
2.特点
3.注意
4.代码部分
四简写方式 三、监视属性
一介绍
二天气案例 无监听
1.流程
2.代码部分
二监视
1.设置监视
2.其它写法 三深度监视
四监视的简写形式
四、计算属性监视属性对比
一案例对比 二总结 一、事件处理
一基本语法
事件的基本绑定是
v-on:加绑定方式 ‘回调函数名’
加绑定方式 ‘回调函数名’
二点击事件语法
1.事件绑定
点击事件绑定 v-on:click 回调函数名
button v-on:clickshowInfo点我提示信息/buttonv-on 可以简化成 click 回调函数名 也是一个意思
button clickshowInfo点我提示信息/button2.回调函数
绑定事件的回调函数要写在 Vue 实例的 methods 对象中 如下
showInfo() 函数中的 this 指向 Vue 实例对象
写在 Vue 实例中的函数 尽量用普通函数书写 不然用箭头函数 this 会指向 window new Vue({el: #root,data: {name: 一个人},methods:{showInfo(event){alert(你好)}}})
3.参数 event
函数中有个参数是 event 它是被监听的对象 event.target 能找到被我们监听的 button
event.target.innerText 能获得里面的文字内容
注意如果要传参记得给 event 占位 因为 event 很重要 在 Vue 模板中 使用 $event 占位 methods: {showInfo(event,number) {console.log(number)},
想要 event 是第几个参数 就把 $event 写在哪儿就行
button v-on:clickshowInfo($event,23)点我提示信息/button注意
不能把事件处理的回调函数写在 data 中 虽然 也能使用 但是放在 data 中 Vue 会给这个函数默认进行数据代理但是我们函数不需要修改只是被调用不需要数据代理这样就会加大 Vue 的负担所以我们单独写在 methods 对象中methods 中都i是被 Vue 所管理的函数。
三事件修饰符
就是来修饰事件的行为的重点是前三个可以连着使用类似于 click.stop.prevent 先停止冒泡再停止默认行为是有顺序的。
1.阻止默认事件 常用 e.preventDefault() 我们也可以不用这种写法 methods: {showInfo1(e) {e.preventDefault()alert(同学你好)}} 我们可以用下面这种形式 在点击事件 click 后面加上 事件修饰符 prevent 就是上面阻止默认行为的作用
a hrefhttp://baidu.com click.preventshowInfo1点我提示信息/a2.阻止事件冒泡 常用
stop
使用下面的代码点击里面的按钮会触发两次提示弹窗这是典型的事件冒泡点击儿子冒泡给父亲 div classdemo clickshowInfo1button click.stopshowInfo1点击/button/div
3.事件只触发一次 常用
once
button click.onceshowInfo1点击/button4.使用事件的捕获模式
capture 要加在外面的盒子 点击里面的盒子 就不会冒泡了
先由外向内捕获 再由内向外冒泡 一般是冒泡阶段输出结果
如果想捕获阶段输出结果
div classbox1 click.captureshowInfo1div classbox2 clickshowInfo1点击/div
/div
5.当前操作元素触发事件
self
只有event.target 是当前的操作的元素才触发事件
就是点击按钮时 event.target 就是这个 button 不会向上冒泡执行操作了
div classbox1 click.selfshowInfo1div classbox2 clickshowInfo1点击/div
/div
6.事件默认立即执行
passive
移动端用的比较多
也不是所有的事件都需要
滚轮事件需要
不用等滚轮事件的回调结束再触发事件不然默认是执行完回调函数再去执行事件如果回调函数执行时间长的话滚动条就不动了还会造成页面卡顿
scroll 滚动条滚动
wheel 鼠标滚轮滚动 ul scroll.passivedemoli1/lili2/lili3/lili4/li/ul
四键盘事件语法
1.事件绑定
keyup keydown 键盘按键上升时触发 键盘下降时触发
placeholder 默认浅色文字
通过键盘名绑定
如果像我们按指定按键才能触发相关事件时我们可以在绑定时指定一个按键别名
例如 keyup.enter
回车enter
删除delete
退出esc
空格space
换行tab 特殊必须配合keydown 使用 因为 tab 本来的用处就能捕获焦点
上up
下down
左left
右right
系统修饰键
用 keyup 时按下修饰键同时也得按上其它键然后释放其它键事件才能被触发具体用哪个键子就直接在后面点上就行 比如想 ctrl y 生效 就写成 keyup.ctrl.y 的格式
用 keydown 时正常触发事件按下就触发
ctrl
alt
shift
meta就是 win 键
input typetext placeholder按下回车提示输入 keyup.entershowInfo通过按键的编码绑定
就是 e.keycode 属性 但是不建议使用
input typetext placeholder按下回车提示输入 keyup.13showInfo自定义按键名 我们也可以自定义按键的名字前面是自己的名字 然后后面是对应的 按键码 进行绑定但是也不推荐使用
Vue.config.keyCodes.huiche 132.回调函数
返回键盘输入的内容 e.target.value 是输入的内容
e.key 是按键的名字 e.keyCode 是按键的编码号 methods: {showInfo(e) {console.log(e.target.value)}二、计算属性
一简介
首先得明白属性是指什么 Vue 认为属性就是 实例中 data 对象中写的东西
计算属性就是拿着我们 data 中有的属性进行加工和计算 生成一个全新的属性 就是计算属性
计算属性不放在 data 里面 要单独放在 computed 对象中 就是计算的意思
计算属性也属于 Vue 实例 vm 可以直接调用
原理
使用了 Object.defineproperty 方法提供的 getter 和 setter computed:{fullName:{get(){}}}
二方法实现 姓名案例
1.流程 data 中的数据任何一个发生变化Vue 模板都会重新解析一遍如果遇到插值语法中的方法一定会重新调用一遍。所以下面当在页面的文本框中更改姓和名时 使用v-model 指令等于同时也改变了 实例中 data 的值data 值发生了变化 fullName 函数重新调用 就会发生更改
如果重复调用好几次相同的方法 这个方法就得被调用好几次模板也会再同样解析好几次
2.代码部分
bodydiv idroot性input typetext v-model:valuefirstName br名input typetext v-model:valuelastName br姓名span{{fullName()}}/span/divscriptVue.config.keyCodes.huiche 13new Vue({el: #root,data: {firstName: 张,lastName: 三},methods: {fullName() {return this.firstName - this.lastName}}})/script
/body三计算属性实现 姓名案例
1.流程
我们通过姓和名 两个属性相加得出 姓名 新得到的姓名属性就是计算属性
计算属性也属于 Vue 实例 vm 可以直接调用
因为获得的姓名的过程可能很复杂 我们把姓名以象形式存下使用 get 方法当有人读取fullName 时就调用 get 方法把 return 里面的值作为 fullName 的值我们在 return 里面进行拼接字符串就行了
2.特点
实现了缓存的效果
在 get 所依赖的数据没发生变化时只会读取第一次的姓名然后缓存起来不会再读取姓名了
但是如果 get 依赖的数据发生变化了就会重新读取更新 然后存缓存
3.注意
在 data 中的性和名不能直接使用 因为存在于不同的作用域但是 Vue 默认将 get() 方法里面的 this 指向了 Vue 实例 我们就能用 this 调用 data 中的数据了。
fullName 不要看成一个对象 不能 fullName.get() 这样会报错他的内部会自动调用 get 方法把返回值给 fullName 所以直接调用 fullName 就行
如果要改变 fullName 的值然后分别改变姓和名 就得再使用一个 set 方法 改变它所依赖的属性
如下 set(value){const arr value.split(-)this.firstName arr[0]this.lastName arr[1]}
4.代码部分
bodydiv idroot性input typetext v-model:valuefirstName br名input typetext v-model:valuelastName br姓名span{{fullName}}/span/divscriptnew Vue({el: #root,data: {firstName: 张,lastName: 三},computed:{fullName:{get(){return this.firstName - this.lastName}}}})/script
/body
四简写方式
如果只用 getter 的话只考虑读取不修改就不用把计算属性写成对象的方式直接写成函数的形式就行里面还是 get 方法的写法
调用时它不能看作函数而是一个属性 不能fullName() 直接不加小括号就可以 computed: {fullName: function () {return this.firstName - this.lastName}} 三、监视属性
一介绍
监视属性就是监视某一个属性的变化
语法
watch:{ 监视对象{ hander(){ 监视对象改变时喊的人函数被调用 } }
} watch: {isHot: {handler(){}} 二天气案例 无监听
1.流程
点击按钮切换天气
也可以不写changeWeather 方法在 methods 中可以直接 在click 后面写上 isHot !isHot
绑定事件后面能写一些简单的语句 但是复杂一点点属性最好还是写在 methods 里面
2.代码部分
bodydiv idrooth2今天天气预报{{info}}/h2button clickchangeWeather切换天气/button/divscriptnew Vue({el: #root,data: {isHot: true},computed: {info(){return this.isHot ? 炎热 : 凉快}},methods: {changeWeather() {this.isHot !this.isHot}}})/script
/body
二监视
1.设置监视
得用一个对象 watch里面 放全新的配置对象我们想监视 isHot 属性的变化就用 handler 函数当isHot 属性变化时会被调用我们可以通过里面两个参数拿到变化前后的值
newValue,oldValue 新的值旧的值
isHot 配置对象除了 handler 函数还有 其它配置
immediatetrue 没变化就执行 handler 函数
watch: {isHot: {immediate:true,handler(newValue,oldValue){console.log(isHot被修改了, newValue, oldValue)}}}
2.其它写法
写在 vm 实例外面不明确监视谁就用下面的形式 vm.$watch(isHot, {immediate: true,handler(newValue, oldValue) {console.log(isHot被修改了, newValue, oldValue)}}) 三深度监视
vue是能检测到里面任何层级数据的变化的检测不到 只是对我们程序员使用 watch 来检测检测不到默认只监测最外层为了效率我们能通过修改默认值 deep 就能实现深度监测
data 中有一个对象类型的数据 如果想要检测里面ab 的变化从而做出某些反应不能简单的在watch 里面加上
numbers{ handler(){ }
}
因为 Vue 认为 numbers 是一个整体这样观测到的只是 numbers 属性的地址对里面的数据不感兴趣ab发生变化vue 会认为 numbers 没有发生变化不会调用 handler 函数
我们可以使用
numbers.a:{
handler(){}
}
这样的方式来指定检测变化的变量但是要是想监测里面所有的变量就得写很多很浪费空间 data: {numbers: {a: 1,b: 2}},
这时我们就能使用一个属性来轻松解决检测的对象还是 numbers 但是在里面加上一个属性
这个属性能实现深度监视deeptrue
就是 deep 默认是关闭的 如果打开就能观测到多层级的数据的变化 watch: {numbers: {deep: true,handler() {console.log(number改变了)}}}
四监视的简写形式
不需要其它配置项时使用就可以默认为只有handler 省略名字直接坚持者写成函数的格式和计算属性类似简写不能加其它配置项deep immediate watch: {isHot(newValue, oldValue) {console.log(isHot被修改了, newValue, oldValue)}写在 Vue 实例外面的形式 vm.$watch(isHot, function(){console.log(isHot被修改了newValue,oldValue)
})
四、计算属性监视属性对比
一案例对比
用计算属性在实现一些功能时更加简短和方便但是计算属性不能处理异步的操作比如说延时输出这时就得用到监视属性加一个定时器就行而计算属性依赖返回值 return 输出不能加定时器。而且定时器使用必须用箭头函数。
下面这段代码无法输出正常结果 computed: {fullName: function () {setTimeout(() {return this.firstName - this.lastName}, 1000)}}
下面代码能延时 1秒 正常输出结果 watch: {firstName(now, last) {this.fullName now this.lastName},lastName(now, last) {setTimeout(() {this.fullName this.firstName now}, 1000)}} 二总结
计算属性computed 能完成的 监视属性 watch 也能完成
监视属性 watch 能完成的任务 计算属性computed 不一定能完成 异步任务
所有被 Vue 实例所管理的函数最好写成普通函数这样this 才能指向 vm有利于后来组件实例对象的学习
所有不被 Vue 所管理的函数 定时器的回调函数ajax 的回调函数 promise 的回调函数 最好写成箭头函数 这样 this 指向的才是 vm 或是实例对象
