农业信息网站 建设,校园二手物品交易网站怎么做,wordpress文章百万行,网站开发方向行业现状文章目录 1 数据代理1.1 回顾Object.defineproperty方法1.2 何为数据代理1.3 Vue中的数据代理 2 事件处理2.1 事件的基本使用2.2 事件修饰符2.3 键盘事件 1 数据代理
1.1 回顾Object.defineproperty方法
!DOCTYPE html
htmlheadmeta charset!DOCTYPE html
htmlheadmeta charsetUTF-8 /title回顾Object.defineproperty方法/title/headbodyscript typetext/javascript let number 18let person {name:张三,sex:男,//age: 18 直接写可以随意修改和删除//age: numbernumber变化age不变}Object.defineProperty(person,age,{// value:18,// enumerable:true, //控制属性是否可以枚举不参与遍历默认值是false// writable:true, //控制属性是否可以被修改默认值是false// configurable:true //控制属性是否可以被删除默认值是false//当有人读取person的age属性时get函数(getter)就会被调用且返回值就是age的值get(){console.log(有人读取age属性了)return number},//当有人修改person的age属性时set函数(setter)就会被调用且会收到修改的具体值set(value){console.log(有人修改了age属性, 且值是,value)number value}})//不可枚举就不能遍历// console.log(Object.keys(person)) /*for(let key in person){console.log(person[key]);}*/console.log(person)/script/body
/html1.2 何为数据代理
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title何为数据代理/title/headbody!-- 数据代理通过一个对象代理对另一个对象中属性的操作读/写--script typetext/javascript let obj {x: 100}let obj2 {y: 200}Object.defineProperty(obj2,x,{ // obj2也能访问和操作xget(){return obj.x },set(value){obj.x value}})/script/body
/html1.3 Vue中的数据代理
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titleVue中的数据代理/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 1.Vue中的数据代理通过vm对象来代理data对象中属性的操作读/写2.Vue中数据代理的好处更加方便的操作data中的数据3.基本原理通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性都指定一个getter/setter。在getter/setter内部去操作读/写data中对应的属性。--!-- 准备好一个容器--div idrooth2学校名称{{name}}/h2 !-- 若没有数据代理{{_data.name}}麻烦 --h2学校地址{{address}}/h2/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。// vm身上没有name和address但有_data// vm._data data// vm.name setter dataconst vm new Vue({ // 配置对象el:#root,data:{name:尚硅谷,address:宏福科技园}})/script
/html2 事件处理
2.1 事件的基本使用
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title事件的基本使用/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 事件的基本使用1.使用v-on:xxx 或 xxx 绑定事件其中xxx是事件名2.事件的回调需要配置在methods对象中最终会在vm上3.methods中配置的函数不要用箭头函数否则this就不是vm了4.methods中配置的函数都是被Vue所管理的函数this的指向是vm 或 组件实例对象5.clickdemo 和 clickdemo($event) 效果一致但后者可以传参--!-- 准备好一个容器--div idrooth2欢迎来到{{name}}学习/h2!-- button v-on:clickshowInfo点我提示信息/button --button clickshowInfo1点我提示信息1(不传参)/buttonbutton clickshowInfo2($event, 66)点我提示信息2(传参)/button/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。const vm new Vue({el:#root,data:{name:尚硅谷,},methods:{ // 方法没有数据代理showInfo1(event){// console.log(event.target.innerText)// console.log(this) //此处的this是vmalert(同学你好)},showInfo2(event, number){console.log(event, number)// console.log(event.target.innerText)// console.log(this) //此处的this是vmalert(同学你好)}}})/script
/html2.2 事件修饰符
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title事件修饰符/title!-- 引入Vue --script typetext/javascript src../js/vue.js/scriptstyle*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}.box1{padding: 5px;background-color: skyblue;}.box2{padding: 5px;background-color: orange;}.list{width: 200px;height: 200px;background-color: peru;overflow: auto;}li{height: 100px;}/style/headbody!-- Vue中的事件修饰符1.prevent阻止默认事件常用2.stop阻止事件冒泡常用3.once事件只触发一次常用4.capture使用事件的捕获模式5.self只有event.target是当前操作的元素时才触发事件6.passive事件的默认行为立即执行无需等待事件回调执行完毕--!-- 准备好一个容器--div idrooth2欢迎来到{{name}}学习/h2!-- 阻止默认事件(跳转页面)常用 --a hrefhttp://www.atguigu.com click.preventshowInfo点我提示信息/a!-- 阻止事件冒泡常用 --div classdemo1 clickshowInfobutton click.stopshowInfo点我提示信息/button!-- 修饰符可以连续写 --!-- a hrefhttp://www.atguigu.com click.prevent.stopshowInfo点我提示信息/a --/div!-- 事件只触发一次常用 --button click.onceshowInfo点我提示信息/button!-- 使用事件的捕获(捕获--由外向内冒泡--由内向外)模式在捕获阶段就处理事件(正常是在冒泡阶段处理事件) --div classbox1 click.captureshowMsg(1)div1 输出: 1div classbox2 clickshowMsg(2)!-- 若box1没有.capture输出2 1 --div2 输出: 1 2/div/div!-- 只有event.target是当前操作的元素时才触发事件 --div classdemo1 click.selfshowInfo!-- 若不加.self点击按钮时就冒泡了弹出两次框 --button clickshowInfo点我提示信息/button/div!-- 事件的默认行为立即执行无需等待事件回调执行完毕 --ul wheel.passivedemo classlist !-- .passive对scroll没有影响scroll本身就是先移动滚动条 --li1/lili2/lili3/lili4/li/ul/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。new Vue({el:#root,data:{name:尚硅谷},methods:{showInfo(e){alert(同学你好)console.log(e.target)},showMsg(msg){console.log(msg)},demo(){ // 正常情况下滑动滚轮 demo回调函数执行 滚动条移动加.passive后先移动滚动条for (let i 0; i 100000; i) {console.log(#)}console.log(累坏了)}}})/script
/html2.3 键盘事件
!DOCTYPE html
htmlheadmeta charsetUTF-8 /title键盘事件/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script/headbody!-- 1.Vue中常用的按键别名回车 enter删除 delete (捕获“删除”和“退格”键)退出 esc空格 space换行 tab (特殊必须配合keydown去使用)(tab能把焦点从当前元素上切走keyup就切走了)上 up下 down左 left右 right2.Vue未提供别名的按键可以使用按键原始的key值去绑定但注意要转为kebab-case短横线命名例如CapsLock是两个单词要转换为caps-lock3.系统修饰键用法特殊ctrl、alt、shift、meta(win)(1).配合keyup使用按下修饰键的同时再按下其他键随后释放其他键事件才被触发。(2).配合keydown使用正常触发事件。4.也可以使用keyCode去指定具体的按键(keydown.13)不推荐不同键盘编码不统一5.Vue.config.keyCodes.自定义键名 键码可以去定制按键别名不太推荐--!-- 准备好一个容器--div idrooth2欢迎来到{{name}}学习/h2input typetext placeholder按下回车提示输入 keydown.huicheshowInfo !-- keyup.ctrl.yctrl y时触发 --/div/bodyscript typetext/javascriptVue.config.productionTip false //阻止 vue 在启动时生成生产提示。Vue.config.keyCodes.huiche 13 //定义了一个别名按键new Vue({el:#root,data:{name:尚硅谷},methods: {showInfo(e){// console.log(e.key, e.keyCode) //按键的名字(Enter)按键的编码(13)console.log(e.target.value)}},})/script
/html
