萍乡网站建设行吗,做百度联盟用什么做网站,网站建设要做哪些工作,织梦模板修改网站颜色7、事件处理
7.1、事件的基本处理
事件的使用 使用v-on#xff1a;xxx或者用xxx绑定事件#xff0c;其中XXX是事件名事件的回调需要配置在methods对象中#xff0c;最终出现在VM上methods配置的函数#xff0c;不需要箭头函数 div idrooth1…7、事件处理
7.1、事件的基本处理
事件的使用 使用v-onxxx或者用xxx绑定事件其中XXX是事件名事件的回调需要配置在methods对象中最终出现在VM上methods配置的函数不需要箭头函数 div idrooth1{{hi}}/h1!-- 绑定事件 v-on:click 当被点击的时候 --button v-on:clickclick点我/button!-- 两种写法都可以下面是上面的缩写 --button clickclick点我/button/divscriptnew Vue({el:#root,data:{hi:hi},//方法体methods:{click(){alert(hellword)}}})/script7.2、事件修饰符 在js中提供的事件修饰符vue也给我们提供了 常见的有 .prevent、.stop、.once .prevent 阻止默认事件.stop 阻止事件冒泡.once 事件只触发一次.capture 使用事件的捕获模式.self 只有event.target是当前元素时才触发.passive 事件的默认行为立即执行无需等回调修饰符key连续写 如 click.prevent.stop div idroot!-- 阻止默认事件 --a hrefhttp://www.baidu.com click.preventshow跳转/a!-- 阻止冒泡 --div clickshowbutton click.stopshow阻止冒泡/button/div!-- 只触发一次事件 --button click.onceshowOnce/button/divscriptnew Vue({el:#root,methods:{show(e){alert(hello)}}})/script7.3、键盘事件
vue中的键盘事件 keydown.xxx 或者keyup.xxxvue中提供的常用的键盘别名 enter回车键delete删除键指删除和退格俩个键esc退出键space空格tab换行 必须配合keydown去使用up 上down下left左right右 未提供的别名按键也可以通过原始的key值去绑定但要注意像CapsLock转换大小写键要写成 caps-lock全小写加短横线系统特殊的键位 ctrl、alt、shift、win键等 如果配合keyup使用 必须按下修饰键的同时加上一个键位 如 同时按下ctrlA键位才会触发也可以 keyup.crtl.y 这样 只有按下ctrly 键位才会触发配合keydown键可正常使用 自定义按键Vue.config.keyCodes.自定义的键位 键码
C:\Users\Administrator\Desktop\vueB\vue2\08_计算属性\1、插值语法实现.htmlx div idroot !-- 通过enter键触发事件拿值 -- input typetext placeholder提示 keyup.enter show /div script new Vue({ el:#root, methods:{ show(e){ //拿当前触发元素的值 console.log(e.target.value); } } }) /script8、计算属性
效果 8.1、使用插值语法实现 div idroot姓input typetext v-modellastNamebr名input typetext v-modelfirstNamebr!-- 通过拼接的方式 --全名:span{{lastName}}{{firstName}}/span/divscriptnew Vue({el:#root,data:{lastName:z,firstName:y,}})/script只能进行简单的计算不能太复杂 8.2、methods方法实现 div idroot姓input typetext v-modellastNamebr名input typetext v-modelfirstNamebr!-- 通过methods方法的方式 --!-- 这里必须加 否则会不会有值只会打印整个方法 --全名:span{{fullName()}}/spanbr全名:span{{fullName()}}/spanbr全名:span{{fullName()}}/spanbr全名:span{{fullName()}}/span/divscriptnew Vue({el:#root,data:{lastName:z,firstName:y,},methods:{fullName(){console.log(调用了);return this.lastNamethis.firstName}}})/script8.3、computed计算属性实现
计算属性 定义要用的属性都是通过已经有的属性计算得来。原理底层借助了Object.defineProperty方法提供getter和setter优势与methods实现相比内部有缓存机制效率更高注意事项 如果计算属性要被修改那必须用set去响应修改并要引起被计算属性的值发生变化 div idroot姓input typetext v-modellastNamebr名input typetext v-modelfirstNamebr全名:span{{fullName}}/spanbr全名:span{{fullName}}/spanbr全名:span{{fullName}}/spanbr全名:span{{fullName}}/spanbr/divscriptnew Vue({el:#root,data:{lastName:z,firstName:y,},computed:{fullName:{get(){// 这里为了set方法方便使用空格连接console.log(被调用);return this.lastName this.firstName},set(){const arr value.split( )this.lastName arr[0]this.firstName arr[1]}}}})/script9、监视属性
9.1、基础监视
监视属性watch 用法当监视的属性发生变化时自动调用进行相关参数可以监听 计算属性注意事项 监视属性必须存在才能监视。不存在控制台不会提示 两种写法 通过new Vue时传入watch配置用于已经知道需要监听的属性通过vm.$watch监视用于开始并不知道需要监视时 div idrooth1数字为{{info}}/h1button clickchange改变数字/button/divscriptconst vm new Vue({el:#root,data:{value:true},computed:{info(){return this.value ? 1:2}},methods:{//取相反change(){this.value !this.value}},// 第一种写法// watch:{// value:{// //初始化时handler被调用一次// immediate:true,// //当监听到value值被改变时 handler被调用// handler(newValue,oldValue){// console.log(value被修改了newValue oldValue);// }// }// }})//第二种写法vm.$watch(value,{immediate:true,handler(newValue,oldValue){console.log(value被修改了newValue oldValue);}})/script9.2、深度监视 在vue中watch方法默认不会监视多层级的值 vue中给我们提供了方法deep vue自身可以监控到内部值的改变但是vue提供的watch默认不可以需要根据数据具体结构来决定是否开启deep div idrooth1数字为{{value.a}}/h1button clickvalue.aadd/button/divscriptconst vm new Vue({el:#root,data:{value:{a:1,b:2,}},watch:{value:{//开启深度监测deep:true,immediate:true,handler(){console.log(value被修改了);}}}})/script9.3、watch与computed区别
我们拿一个小案例来举例 computed版本 watch版本 从代码层面来看两者对比conputed的代码更精简但如果涉及到异步操作时只有watch能够实现 如让它延迟一秒后再显示修改的全名 这里涉及到两个小原则 只要是被Vue管理的函数最好都写成普通函数这样this指向的才是组件实例对象不被vue所管理的函数定时器回调函数、ajax回调函数最好写成箭头函数这样this才能指向组件实例对象
10、绑定样式
10.1、绑定class样式
绑定class样式 字符串写法 用于样式类名不确定需要动态指定 数组写法 用于要绑定的样式个数不确定、名字也不确定 对象写法 用于要绑定的样式个数确定、名字也确定但要动态决定用不用 字符串写法 通过改变mood的值来实现切换 数组的写法 方便以后管理样式如果不需要有些样式可通过数组形式删除 对象写法 动态的决定样式是否开启 10.2、内联style样式写法
内联样式写法 style“{fontSizexxx}”其中xxx是动态值也可以写成对象形式 以对象的形式存储方便修改 11、条件渲染 条件渲染 v-if 与JavaScript中的if作用相同 写法v-if”表达式“ v-else-if”表达式“ v-else”表达式“ 适用于用于切换频率较低的场景 特点不展示的Dom元素直接被删除 三个表达式可以连用但是结构必须在一起不能拆分 v-show 写法v-show“表达式” 适用于切换频率较高的 场景特点不展示的Dom元素只会被display隐藏 注意事项 v-if被触发时会导致元素直接被删除获取不到元素
11.1、v-if的使用 div idroot!-- v-if条件渲染 --h2 v-ifn11/h2 h2 v-else-ifn22/h2 h2 v-elsen33/h2 button clicknv-if测试/button/divscriptnew Vue({el:#root,data:{n:0}})/script可以看到以前的Dom元素随着切换会被移除 11.2、v-show的使用 div idroot!-- v-if条件渲染 --h1 v-showfalse1/h1h2 v-show112/h2 /divscriptnew Vue({el:#root})/script这里可以看到v-show等于false时元素没有被移除 12、列表渲染
12.1、v-for指令
v-for指令 用于展示列表数据语法v-for“(p,index) of persons” :key“index”可遍历数组、对象、字符串、指定次数 :key的作用 虚拟Dom中的key作用 作为虚拟Dom中的对象标识当数据发生变化会生成一个新的虚拟Dom随后新旧Dom进行一个比对 新旧Dom比对规则 若旧Dom找到与新Dom相同的Key虚拟Dom中内容没变直接使用前面的真实Dom若发生变化则生成新的真实Dom替换旧的 div idroot!-- 遍历数组 --h2数组/h2ul!-- 这里必须直接列表的Key 否则vue会把整个Li当成一个 会报错 --li v-for(p,index) in persons :keyindex{{p.name}}-{{p.age}}/li/ul!-- 遍历数组 --h2数组/h2ulli v-for(p,index) in student :keyindex{{p}}--{{index}}/li/ul/divscriptnew Vue({el:#root,data:{persons:[{id:01,name:zy,age:18},{id:02,name:zy2,age:19},{id:03,name:zy3,age:20},],student:{name:zy,age:18}}})/script这里如果用index索引作为key我们在最前面追加一个数据的时候会导致vue 复用前面的input 会出现下面的结果 推荐使用 p.id作为key 12.2、列表模糊查找过滤案例
先看效果 watch监听实现 div idrooth2模糊查找案例/h2!-- 建立一个输入框 取值用于模糊查找 --input typetext placeholder输入要查找的名字 v-modellikeNameulli v-for(p,index) in newPersons :keyp.id{{p.name}}-{{p.age}}/li/ul/divscriptnew Vue({el: #root,data: {persons: [{ id: 01, name: 周冬雨, age: 18, sex: woman },{ id: 02, name: 马冬梅, age: 19, sex: woman },{ id: 03, name: 周杰伦, age: 21, sex: man },{ id: 04, name: 马东伦, age: 20, sex: man },],likeName:,//不对原数组进行操作newPersons: []},//监听事件watch: {likeName:{//初始化调用一次 使indexOf比较为空刷新所有数据immediate:true,handler(val){//过滤数据this.newPersons this.persons.filter((p){//通过indexOf判断搜索的值是否与列表匹配如果不匹配等于-1return p.name.indexOf(val) ! -1})}}}})/script2、computed计算实现
div idrooth2模糊查找案例/h2!-- 建立一个输入框 取值用于模糊查找 --input typetext placeholder输入要查找的名字 v-modellikeNameulli v-for(p,index) in newPersons :keyp.id{{p.name}}-{{p.age}}/li/ul
/div
scriptnew Vue({el: #root,data: {persons: [{ id: 01, name: 周冬雨, age: 18, sex: woman },{ id: 02, name: 马冬梅, age: 19, sex: woman },{ id: 03, name: 周杰伦, age: 21, sex: man },{ id: 04, name: 马东伦, age: 20, sex: man },],likeName:,},computed:{newPersons(){return this.persons.filter((p){//通过indexOf判断搜索的值是否与列表匹配如果不匹配等于-1return p.name.indexOf(this.likeName) ! -1})}}})
/script12.3、排序列表案例
效果 代码实现 div idrooth2模糊查找案例升降序/h2!-- 建立一个输入框 取值用于模糊查找 --input typetext placeholder输入要查找的名字 v-modellikeNamebutton clickisup1升序/buttonbutton clickisup2降序/buttonbutton clickisup0原顺序/buttonulli v-for(p,index) in newPersons :keyp.id{{p.name}}-{{p.age}}/li/ul/divscriptnew Vue({el: #root,data: {persons: [{ id: 01, name: 周冬雨, age: 20, sex: woman },{ id: 02, name: 马冬梅, age: 30, sex: woman },{ id: 03, name: 周杰伦, age: 21, sex: man },{ id: 04, name: 马东伦, age: 40, sex: man },],likeName: ,//判断为升序还是降序 1为升 2为降 0为与原来的顺序isup: 0},computed: {newPersons() {const arr this.persons.filter((p) {//通过indexOf判断搜索的值是否与列表匹配如果不匹配等于-1return p.name.indexOf(this.likeName) ! -1})//判断升降序if (this.isup 0) {return arr}else{//如果要升降序利用三元表达式进行操作arr.sort((a, b) {return this.isup 1 ? a.age-b.age : b.age-a.age})}return arr}}})/script13、vue监测数据的原理 原理 vue会监视data中所有层次的数据 如何监测对象中的数据 通过setter事件监视且要在newVue时就传入要监测的数据 在对象后追加的属性Vue默认不做响应式处理 如需给后添加的属性做响应式需要使用以下API: Vue.set(target,propertyName/index,value) vm.$ser(target,propertyName/index,value) 如何监测数组中的数据? 通过包裹数组更新元素的方法实现本质就是做了两件事:调用原生对应的方法对数组进行更新重新解析模板进而更新页面 在Vue修改数组中的某个元素需要用到以下方法: 使用这些API:push(),pop(),shift(),unshift(),splice(),sort(),erverse()Vue.set()或vm.$set 注意Vue.set: 不允许修改vue的根数据或者vue实例只能给data里面的对象追加属性
13.1、例子 更新一个人的信息 !-- html --
div idrooth1更新信息的一个问题/h1ulli v-for(p,index) in persons :keyp.id{{p.name}}-{{p.age}}/li/ul!-- 只能更新第一条的信息 --button clickupData点我更新一条信息/button
/div!-- vue --
scriptconst vm new Vue({el:#root,data:{persons: [{ id: 01, name: 周冬雨, age: 20, sex: woman },{ id: 02, name: 马冬梅, age: 30, sex: woman },{ id: 03, name: 周杰伦, age: 21, sex: man },{ id: 04, name: 马东伦, age: 40, sex: man },],},methods:{//更新第一条信息upData(){this.persons[0] { id: 01, name: zy, age: 30, sex: man }}}})
/script 当我触发点击事件时可以发现前后的对比 虽然我们修改了数据但是vue并没有监测到就不会渲染到页面上。同时我们发现通过我们直接赋值的这种方式将第一个的对象属性的get和set方法没有了。 那我们通过下面这种方式操作对象的属性在进行一次数据的修改 我们可以看到数据成功的渲染到了页面上同时我们可以看到对象的方法并没有被删除其背后的原理就是Vue底层利用了Object.defineProperty 做数据代理通过get和set函数进行修改和解析封装成Observer方法遍历data的属性并对属性添加getter和setter。
而我们用的persons[0].name是对象中的属性所以会触发监听重新渲染页面。
13.2、简单实现一个vue监测数据的原理 scriptlet data {name:zy,age:18}const obs new Observer(data)console.log(obs);//new 一个vm实例对象let vm {}vm._data data obsfunction Observer(obj) {//汇总对象中的所有属性形成一个数组const keys Object.keys(obj)console.log(keys);//遍历keys.forEach((item){//这里this指向的是Observer的实例对象Object.defineProperty(this,item,{get(){//返回对应属性身上的值return obj[item]},set(val){//修改对应属性身上的值obj[item]val}})})}/script13.3、vue.set方法
当我们的data已经写好但后续需要添加一个对象时vue给我们提供了一个set方法给我们使用。达到重新渲染的效果。
例子:Vue.set(this.student,‘sex’,‘男’) 或者 this.$Vuethis.student,‘sex’,‘男’ 注意事项 不允许修改vue的根数据或者vue实例只能给data里面的对象追加属性 如图所示我们需要向红色框添加一个性别属性 div idrootbutton clickaddSex添加一个性别默认值为男/buttonh2姓名{{student.name}}/h2h2年龄{{student.age}}/h2!-- 这里要注意 如果值为undefind vue不会渲染也就是开始data.student中没有sex这个属性 --h2性别:{{student.sex}}/h2/divscriptnew Vue({el:#root,data:{student:{name:zy,age:1}},methods:{addSex(){Vue.set(this.student,sex,男)}}})/script13.4、利用vue提供的方法做例1 -更新一个人的信息
在开头我们直接利用 this.persons[0] { id: 01, name: zy, age: 30, sex: man } 修改数组不会奏效同时页面也不会渲染。在vue中给我们提供了方法 也就是说我们需要变更数组的属性值时需要用到上面的七个方法或者利用Vue.set去修改 this.persons.splice(0,1,{ id: 01, name: zy, age: 30, sex: man }) 14、收集表单数据
收集表单数据 若则v-model收集的是value值为用户输入的value值若则v-model收集的是value值并且要给标签配置value值若 没有给input配置value则收集起来的就是checked布尔值配置了input的value值 v-model的初始值不是为非数组形式那么还是为checked如果为数组那么就收集数组组成的值 v-model的三个修饰符 用法v-model.lazylazy失去焦点在收集number输入的字符串转为有效的数字trim去掉首尾空格
14.1、案例—收集表单数据 div idrootform!-- 限制值为数字传入的值也是数字--账号input typenumber v-model.number.trimaccountbr密码input typepassword v-modelpasswordbr!-- 分组归为一类辨别性别 --性别男input typeradio value1 namesex v-modelsex女input typeradio value0 namesex v-modelsex br!-- 用数组形式存储 --爱好: 吃饭input typecheckbox value吃饭v-modelhobby睡觉input typecheckbox value睡觉v-modelhobby打游戏input typecheckbox value打游戏v-modelhobbybr所属校区select v-modelschooloption value请输入你的校区/optionoption value第一区第一区/optionoption value第二区第二区/option/selectbr其他信息:textarea v-model.lazyother/textarea brinput typecheckbox v-modelagree阅读并接收a hrefwww.baidu.com《用户协议》/abrbutton提交/button/form/div scriptnew Vue({el:#root,data:{account:,password:,sex:,hobby:[],school:,other:,agree:}})/script
