航空总医院医院网站建设招标网站,谷歌seo外链,wordpress程序代码,中国建设工程协会标准网站Vue
1. 事件 v-on 基础 使用 v-on:xxx或者xxx绑定事件#xff0c;其中xxx是事件名 事件的回调需要配置在methods对象中#xff0c;最终会在vm上 methods中配置函数#xff0c;不要用箭头函数#xff0c;否则this就不是vm了 methods中配置函数#xff0c;都是被Vue管…Vue
1. 事件 v-on 基础 使用 v-on:xxx或者xxx绑定事件其中xxx是事件名 事件的回调需要配置在methods对象中最终会在vm上 methods中配置函数不要用箭头函数否则this就不是vm了 methods中配置函数都是被Vue管理的函数this指向 vm 或者 组件实例对象 clickdemo和clickdemo($event)效果一致但是后者可以传参 事件修饰符 prevent: 阻止默认事件常用 once: 事件只触发一次常用 stop: 阻止事件冒泡常用 capture: 使用事件的捕获模式 -- 给父级加 self: 只有event.target是当前操作的元素时才触发事件 passtive: 事件的默认行为立即执行无需要等待事件回调执行完毕 click.stop.prevent 可以链式写法
注意
.self和.stop 都可以阻止事件冒泡有什么区别呢 .stop 是阻止事件向外继续冒泡当你给了子级.stop后他的父级就不会冒泡;.self 是我只让自己不冒泡其他人我不管 div click fatherClick div click.selfsonClick stylepadding:10px;background-color: aqua;p clickchildClickself阻止冒泡/p/divdiv clicksonClick stylepadding:10px;background-color: aqua;p click.stopchildClickstop阻止冒泡/p/div
/div案例
bodydiv idapp!-- 1. 阻止默认事件 .prevent --a :hrefurl click.prevent跳转/abr!-- 2. 事件只触发一次 .once --{{ count }}button v-on:click.once countadd/buttonbr!--3. 阻止事件冒泡 .stop --div clickdivClickp click.stoppClick冒泡事件/pp clickstopClick冒泡事件vue之前/p/divbr!-- 4. 采用事件的捕获模式 .capture --div click fatherClickdiv click.capturedivClick stylepadding: 20px;p clickpClick捕获模式/p/div/divbr!-- 5. 只有event.target是当前操作的元素时才触发事件: self --div click.selfselfClick stylepadding:10px;background-color: aqua;p clickpClickself/p/divhr!-- #region .self 和.stop区别--!-- .stop 是阻止事件向外继续冒泡当你给了子级.stop后他的父级就不会冒泡.self 是我只让自己不冒泡其他人我不管--div click fatherClick div click.selfselfClick stylepadding:10px;background-color: aqua;p clickpClickself阻止冒泡/p/divdiv clickselfClick stylepadding:10px;background-color: aqua;p click.stoppClickstop阻止冒泡/p/div/divbr!-- #endregion --!-- 7.链式写法 --div clickfatherClicka :hrefurl click.stop.prevent链式写法/a/div/divscriptnew Vue({el: #app,data: {count: 1,url:https://www.baidu.com/},methods: {// #region// 冒泡捕获 div标签divClick(){console.log(div);},// 冒泡捕获 p标签pClick(){console.log(p);},// 阻止冒泡事件 旧stopClick(e){console.log(e);e.stopPropagation();},// 比较.self和.stop事件fatherClick(){console.log(父级);},// self自身事件selfClick(e){console.log(e.target);},// #endregion},})/script
/body键盘事件 keyup keydown
vue之前键盘事件
keyup show
methods:{
show(e){if(e.keyCode ! 13) returnconsole.log(e.target.value)
}
}Vue中常见的按键别名 回车 enter删除 delete退出 esc空格 space换行 tab (配合keydown使用)上 up下 down左 left右 rightVue未提供别名的按键可以使用按键原始的key值去绑定但要注意转为kebeb-case(短横线命名)系统修饰键(用法特殊) shift, ctrl, alt, meta(win) 配合keyup使用按下修饰键的同时再按下其他的键随后释放其他键事件才会被触发 keyup.ctrl | keyup.ctrl.y 可以链式 配合keydown使用正常触发事件 也可以使用keyCode去指定具体的按键不推荐,被淘汰 input typetext keyup.13clickEvent placeholderhuicheVue.config.keyCode.自定义键名 键码可以去定制按键别名(不推荐) input typetext keyup.huicheclickEvent placeholderhuicheVue.config.keyCodes.huiche 13案例
bodydiv idapp!-- vue之前键盘事件 --input typetext keyupshow placeholdershowbr!-- #region 1. vue键盘别名 --!-- enter事件 --input typetext keyup.enterclickEvent placeholderenterbr!-- delete事件 --input typetext keyup.deleteclickEvent placeholderdeletebr!-- esc事件 --input typetext keyup.escclickEvent placeholderescbr!-- space事件 --input typetext keyup.spaceclickEvent placeholderspacebr!-- tab事件 --input typetext keydown.tabclickEvent placeholdertabbr!-- up事件 --input typetext keyup.upclickEvent placeholderupbr!-- down事件 --input typetext keyup.downclickEvent placeholderdownbr!-- left事件 --input typetext keyup.leftclickEvent placeholderleftbr!-- right事件 --input typetext keyup.rightclickEvent placeholderrighthr!-- #endregion --!-- 2. 未提供别名的按键 --input typetext keyup.caps-lockclickEvent placeholdercaps-lockinput typetext keyup.aclickEvent placeholderahr!-- 3. 系统修饰符 --input typetext keyup.shiftclickEvent placeholdershiftbrinput typetext keyup.ctrlclickEvent placeholderctrlbrinput typetext keydown.altclickEvent placeholderaltbr!-- 可以链式 --input typetext keyup.ctrl.xclickEvent placeholderctrlxbrinput typetext keyup.huicheclickEvent placeholderhuicheinput typetext keyup.40clickEvent placeholderhuiche/divscriptVue.config.keyCodes.huiche 13var vm new Vue({el: #app,methods: {show(e){if(e.keyCode ! 13) returnconsole.log(e.keyCode, e.target.value);},clickEvent(e){console.log(e.code, e.keyCode, e.target.value);},},})/script
/body2. 计算属性(computed)
引入 姓名案例 模板语法vue官网风格指南 模板中简单表达式定义要用的属性不存在要通过已有 的属性计算得来原理 利用Object.defineProperty方法提供的getter和setterget函数什么时候执行 初次读取时会执行一次当依赖的数据发生改变时会被再次调用 优势与methods实现相比内部有缓存机制复用效率更高调试方便备注 计算属性最终会出现在vm上直接读取使用即可如果计算属性要被修改那必须写set函数去响应修改且set中要引起计算属性依赖的数据发生变化
const vm new Vue({
el: #APP,
data:{firstName: 张lastName: 三
}
computed:{// 1. 完整写法fullName:{// get有什么作用当有人读取fullName时get就会被调用且返回值就是fullName的值// 计算属性有缓存// get什么时候被调用 1. 初次读取数据会执行一次 2. 当依赖的数据发生改变时会被再次调用get(){console.log(get被调用了)console.log(this) // this指向vmreturn this.firstName - lastName},// set有什么作用 当每次修改fullName时就会调用setset(value){const arr value.split(-)// 计算属性是依赖 firstNamelastName计算出来的改变fullName需要把依赖的数据改变this.firstName arr[0]this.lastName arr[1]}},// 2. 简写 // 确定只是读取不对fullName做修改可以简写// fullName就是计算属性的名称fullName(){return this.firstName - this,lastName}}
})
