的网站制作,网站开发的实施方案,怎么样备份网站数据,品牌推广官2023年8月4日15:25:01
Vue_02_note
在Vue中#xff0c;非相应式数据#xff0c;直接往实例上面挂载就可以了。
01_Vue 指令修饰符
什么是指令修饰符呢#xff1f;
答#xff1a; 通过 . 指明一些指令后缀#xff0c;不同 后缀 封装了不同的处理操作 —…2023年8月4日15:25:01
Vue_02_note
在Vue中非相应式数据直接往实例上面挂载就可以了。
01_Vue 指令修饰符
什么是指令修饰符呢
答 通过 . 指明一些指令后缀不同 后缀 封装了不同的处理操作 —— 简化代码
常见的有哪些呢 按键修饰符 keyup.enter执行代码 —— 键盘回车监听 v-model修饰符 v-model.trim —— 去首位空格v-model.number —— 转数字 事件修饰符 事件名.stop —— 阻止冒泡事件名.prevent —— 阻止默认行为 代码示例 按键修饰符 input keyup.enteradd v-modeltodoName placeholder请输入任务 classnew-todo / 同样Vue实例中需要提供add() {} 回车需要执行的代码都需要写在add函数中 v-model.trim 修饰符 input v-moedl.trim变量 v-modeltodoName placeholder请输入任务 classnew-todo / v-model.number input v-moedl.number变量 v-modeltodoName placeholder请输入年龄 classnew-todo /如果你输入的是字符符号就转不了原封不动显示总不可能呢个转成一个NaN把 事件名.stop (阻止冒泡) div click.stopxxx /div事件名.prevent 阻止默认行为 a click.preventxxx阻止默认行为/a02_ 通过v-bind操作class
常见操作的方式有 通过class类 、 或者style 行内式等原生方式来实现。
v-bind -操作class
语法 语法 class“对象/数组” 对象 -》 键就是类名值是布尔值。如果为true有这个类否则就没有这个类 div classbox :class{类名1布尔值类名2 布尔值}/div 数组-》数组中所有的类都会添加到盒子上本质就是一个 class 列表 div classbox :class[类名1,类名2类名3]/div 代码演示 div idapp!-- 传递对象的写法 对象注意键值对--div classbox :class{pink: true,big: true}对象形式/div!-- 传递数组的写法 数组注意加引号--div classbox :class[pink,big]数组形式/div/divscript srchttp://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {}})/script 使用场景对象适用于一个类来回切换。数组适用于批量添加或删除。
案例通过操作class类实现导航栏高亮效果
核心思路
基于数据动态渲染 tab 使用v-for准备下标记录了高亮的是哪一个 tab基于下标动态控制class类名 使用 v-bind:class 代码示例 div idappulli v-for(item,index) in list :keyitem.id clickactiveIndex indexa :class{active: index activeIndex} href#{{ item.name }}/a/li/ul
/div
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
scriptconst app new Vue({el: #app,data: {activeIndex: 2,list: [{id: 1, name: 京东秒杀},{id :2, name: 每日特价},{id :3, name: 品类秒杀}]}})
/script就是操作下标 03_ 通过v-bind操作style 语法
语法 :style“样式对象”
代码示例 div idappdiv :style{width: 400px,height: 400px,backgroundColor: green} classbox/div/div (案例)通过操作style实现进度条效果
核心思路 底层就是将两个不同颜色的盒子重叠修改宽度这里我们使用v-bind操作style来实现宽度的变化给按钮绑定点击事件然后将宽度赋值给变量将变量动态的设置给我们的宽度进行拼接 style.progress {height: 25px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px;}.inner {width: 50%;height: 20px;border-radius: 10px;text-align: right;position: relative;background-color: #409eff;background-size: 20px 20px;box-sizing: border-box;transition: all 1s;}.inner span {position: absolute;right: -20px;bottom: -25px;}/style
/head
bodydiv idappdiv classprogressdiv classinner :style{width: percent %}span{{ percent }}%/span/div/divbutton clickpercent 25设置25%/buttonbutton clickpercent 50设置50%/buttonbutton clickpercent 75设置75%/buttonbutton clickpercent 100设置100%/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {percent: 30}})/script
适用场景
style适用于某个具体属性的动态设置就如上面案例如果说添加class类的话会导致所有的属性都生效不能实现单独效果 04_ v-model应用于其他表单元素
其他表单元素例如文本框textarea、复选框checkedbox、单选框 input:radio 、下拉菜单select
常见的表单元素都可以使用 v-model来绑定关联快速获取或设置表单元素的值他会根据控件类型自动选取 正确的方式来更新元素。
下面直接使用案例来学习怎么实现以及操作其他表单元素
代码示例 主要看v-model在这些表单中使用的方式大差不差 !-- 容器 --
div idapph3小黑学习网/h3姓名input typetext v-modelusername brbr是否单身input typecheckbox v-modelisSingle brbr!-- 前置理解1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥2. value: 给单选框加上 value 属性用于提交给后台的数据结合 Vue 使用 → v-model--性别: input v-modelgender typeradio namegender value1男input v-modelgender typeradio namegender value2女brbr!-- 前置理解1. option 需要设置 value 值提交给后台2. select 的 value 值关联了选中的 option 的 value 值结合 Vue 使用 → v-model--所在城市:select v-modelcityIdoption value101北京/optionoption value102上海/optionoption value103成都/optionoption value104南京/option/selectbrbr自我描述textarea v-modeldesc/textarea button立即注册/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script!-- 实例 --scriptconst app new Vue({el: #app,data: {username: ,isSingle: false,gender: 1,cityId: 101,desc: }})/script 05_计算属性
什么是计算属性呢
概念基于现有的数据计算出来的新属性。依赖的数据变化自动重新计算。 语法 声明在 computed 配置项中一个计算属性对应一个函数。使用起来和普通属性一样使用{{ 计算属性名 }}。 代码示例 div idapph3小黑的礼物清单/h3tabletrth名字/thth数量/th/trtr v-for(item, index) in list :keyitem.idtd{{ item.name }}/tdtd{{ item.num }}个/td/tr/table!-- 目标统计求和求得礼物总数 --p礼物总数{{ totalCount }} 个/p
/div
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
scriptconst app new Vue({el: #app,data: {// 现有的数据list: [{ id: 1, name: 篮球, num: 1 },{ id: 2, name: 玩具, num: 2 },{ id: 3, name: 铅笔, num: 5 },]},computed: {// 使用计算属性不要加括号就当普通属性一样使用totalCount () {// 基于现有的数据计算// 可以通过this访问到app实例,利用reduce数组求和即可let total this.list.reduce((sum,item) sum item.num,0)return total}}})
/script 现在computed配置项里面提供声明然后编写求和逻辑函数使用的时候就和普通的属性一样使用差值表达式使用切记这个不要加小括号。 computed计算属性和methods方法 computed计算属性 作用 封装了一段对于数据的处理求得一个结果语法写在computed配置项中作为属性直接使用 this.计算属性 {{ 计算属性 }} methods方法 作用 给实例提供一个方法。调用以处理业务逻辑。语法写在methods配置项中。作为方法需要调用 , this.方法名() {{ 方法名 }} 事件名“方法名”
注意最大的差别就是在于使用属性使用直接使用this.属性就可以了但是方法需要调用哦
同样都能实现计算逻辑为什么选择computed呢
因为computed有缓存特性 计算属性会对计算出来的结果进行缓存再次使用知己诶读取缓存。当数据依赖项变化了会自动计算结果并在在次缓存。便于下次使用。 06_计算属性的完整写法 计算属性默认的简写只能读取访问不能修改。 如果需要修改– 需要写计算属性的完整写法
computed: {
计算属性名 {
get{
一段代码逻辑 计算逻辑
return 结果
}
set 修改的值 {
一段代码逻辑修改逻辑
}
}
} 代码示例 const app new Vue({el: #app,data: {Xing: ,Ming: },methods: {changeName () {// 这里是修改了fullName的值set方法可以拿到修改后的值this.fullName 吕小布}},// 简写 - 获取// fullName () {// return this.Xing this.Ming// }// 完整的写法 - 获取 - 设置fullName: {// (1)获取 有缓存先执行缓存 将return返回值作为求值结果get() {return this.Xing this.Ming},// (2)设置修改,当fullName被修改时就执行set将修改的值返回给set形参set (value) {// console.log(value)// 字符串截取// value.slice(0,1)// value.slice(1)this.Xing value.slice(0,1)this.Ming value.slice(1)}} 完整写法就是能够修改了需要在computed配置项里面 写一个计算属性 里面需要提供两个方法一个get获取 一个set修改当我们计算属性名被修改后我们set方法的形参就会拿到修改后的值 然后再进行计算逻辑处理。在使用差值表达式对页面进行渲染记住不需要添加小括号。 07_计算属性实现成绩统计和品均分案例
功能需求 渲染功能 不及格高亮、使用v-if v-else结局盒子互斥使用v-bind:class解决高亮。删除功能点击传递id 通过filter过滤器过滤然后覆盖原数组使用指令修饰符。prevent阻止默认行为。添加功能v-model双向绑定使用指令修饰符 trim number修饰功能。在使用unshift修改数组v-for会根据数组自动更新视图。**统计总分求平均分**使用reduce求和需要在computed配置项中使用计算属性函数将计算逻辑返回的结果通过return暴露出来然后使用差值表达式 通过 属性的方式进行渲染即可。切记计算属性和函数方法长的一样都是函数但是使用计算属性必须写属性。{{ 计算属性名 }}后面不要小括号。 代码示例 看完需求直接在代码中找侧重点哪怕你能找到所有功能需求代码所处在、使用的位置。也行哈哈。 div idapp classscore-casediv classtabletabletheadtrth编号/thth科目/thth成绩/thth操作/th/tr/theadtbody v-iflist.length 0tr v-for(item,index) in list :keyitem.idtd{{ index 1 }}/tdtd{{ item.subject }}/tdtd :class{red: item.score 60} {{ item.score}}/tdtda click.preventdel(item.id) href#删除/a/td/tr/tbodytbody v-elsetrtd colspan5span classnone暂无数据/span/td/tr/tbodytfoottrtd colspan5span总分{{ totalCount }}/spanspan stylemargin-left: 50px平均分{{ averageCount }}/span/td/tr/tfoot/table/divdiv classformdiv classform-itemdiv classlabel科目/divdiv classinputinput v-model.trimsubjecttypetextplaceholder请输入科目//div/divdiv classform-itemdiv classlabel分数/divdiv classinputinput v-model.numberscoretypetextplaceholder请输入分数//div/divdiv classform-itemdiv classlabel/divdiv classinputbutton clickadd classsubmit 添加/button/div/div/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {list: [{ id: 1, subject: 语文, score: 20 },{ id: 7, subject: 数学, score: 80 },{ id: 12, subject: 英语, score: 70 },],subject: ,score: },methods: {del (id) {// 判断id进行过滤不需要删除的项然后将新数组重新赋值给listthis.list this.list.filter(item item.id ! id)// 这句代码的含义就是当我对数组一次遍历当前项的id不等于我传过来的全部过滤放到新数组然后重新赋值相等的不过滤就不会再渲染他删除。},add () {// 在v-model双向绑定后我们获取到数据后使用unshift在数组前面增加即可因为v-for会自动检测数据个数然后动态渲染this.list.unshift({// 切记list对象里面的格式是怎样的这里也需要保持一致id: new Date(),subject: this.subject,score: this.score})}},computed: {// 这里不需要修改所有我们直接使用简单的计算属性写法即可注意差值使用属性不要写成调用方法totalCount () {// 属性是可以直接通过this访问甚至都不需要声明return this.list.reduce((sum,item) sum item.score ,0)// 求和后有返回值用变量total接受然后使用return返回给函数哪里使用我们该函数就能访问到结果切记计算属性里面的函数可以理解为调用函数但是不要加小括号切记},averageCount () {// 解决品均分为 NaN的问题数组没有分数操作会显示这里判断如果长度为0直接返回0 且终止后面代码。if (this.list.length 0) {return 0}// 将返回值通过return暴露出去谁使用我们的计算属性名谁就能得到结果。return (this.totalCount / this.list.length).toFixed(2)}}})/script 08_watch 监听器 监视器 作用
作用监视数据变化执行一些 业务逻辑 或 异步操作。 语法 语法 简单写法 -- 简单类型数据直接监视 完整写法 -- 添加额外的配置项监视多个 depp: true 对复杂数据类型的深度监视 immediatetrue 初始化立即执行一次 handler方法 简单写法和完整写法就和计算属性一样根据需求来写能写简单的就不必写完整的哈
这里那需求为例展开啦学习
需求
输入内容实时翻译 核心步骤 接口地址https://applet-base-api-t.itheima.net/api/translate 请求方式get 请求参数 (1words需要被翻译的文本必传 2lang 需要被翻译成的语言可选默认值-意大利 代码示例 div idapp!-- 条件选择框 --div classqueryspan翻译成的语言/spanselectoption valueitaly意大利/optionoption valueenglish英语/optionoption valuegerman德语/option/select/div!-- 翻译框 --div classboxdiv classinput-wraptextarea v-modelobj.words/textareaspani⌨️/i文档翻译/span/divdiv classoutput-wrapdiv classtransbox{{ result }}/div/div/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscriptconst app new Vue({el: #app,data: {// words: obj: {words: },// 翻译结果result: ,// 延迟器的id名字,this表示的就是我们的Vue实例对象可以直接this.属性名当对象使用即可。// timer: null},// 方法实现(1) watch语法 (2) 具体业务实现watch: {// 改方法会再数据变化时 调用执行// newValue新值oldValue老值一般不用obj.words(newValue) { //配置对象中访问对象里面的属性要用引号哦不然报错// console.log(变化了, newValue)// 做防抖节流// 每次有新的值输入都清除延迟器什么时候不输入并且达到延迟时间在发请求clearTimeout(this.timer)this.timer setTimeout(async() {const res await axios({url: https://applet-base-api-t.itheima.net/api/translate,params: {words: newValue}})this.result res.data.dataconsole.log(res.data.data)}, 300);}}})/script 09_watch 监听器 -完整写法 完整写法可以理解为监视一个对象里面的所有子属性
语法 完整写法 -- 添加额外的配置项 depp: true 对复杂数据类型的深度监视监视多个对对象里面的所有子属性进行监视 immediatetrue 初始化立即执行一次 handler方法一进入页面handler就立即执行一次 需求输入内容修改语言以及一进页面就执行一次都实时翻译。 代码示例 script
const app new Vue({el: #app,data: {// words: obj: {words: Vue,lang: italy},// 翻译结果result: ,// 延迟器的id名字,this表示的就是我们的Vue实例对象可以直接this.属性名当对象使用即可。// timer: null},// 方法实现(1) watch语法 (2) 具体业务实现watch: {obj: {deep: true, //深度监视对对象里面的所有子属性进行监视immediate: true, // 立刻执行 一进入页面handler就立即执行一次handler(newValue) {console.log(对象被修改了, newValue)// 改方法会再数据变化时 调用执行// newValue新值oldValue老值一般不用//配置对象中访问对象里面的属性要用引号哦不然报错// console.log(变化了, newValue)// 做防抖节流// 每次有新的值输入都清除延迟器什么时候不输入并且达到延迟时间在发请求clearTimeout(this.timer)this.timer setTimeout(async() {const res await axios({url: https://applet-base-api-t.itheima.net/api/translate,params: newValue //因为newValue是一个对象刚好包含携带的查询参数。})this.result res.data.dataconsole.log(res.data.data)}, 300);}}/script 完整写法可以理解为监视一个对象里面的所有子属性需要监视的都放在改对象里面然后使用deeptrue深度监视记得进页面就执行一次immediate: true记得别忘了使用 v-model 将数据视图双向绑定。这样watch监听器才可以实时监测到变化同时还需要加上防抖节流。 10_ 水果购物车业务 需求说明 渲染功能删除功能修改功能全选反选功能统计 选中的 总价 和 总数量持久化到本地 业务技术点总结 渲染功能 v-if/v-else v-for :class删除功能 点击传参 filter过滤覆盖原数组修改个数 点击传参 find找对象全选反选计算属性computed 完整写法 get/set总价和总数量 计算属性 computed reduce条件求和持久化到本地 watch监视localStorageJSON.stringify存 JSON.parse读取 代码示例 scritp
const defaultArr [{id: 1,icon: http://autumnfish.cn/static/火龙果.png,isChecked: true,num: 2,price: 6,},{id: 2,icon: http://autumnfish.cn/static/荔枝.png,isChecked: false,num: 7,price: 20,},{id: 3,icon: http://autumnfish.cn/static/榴莲.png,isChecked: false,num: 3,price: 40,},{id: 4,icon: http://autumnfish.cn/static/鸭梨.png,isChecked: true,num: 10,price: 3,},{id: 5,icon: http://autumnfish.cn/static/樱桃.png,isChecked: false,num: 20,price: 34,},]const app new Vue({el: #app,data: {// 水果列表fruitList: JSON.parse(localStorage.getItem(list)) || defaultArr,},computed: {// 计算属性默认只能获取需要设置需要写完整写法isAll: {// 所有的小选框的选中状态全选才选中get() {return this.fruitList.every(item item.isChecked)},set(value) {// 基于拿到的value布尔值要让所有的小选框 同步状态this.fruitList.forEach(item item.isChecked value)},},// 统计选中的总数 reducetotalCount() {return this.fruitList.reduce((sum, item) {if (item.isChecked) {// 选中 需要累加return sum item.num} else {// 没选中 不需要累加 返回sum即可return sum}}, 0)},// 统计选中的总价totalPrice() {return this.fruitList.reduce((sum, item) {// 选中 需要价格if (item.isChecked) {return sum item.num * item.price} else {return sum}},0)}},methods: {del(id) {this.fruitList this.fruitList.filter(item item.id ! id)},reduce(id) {// 1. 根据id 找到数组中的对应项const fruit this.fruitList.find(item item.id id)// 2. 操作 num 数量fruit.num--},add(id) {// 1. 根据id 找到数组中的对应项const fruit this.fruitList.find(item item.id id)// 2. 操作 num 数量fruit.num}},// 监视器监视所有数据是否发生变化watch: {fruitList: {deep: true,handler (newValue) {// 需要将变化后的 newValue 存入本地 存进去前需要转 JSONlocalStorage.setItem(list,JSON.stringify(newValue))}}}})/script 当前购物车业务除了没有使用axios与服务器存储交互以及支付功能。其他的都完成了
