网站模块如何添加,手机网站和微信网站的区别,公司营销型网站建设,辽宁省建设培训中心网站事件的基本使用#xff1a; 1.使用v-on#xff1a;xxx或xxx绑定事件#xff0c;其中xxx是事件名 2.事件的回调需要配置在methods对象中#xff0c;最终会在vm上 3.methods中配置的函数#xff0c;不要用箭头函数#xff01;否则this就不是vm了 4.methods中配置的函数 1.使用v-onxxx或xxx绑定事件其中xxx是事件名 2.事件的回调需要配置在methods对象中最终会在vm上 3.methods中配置的函数不要用箭头函数否则this就不是vm了 4.methods中配置的函数都是被Vue所管理的函数this指向的是vm或组件实例对象 5.click“demo”和clickdemo$event效果一致但后者可以传参 !DOCTYPE html
html langen
headmeta charsetUTF-8titleVue中数据代理/titlescript typetext/javascript src../js/vue.js/script
/head
body!-- 事件的基本使用1.使用v-onxxx或xxx绑定事件其中xxx是事件名2.事件的回调需要配置在methods对象中最终会在vm上3.methods中配置的函数不要用箭头函数否则this就不是vm了4.methods中配置的函数都是被Vue所管理的函数this指向的是vm或组件实例对象5.click“demo”和clickdemo$event效果一致但后者可以传参--div idrooth2欢迎来到{{name}}学习/h2button v-on:clickshowInfo点我提示信息(不传参)/buttonbutton clickshowInfo2(66,$event)点我提示信息(传参)/button/div/body
script typetext/javascriptVue.config.productionTipfalseconst vm new Vue({el:#root,data:{name:尚硅谷, },methods:{showInfo(){alert(同学你好!)},showInfo2(number,event){console.log(number,event)//alert(同学你好!!)}}})/script/html Vue中的事件修饰符 1.prevent阻止默认事件常用 2.stop阻止事件冒泡常用 3.once事件只触发一次常用 4.capture使用事件的捕获模式 5.self只有eventtarget是当前操作的元素是才触发事件 6.passive事件的默认行为立即执行无需等待事件回调执行完毕
!DOCTYPE html
html langen
headmeta charsetUTF-8title事件修饰符/titlescript typetext/javascript src../js/vue.js/scriptstyle*{margin-top: 20px;}.demo1{height: 50px;background-color: blue;}.box1{padding: 5px;background-color: skyblue;}.box2{padding: 5px;background-color: orange;}/style
/head
body!-- Vue中的事件修饰符1.prevent阻止默认事件常用2.stop阻止事件冒泡常用3.once事件只触发一次常用4.capture使用事件的捕获模式5.self只有eventtarget是当前操作的元素是才触发事件6.passive事件的默认行为立即执行无需等待事件回调执行完毕--div idrooth2欢迎来到{{name}}学习/h2!-- 1.prevent阻止默认事件常用 --a hrefhttp://www.atguigu.com clickshowInfo点我提示信息/a!-- 2.stop阻止事件冒泡常用 --div classdemo1 clickshowInfobutton click.stopshowInfo点我提示信息/button/div!-- 3.once事件只触发一次常用 --button click.onceshowInfo点我提示信息/button!-- 4.capture使用事件的捕获模式 --div classbox1 click.captureshowMsg(1)div1div classbox2 clickshowMsg(2)div2/div/div/div/body
script typetext/javascriptVue.config.productionTipfalseconst vm new Vue({el:#root,data:{name:尚硅谷,},methods:{showInfo(e){//e.preventDefault()e.stopPropagation()alert(同学你好)},showMsg(number){console.log(number)}}})/script/html 1.Vue中常用的按键别名 回车enter 删除delete捕获“删除”和“退格” 退出esc 空格space 换行tab 上up 下down 特殊配合keydown使用 左left 右right 2.Vue未提供别名的按键可以使用按键原始的key值去绑定弹药注意转为kebab-case短横线命名 3.系统修饰键用法特殊ctrlaltshiftmeta (1).配合keyup使用按下修饰键的同时再按下其他键随后释放其他键事件才被触发 (2).配合keydown使用正常触发事件 4.也可以使用keyCode去指定具体的按键 5。Vue.config.keyCodes 自定义键名键码可以去定制按键别名
!DOCTYPE html
html langen
headmeta charsetUTF-8title键盘事件/titlescript typetext/javascript src../js/vue.js/script
/head
body!-- 1.Vue中常用的按键别名回车enter删除delete捕获“删除”和“退格”退出esc空格space换行tab上up下down 特殊配合keydown使用左left右right2.Vue未提供别名的按键可以使用按键原始的key值去绑定弹药注意转为kebab-case短横线命名3.系统修饰键用法特殊ctrlaltshiftmeta(1).配合keyup使用按下修饰键的同时再按下其他键随后释放其他键事件才被触发(2).配合keydown使用正常触发事件4.也可以使用keyCode去指定具体的按键5。Vue.config.keyCodes 自定义键名键码可以去定制按键别名--div idrooth2欢迎来到{{name}}学习/h2input typetext placeholder按下回车提示输入 keyup.ctrlshowInfo/div/body
script typetext/javascriptVue.config.productionTipfalseconst vm new Vue({el:#root,data:{name:尚硅谷,},methods:{showInfo(e){console.log(e.target.value)}}})/script/html 计算属性 1.定义要用的属性不存在要通过已有的属性计算得来 2.原理底层借助了Object.defineproperty方法提供getter和setter 3.get函数什么时候执行 (1)初次读取时会执行一次 (2)当依赖的数据发生改变时会再次调用 4.优势与methods实现相比内部有缓存机制复用效率更高调试方便 5.备注 1.计算属性最终会出现在vm上直接读取即可 2.如果计算属性要被修改那必须写set函数去响应且set中要引起计算时依赖的数据发生改变
!DOCTYPE html
html langen
headmeta charsetUTF-8title姓名案例_计算属性实现/titlescript typetext/javascript src../js/vue.js/script
/head
body!-- 计算属性1.定义要用的属性不存在要通过已有的属性计算得来2.原理底层借助了Object.defineproperty方法提供getter和setter3.get函数什么时候执行(1)初次读取时会执行一次(2)当依赖的数据发生改变时会再次调用4.优势与methods实现相比内部有缓存机制复用效率更高调试方便5.备注1.计算属性最终会出现在vm上直接读取即可2.如果计算属性要被修改那必须写set函数去响应且set中要引起计算时依赖的数据发生改变--div idroot姓input typetext v-modelfirstNamebr名input typetext v-modellastNamebr测试input typetext v-modelxbr全名:span{{fullName}}/span/div/body
script typetext/javascriptVue.config.productionTipfalseconst vm new Vue({el:#root,data:{firstName:张,lastName:三 ,x:你好},computed:{fullName:{//get有什么作用当有人读取fullName时get被调用且返回值就作为fullName的值//get什么时候调用 1.初次读取fullName时。 2.所依赖的数据发生变化时get(){console.log(get被调用了)// console.log(this) 此处的this为vmreturn this.firstName -this.lastName},//set(value){console.log(set,value)const arrvalue.split(-)this.firstNamearr[0]this.lastNamearr[1]}}}})/script/html 监视属性watch 1.当被监视的属性变化时回调函数自动调用进行相关操作 2.监视的属性必须存在才能进行监视 3.监视的两种写法 (1)new Vue传入watch配置 (2)通过vm.$watch监视
!DOCTYPE html
html langen
headmeta charsetUTF-8title天气案例_监视属性/titlescript typetext/javascript src../js/vue.js/script
/head
body!-- 监视属性watch1.当被监视的属性变化时回调函数自动调用进行相关操作2.监视的属性必须存在才能进行监视3.监视的两种写法(1)new Vue传入watch配置(2)通过vm.$watch监视--div idrooth2今天天气{{info}}/h2button clickchangeWeather切换天气/button/div/body
script typetext/javascriptVue.config.productionTipfalseconst vm new Vue({el:#root,data:{isHot:true},computed:{info(){return this.isHot ? 炎热 : 凉爽}},methods: {changeWeather(){this.isHot!this.isHot}},// watch:{// isHot:{// immediate:true, //初始化时让handler调用一下// //handler什么时候调用 当isHot发生改变时// handler(newValue,oldValue){// console.log(isHot被修改了,newValue,oldValue)// }// }// }})vm.$watch(isHot,{handler(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue)}})/script/html 深度监视 (1).Vue中的watch默认不监测对象的内部值的改变一层 (2)配置deeptrue可以监测对象内部值的改变多层 备注 (1)Vue自身可以监测对象内部值的改变但Vue提供的watch默认不可以 (2)使用watch时根据根据的具体结构决定是否采用深度监视
!DOCTYPE html
html langen
headmeta charsetUTF-8title天气案例_监视属性/titlescript typetext/javascript src../js/vue.js/script
/head
body!-- 深度监视(1).Vue中的watch默认不监测对象的内部值的改变一层(2)配置deeptrue可以监测对象内部值的改变多层备注(1)Vue自身可以监测对象内部值的改变但Vue提供的watch默认不可以(2)使用watch时根据根据的具体结构决定是否采用深度监视--div idrooth2今天天气{{info}}/h2button clickchangeWeather切换天气/buttonhrh3a的值时{{numbers.a}}/h3button clicknumbers.a点我让a1/buttonh3b的值时{{numbers.b}}/h3button clicknumbers.b点我让b1/button/div/body
script typetext/javascriptVue.config.productionTipfalseconst vm new Vue({el:#root,data:{isHot:true,numbers:{a:1,b:2}},computed:{info(){return this.isHot ? 炎热 : 凉爽}},methods: {changeWeather(){this.isHot!this.isHot}},watch:{isHot:{//immediate:true, //初始化时让handler调用一下//handler什么时候调用 当isHot发生改变时handler(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue)}},//监视多级结构中某个属性的变化// numbers.a:{// handler(){// console.log(a被改变了)// }// }numbers:{deep:true,handler(){console.log(numbers改变了)}}}})/script/html 今天差不多到这里了感觉前端真的东西很多。
