阿里云网站开发工具,vi企业整套设计公司,工程网站模板制作教程,个人域名备案有什么风险文章目录 监视属性 watch深度监视computed 和 watch 之间的区别 绑定样式#xff08;class style#xff09;条件渲染列表渲染基本列表key的原理列表过滤列表排序收集表单中的数据 v-model过滤器#xff08;Vue3已移除#xff09; 监视属性 watch
当被监视的属性变化时class style条件渲染列表渲染基本列表key的原理列表过滤列表排序收集表单中的数据 v-model过滤器Vue3已移除 监视属性 watch
当被监视的属性变化时回调函数自动调用进行相关操作监视的属性必须存在才能进行监视监视的两种写法 a. new Vue时传入watch配置 b. 通过vm.$watch监视
bodydiv idrooth2今天天气很{{info}}/h2button clickchangeWeather切换天气/button/div/body
script typetext/javascriptVue.config.productionTip false;const 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(newValue:, newValue);console.log(oldValue:, oldValue);},}// 简写isHot(newValue,oldValue){console.log(isHot被修改了)}}})// 方法二// 正常写法vm.$watch(isHot,{immediate: true, // 初始化时让handler调用一下// handler什么时候调用当isHot发生改变时、handler(newValue, oldValue){console.log(newValue:, newValue);console.log(oldValue:, oldValue);},})// 简写vm.$watch(isHot,(newValue,oldValue){console.log(isHot被修改了,newValue)})
/script深度监视
Vue中的Watch默认不监测对象内部值的改变一层配置deep:true可以监测对象内部值改变多层备注 a. Vue自身可以监测对象内部值的改变但Vue提供的watch默认不可以 b. 使用watch时数据的具体结构决定是否采用深度监视
bodydiv idrooth2今天天气很{{info}}/h2button clickchangeWeather切换天气/buttonhrh3a的值是{{numbers.a}}/h3button clicknumbers.a点我让a1/buttonbrh3b的值是{{numbers.b}}/h3button clicknumbers.b点我让b1/button/div
/body
script typetext/javascriptVue.config.productionTip false;const vm new Vue({el: #root,data: {isHot: true,numbers:{a: 1,b: 1}},computed: {info() {return this.isHot ? 炎热 : 凉爽}},methods: {changeWeather() {this.isHot !this.isHot}},watch:{isHot: {// immediate: true, // 初始化时让handler调用一下// handler什么时候调用当isHot发生改变时、handler(newValue, oldValue){console.log(newValue:, newValue);console.log(oldValue:, oldValue);},},// 监视多级结构中某个属性的变化numbers.a:{// deep: true,handler(){console.log(a被改变了);},},// 监视多级结构中所有属性的变化numbers: {deep: true,handler() {console.log(a被改变了);},}// 简写vm.$watch(isHot,{})}})
/scriptcomputed 和 watch 之间的区别
computed能完成的功能watch都可以完成watch能完成的功能computed不一定能完成例如watch可以进行异步操作 两个重要的小原则所被Vue管理的函数最好写成普通函数这样this的指向才是vm 或 组件实例对象所有不被Vue所管理的函数定时器的回调函数、ajax的回调函数等最好写成箭头函数这样this的指向才是vm 或 组件实例对象
绑定样式class style
class样式 写法class“xxx” xxx可以是字符串、对象、数组 字符串写法适用于类名不确定要动态获取 对象写法适用于要绑定多个样式个数不确定名字也不确定 数组写法适用于要绑定多个样式个数确定名字也确定但不确定用不用style样式 :style“{fontSizexxx}” 其中xxx是动态值 :style“[a,b]” 其中a、b是样式对象
div idroot!-- 绑定class样式--字符串写法适用于样式的类名不确定需要动态绑定 --div classbasic :classmood clickchangeMood{{name}}/divbrbr!-- 绑定class样式--数组写法适用于样式个数不确定、类名也不确定 --div classbasic :classarr clickchangeMood{{name}}/div brbr!-- 绑定class样式--对象写法适用于要绑定的样式确定类名也确定但要动态决定用不用 --div classbasic :classarr clickchangeMood{{name}}/divbrbr!-- 绑定style样式对象写法 --div classbasic :stylestyleObj{{name}}/divbrbr!-- 绑定style样式数组写法 --div classbasic :stylestyleArr{{name}}/div
/divscript typetext/javascriptVue.config.productionTip false; // 阻止vue在启动时自动生产提示new Vue({el: #root,data: {name: 檀健次,mood: normal,arr: [attjc1, attjc2, attjc3],classObj: {attjc1: false,attjc2: true,attjc3: true},styleObj: {color: white,backgroundColor: orange},styleArr: [{fontSize: 30px}]},methods: {changeMood() {// this.mood happyconst arr [happy, sad, normal]this.mood arr[Math.floor(Math.random() * arr.length)]}}})
/script条件渲染
v-if 写法 (1) v-if“表达式” (2) v-else-if“表达式” (3) v-else“表达式” 适用于切换频率较低的场景 特点不展示的DOM元素直接被移除 注意v-if可以和:v-else-is、v-else一起使用但要求结构不能被打断v-show 写法v-show“表达式” 适用于切换频率较高的场景 特点不展示的DOM元素未被移除仅仅是使用样式隐藏掉备注使用v-if的时候元素可能无法获取到而使用v-show一定可以获取到
div idrooth2当前值是{{n}}/h2button clickn点我n1/button!-- 使用v-show做条件渲染 --!-- h2 v-showtrue要见{{name}}/h2h2 v-show1 1要见{{name}}/h2 --!-- 使用v-if做条件渲染 --!-- h2 v-iffalse要见{{name}}/h2h2 v-if1 1要见{{name}}/h2 --!-- v-else-if 和 v-else --div v-ifn 1tjc/divdiv v-else-ifn 2txd/divdiv v-else-ifn 3tlq/divdiv v-else哈哈/div
/divscript typetext/javascriptVue.config.productionTip false; // 阻止vue在启动时自动生产提示new Vue({el: #root,data: {name: 檀健次,n: 1}})
/script列表渲染
基本列表
v-for指令
用于展示列表数据语法v-for“(itemindex) in xxx” :key“yyy”可遍历数组、对象、字符串用的很少、指定次数用的很少
div idroot!-- 遍历数组 --h2人员列表遍历数组/h2ulli v-for(p,index) in persons :keyindex{{p.name}}--{{p.age}}/li/ul!-- 遍历对象 --h2汽车信息/h2ulli v-for(value,k) of car :keyk{{value}}--{{k}}/li/ul!-- 遍历指定次数 --h2循环指定次数/h2ulli v-forn in 5 :keyn{{n}}/li/ul
/divscript typetext/javascriptVue.config.productionTip false; // 阻止vue在启动时自动生产提示new Vue({el: #root,data: {persons:[{id: 001,name: 张三,age: 18},{id: 002,name: 李四,age: 19},{id: 003,name: 王五,age: 20}],car:{name: 奔驰,price: 100万,color: 黑色}}})
/scriptkey的原理 虚拟DOM中key的作用 key是虚拟DOM对象的标识当数据发生变化时Vue会根据【新数据】生成【新的虚拟DOM】 随后Vue进行【新虚拟DOM】与【旧DOM】的差异比较比较规则如下对比规则 a. 旧虚拟DOM中内容没变直接使用之前的真实DOM ⅰ. 若虚拟DOM中内容没变直接使用之前的真实DOM ⅱ. 若虚拟DOM中内容变了则生成新的真实DOM随后替换掉页面中之前的真实DOM b. 旧虚拟DOM中未找到与新虚拟DOM相同key创建新的真实DOM随后渲染到页面用index作为key可能会引发的问题 a. 若对数据进行逆序添加、逆序删除等破坏顺序操作 b. 如果结构中还包含输入类DOM会产生错误DOM更新 界面有问题开发中如何选择key a. 最好使用每条数据的唯一标识作为key比如id、手机号、身份证号、学号等唯一值 b. 如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作仅用于渲染列表用于展示使用index作为key是没有问题的
列表过滤
div idroot!-- 遍历数组 --h2人员列表/h2input typetext placeholder请输入名字 name id v-modelkeyWordulli v-for(p,index) in filPersons :keyindex{{p.name}}--{{p.age}}/li/ul
/divscript typetext/javascriptVue.config.productionTip false; // 阻止vue在启动时自动生产提示// 用watch实现new Vue({el: #root,data: {keyWord: ,persons: [{ id: 001, name: 檀健次, age: 18 }, { id: 002, name: 赵丽颖, age: 19 }, { id: 003, name: 成毅, age: 20 }],filPersons: []},watch: {keyWord: {immediate: true,handler(val) {this.filPersons this.persons.filter((p) {return p.name.indexOf(val) ! -1})}}}})// 用computed实现new Vue({el: #root,data: {keyWord: ,persons: [{ id: 001, name: 檀健次, age: 18 }, { id: 002, name: 赵丽颖, age: 19 }, { id: 003, name: 成毅, age: 20 }]},computed:{filPersons(){return this.persons.filter((p) {return p.name.indexOf(this.keyWord) ! -1})}}})
/script列表排序
div idroot!-- 遍历数组 --h2人员列表/h2input typetext placeholder请输入名字 name id v-modelkeyWordbutton clicksortType 2年龄升序/buttonbutton clicksortType 1年龄降序/buttonbutton clicksortType 0原顺序/buttonulli v-for(p,index) in filPersons :keyindex{{p.name}}--{{p.age}}/li/ul
/divscript typetext/javascriptVue.config.productionTip false; // 阻止vue在启动时自动生产提示new Vue({el: #root,data: {keyWord: ,sortType: 0, // 0 原顺序 1 降序 2 升序persons: [{ id: 001, name: 檀健次, age: 18 }, { id: 002, name: 檀小呆, age: 2 }, { id: 003, name: 赵丽颖, age: 19 }, { id: 004, name: 成毅, age: 20 }, { id: 005, name: 虞书欣, age: 20 }]},computed: {filPersons() {const arr this.persons.filter((p) {return p.name.indexOf(this.keyWord) ! -1})if (this.sortType) {arr.sort((a, b) {return this.sortType 1 ? b.age - a.age : a.age - b.age})}return arr}}})
/script如何监测数组中的数据 数组更新检测 通过包裹数组更新元素的方法实现本质就是做了两件事 a. 调用原生对应的方法对数组进行更新 b. 重新解析模板进而更新页面 没有get、set方法不能直接操作数组通过索引值等修改Vue不起效 可通过七个方法修改 1). push 向数组的末尾添加一个或多个元素并返回新的长度 2). pop 向数组的末尾添加一个或多个元素并返回新的长度 3). shift 用于把数组的第一个元素从其中删除并返回第一个元素的值。改变数组的长度 4). unshift 向数组的开头添加一个或更多元素并返回新的长度。该方法将改变数组的数目 5). splice 用于添加或删除数组中的元素 6). sort 用于对数组的元素进行排序。排序顺序可以是字母或数字并按升序或降序。默认排序顺序为按字母升序 注意 使用数字排序你必须通过一个函数作为参数来调用。函数指定数字是按照升序还是降序排列。 7). reverse 颠倒数组中元素的顺序 原理上述七个方法和原来数组的七个方法有所不同是Vue继承后重新包装数组中长用的方法 如果不是用上述方法也可以用Vue.set()和vm.$set() Vue.set() 返回值设置的值 用法 像响应式对象中添加一个property并确保这个新property同样是响应式的且触发视图更新。它必须用于响应式对象上添加新property,因为Vue无法探测普通的新增property比如 this.myObject.newProperty hi 注意对象不能是 Vue 实例或者 Vue 实例的根数据对象。
div idrooth1学校信息/h1h2学校名称{{name}}/h2h2学校地址{{address}}/h2hrh1学生信息/h1button clickaddSex添加一个性别属性/buttonh2姓名{{student.name}}/h2h2 v-ifstudent.sex性别{{student.sex}}/h2h2年龄真实{{student.age.rAge}},对外{{student.age.sAge}}/h2h2朋友/h2ulli v-for(f,index) in student.friends :keyindex{{f.name}}--{{f.age}}/li/ul
/divscript typetext/javascriptVue.config.productionTip false; // 阻止vue在启动时自动生产提示new Vue({el: #root,data: {name: 河南科技学院,address: 新乡,student: {name: 张三,// sex: 男,age: {rAge: 18,sAge: 19},friends: [{ name: 李四, age: 20 },{ name: 王五, age: 21 },{ name: 赵六, age: 22 }]}},methods: {addSex(){Vue.set(this.student, sex,女 )}}})
/script数据劫持 指的是在访问或者修改对象的某个属性时通过一段代码拦截这个行为进行额外的操作或者修改返回结果。 比较典型的是Object.defineProperty()和 ES2016 中新增的Proxy对象。数据劫持最著名的应用当属双向绑定这也是一个已经被讨论烂了的面试必考题。例如 Vue 2.x 使用的是Object.defineProperty()(Vue 在 3.x 版本之后改用 Proxy 进行实现)。大合集
div idrooth1学校信息/h1button clickstudent.age年龄1岁/buttonbrbutton clickaddSex添加性别属性默认值女/buttonbrbutton clickstudent.sex 未知修改性别/buttonbrbutton clickaddFriend在列表首位添加朋友/buttonbrbutton clickupdateFriendName修改第一个朋友的名字为张三/buttonbrbutton clickupdateHobby修改第一个爱好为开车/buttonbrh2学校名称{{name}}/h2h2学校地址{{address}}/h2hrh1学生信息/h1h2姓名{{student.name}}/h2h2年龄{{student.age}}/h2h2 v-ifstudent.sex性别{{student.sex}}/h2ulli v-foritem in student.hobby :keyitem{{item}}/li/ulh2朋友/h2ulli v-for(f,index) in student.friends :keyindex{{f.name}}--{{f.age}}/li/ul
/divscript typetext/javascriptVue.config.productionTip false; // 阻止vue在启动时自动生产提示const vm new Vue({el: #root,data: {name: 河南科技学院,address: 新乡,student: {name: 张三,// sex: 男,age: 18,hobby: [吃饭, 睡觉, 打游戏],friends: [{ name: 李四, age: 20 },{ name: 王五, age: 21 },{ name: 赵六, age: 22 }]}},methods: {addSex(){Vue.set(this.student, sex,女 )},addFriend(){this.student.friends.unshift({name:张三,age:18})},updateFriendName(){this.student.friends[0].name 张三 // this.student.friends[0].name是对象},updateHobby(){this.student.hobby.splice(0,1,开车)// Vue.set(this.student.hobby,0,开车)}}})
/script收集表单中的数据 v-model
则v-model收集的是value值用户输入的就是value值则v-model收集的是value值且要给标签配置value值
a. 没有配置input的value属性那么收集的就是checked勾选 or 未勾选是布尔值 b. 配置input的value属性 ⅰ. v-model的初始值是非数组那么收集的就是checked勾选 or 未勾选是布尔值 ⅱ. v-model的初始值是数组那么收集的就是value组成的数组 备注v-model的三个修饰符 lazy失去焦点再收集数据 number输入字符串转为有效的数字 trim输入首尾空格过滤
bodydiv idrootform账号input typetext v-model.trimusernamebr/br密码input typepassword v-modelpasswordbr/br年龄input typenumber v-model.numberagebrbr性别input typeradio namesex v-modelsex value男男input typeradio namesex v-modelsex value女女brbr爱好input typecheckbox v-modelhobby value吃饭吃饭input typecheckbox v-modelhobby value睡觉睡觉input typecheckbox v-modelhobby value打游戏打游戏brbr所属校区select name idoption value请选择校区/option!-- option v-for(city,index) in citys :keyindex :valuecity{{city}}/option --option valuebeijing北京/optionoption valueshanghai上海/optionoption valueguangzhou广州/optionoption valueshenzhen深圳/option/selectbrbrbutton click.preventsubmit提交/button/form/div
/bodyscript typetext/javascriptVue.config.productionTip false;const vm new Vue({el: #root,data: {username: ,password: ,age: ,sex: ,hobby: [],citys: beijing},methods: {submit() {console.log(this.username, this.password, this.sex, this.hobby);}}})
/script过滤器Vue3已移除
定义:对要显示的数据进行特定格式化后再显示适用于一些简单逻辑的处理 语法
注册过滤器Vue.filter(name,callback) 或 new Vue { filters:{} }使用过滤器{{xxx | 过滤器名}} 或 v-bind:属性 “xxx | 过滤器名” 备注过滤器也可以接收额外参数、多个过滤器也可以串联并没有改变原本的数据是产生新的对应的数据
