一、昨日内容回顾前端经历了服务端模板渲染、Ajax 异步请求、前后端分离和工程化的发展过程。Vue、React 等框架通过组件化和响应式机制让开发者可以围绕数据组织页面而不必频繁手动操作 DOM。本篇继续学习 Vue 2 常见语法并补充 ES6 对象写法。原文使用 Vue 2 CDN 示例如果项目使用 Vue 3启动方式需要改为createApp()不能直接混用两套 API。二、ES6 对象简写ES6ECMAScript 2015为 JavaScript 增加了对象属性简写和方法简写。对象属性名与变量名相同时可以只写一次对象中的函数也可以省略function关键字。constnamezhangsanconstage19constwife{name:小丽,hobby:跳舞}constperson{name,// 等价于 name: nameage,// 等价于 age: agewife,introduce(){// 等价于 introduce: function () { ... }return${this.name}今年${this.age}岁}}console.log(person.introduce())这里name和age是基本类型值wife保存的是对象引用。修改wife.hobby会影响person.wife指向的同一个对象这也是值类型和引用类型的区别之一。三、uni-app 简介uni-app 以 Vue 语法为基础目标是使用一套代码构建 Web、Android、iOS 和各种小程序。它能减少重复开发但不同平台的权限、组件和性能仍有差异发布前必须在目标平台测试。常见开发流程如下使用 HBuilderX 或其他支持的工具创建项目。在浏览器中运行快速验证页面和逻辑。连接 Android 真机时开启开发者模式和 USB 调试并准备 Android SDK 的adb工具。根据平台要求进行本地构建或云端打包。四、定时切换图片练习这个例子综合使用了属性绑定、点击事件、定时器和数组随机取值。开始时没有定时器点击按钮后创建再次点击则清除定时器避免重复创建多个定时任务。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title随机图片切换/titlescriptsrc./vue2/vue.js/script/headbodydividappimg:srccurrentImagealt随机图片width400height400brbuttonclicktoggleTimer开始 / 停止/button/divscriptnewVue({el:#app,data:{currentImage:./img/1.jpg,imageUrls:[./img/1.jpg,./img/2.jpg,./img/3.jpg],timerId:null},methods:{toggleTimer(){if(this.timerId!null){clearInterval(this.timerId)this.timerIdnullreturn}this.timerIdsetInterval((){constindexMath.floor(Math.random()*this.imageUrls.length)this.currentImagethis.imageUrls[index]},1000)}}})/script/body/htmlMath.random()产生[0, 1)的小数乘以数组长度后用Math.floor()得到合法下标。箭头函数可以保留 Vue 方法中的this指向。真实组件销毁时还应清理定时器避免内存泄漏。五、class 与 style 绑定class和style也是 HTML 属性但经常需要根据状态动态变化因此 Vue 提供了更灵活的绑定形式。:class可以接收字符串、数组或对象:style可以接收 CSS 字符串、对象或对象数组。dividappdiv:classclassObject根据状态切换 class/divbuttonclickchangeClass切换颜色/buttondiv:stylestyleObject根据状态切换 style/divbuttonclickchangeStyle切换背景色/button/divscriptnewVue({el:#app,data:{classObject:{box:true,red:true,green:false},styleObject:{width:200px,height:80px,backgroundColor:red}},methods:{changeClass(){this.classObject.red!this.classObject.redthis.classObject.green!this.classObject.green},changeStyle(){this.styleObject.backgroundColorblack}}})/script.box{padding:20px;font-size:24px;}.red{background-color:red;}.green{background-color:green;}CSS 属性在 JavaScript 对象中通常使用驼峰写法例如backgroundColor也可以写成background-color。复杂项目中可以把样式状态拆成计算属性避免模板表达式过长。六、条件渲染v-if、v-else-if和v-else必须连续使用Vue 会根据条件决定创建哪一段 DOM。下面根据输入成绩显示不同等级dividapplabel成绩inputtypenumberv-model.numberscoremin0max100/labelpv-ifscore 90 score 100优秀/ppv-else-ifscore 80良好/ppv-else-ifscore 60及格/ppv-else不及格或成绩无效/p/divv-model.number会尽量把输入值转换为数字避免字符串和数字比较时产生意外结果。v-show只切换 CSS适合频繁显示/隐藏v-if会创建或销毁元素适合条件不经常变化的内容。七、列表渲染与 keyv-for可以遍历数组、对象、字符串和整数范围。数组渲染时建议提供稳定且唯一的:key帮助 Vue 根据节点身份复用和更新 DOM。不要把数组下标作为会排序、删除的列表的唯一 key。dividappulliv-for(item, index) in girls:keyitem.id{{ index 1 }}. {{ item.name }}/li/ulpv-for(value, key) in user:keykey{{ key }}{{ value }}/p/divscriptnewVue({el:#app,data:{girls:[{id:1,name:小王},{id:2,name:小李}],user:{city:上海,age:19}}})/scriptVue 会通过虚拟 DOM 和 diff 算法比较新旧节点。key不是为了“让循环更快”而随意填写的数字而是用来表示每个节点稳定身份的标识。1. 购物车列表dividapppv-ifgoods.length 0购物车是空的/ptablev-elsetrth商品/thth价格/thth数量/th/trtrv-foritem in goods:keyitem.idtd{{ item.name }}/tdtd{{ item.price }} 元/tdtd{{ item.count }}/td/tr/table/div表格中使用v-if和v-else可以处理空列表状态。价格在数据层最好保存为数字展示时再添加货币单位便于后续求和和格式化。2. Vue 2 的数组和对象响应式Vue 2 基于Object.defineProperty对后来新增的对象属性和部分数组下标变化无法自动检测。可以使用Vue.set()或者使用 Vue 能够拦截的数组变更方法// 新增对象属性Vue.set(this.user,phone,13800000000)// 修改数组指定下标Vue.set(this.goods,0,newItem)// Vue 2 能检测到的变更方法this.goods.push(item)this.goods.pop()this.goods.shift()this.goods.unshift(item)this.goods.splice(0,1)this.goods.sort(compareFn)this.goods.reverse()filter()、map()、slice()和concat()不会原地修改数组但它们会返回新数组。把返回值重新赋给响应式数组即可触发更新this.goodsthis.goods.filter(itemitem.count0)八、输入事件与过滤输入框常见事件包括input每次输入触发、change值改变并完成提交/失焦时触发、focus获得焦点和blur失去焦点。通常配合v-model读取最新值。dividappinputv-modelkeywordinputhandleInputplaceholder搜索关键词p当前关键词{{ keyword }}/pulliv-foritem in filteredWords:keyitem{{ item }}/li/ul/divscriptnewVue({el:#app,data:{keyword:,words:[a,at,atom,atommon,be,beyond,cs,csrf],filteredWords:[]},created(){this.filteredWordsthis.words},methods:{handleInput(){constkeywordthis.keyword.trim().toLowerCase()this.filteredWordsthis.words.filter(wordword.toLowerCase().includes(keyword))}}})/scriptfilter()会返回满足条件的新数组原始words不会被破坏。includes()比手写indexOf(...) 0更直观如果需要兼容较旧浏览器也可以继续使用indexOf。九、v-model 双向绑定v-model是对“属性绑定 输入事件监听”的语法糖。数据变化会更新控件用户输入也会更新数据。它常用于文本框、密码框、单选框、复选框和下拉框。dividappp用户名inputv-model.trimusername/pp密码inputtypepasswordv-modelpassword/pbuttonclicksubmit登录/button/divscriptnewVue({el:#app,data:{username:,password:},methods:{submit(){console.log(this.username,this.password)}}})/script常用修饰符.trim自动去除首尾空格.number尝试转换为数字.lazy改为在change事件后同步。v-model只负责收集和同步输入真实登录还需要后端校验、HTTPS 和安全的身份认证。十、总结与练习ES6 对象简写可以减少重复代码但要区分基本类型复制和对象引用。:class、:style用于动态样式条件渲染使用v-if、v-else-if、v-else。v-for列表应提供稳定唯一的keyVue 2 中新增属性和数组下标更新要注意响应式限制。v-model实现表单控件与数据同步输入事件可以配合filter()完成实时筛选。建议独立完成图片轮播、成绩等级、购物车和关键词过滤四个练习并分别观察数据变化与页面变化的关系。