中国建设教育协会网站打不开,网站排名seo,网页app制作教程,网站建设mfdos1、指令修饰符#xff1a;.指明一些指令后缀#xff0c;不同后缀封装不同处理操作
按键修饰符#xff1a;keyup.enter
v-model修饰符#xff1a; v-model.trim#xff1a;去首位空格 v-model.number#xff1a;转数字
事件修饰符#xff1a; 阻止事件冒泡#xff1…1、指令修饰符.指明一些指令后缀不同后缀封装不同处理操作
按键修饰符keyup.enter
v-model修饰符 v-model.trim去首位空格 v-model.number转数字
事件修饰符 阻止事件冒泡 1 2 事件名.stop
阻止默认行为 事件名.prevent
2、v-bind控制样式属性
操作class 1:class“{类名1布尔值类名2布尔值}” 对象频繁切换 2:class“[类名1类名2]” 数组一次批量增加属性或删除 改成id好像也可以目前没看出问题但是id可能比较乱七八糟有长有短随机的那种可能会增加比较时间 操作style 适用于控制单个属性 :style:“{css属性名1:css属性值。。。}” 属性值要加引号若属性名中间有-应改为小驼峰命名
3、v-model应用于表单元素 看右下角选择哪个元素select的value值和这个option的value值相同 通过改变select的value值来改变选择的option
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletextarea {display: block;width: 240px;height: 100px;margin: 10px 0;}/style
/head
bodydiv 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/scriptscriptconst app new Vue({el: #app,data: {username: ,isSingle: false,gender: 2,cityId: 102,desc: }})/script
/body
/html4、计算属性 5、计算属性完整写法 此时使用的是计算属性的简写只能获取计算属性的结果值不能修改计算属性值看右边报错了。
点改名卡触发changeName函数因为修改了计算属性故执行set函数
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleinput {width: 30px;}/style
/headbodydiv idapp姓input typetext v-modelfirstName 名input typetext v-modellastName span{{ fullName }}/spanbrbrbutton clickchangeName改名卡/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {firstName: 刘,lastName: 备,},methods: {changeName() {this.fullName 黄忠}},computed: {// 简写 → 获取没有配置设置的逻辑// fullName () {// return this.firstName this.lastName// }// 完整写法 → 获取 设置fullName: {// (1) 当fullName计算属性被获取求值时执行get有缓存优先读缓存// 会将返回值作为求值的结果get() {return this.firstName this.lastName},// (2) 当fullName计算属性被修改赋值时执行set// 修改的值传递给set方法的形参set(value) {// console.log(value.slice(0, 1)) // console.log(value.slice(1)) this.firstName value.slice(0, 1)this.lastName value.slice(1)}}}})/script
/body/html7、案例
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /link relstylesheet href./styles/index.css /titleDocument/title
/headbodydiv idapp classscore-casediv classtabletabletheadtrth编号/thth科目/thth成绩/thth操作/th/tr/theadtbody v-iflist.length0tr v-for(item,index) in list :keyitem.idtd{{index1}}/tdtd{{item.subject}}/tdtd :class{red:item.score60}{{item.score}}/tdtda href# click.preventdel(item.id)删除/a/td/tr/tbodytbody v-elsetrtd colspan5span classnone暂无数据/span/td/tr/tbodytfoottrtd colspan5span总分{{totalScore}}/spanspan stylemargin-left: 50px平均分{{avr}}/span/td/tr/tfoot/table/divdiv classformdiv classform-itemdiv classlabel科目/divdiv classinputinput v-model.trimsubject typetext placeholder请输入科目 //div/divdiv classform-itemdiv classlabel分数/divdiv classinputinput v-model.numberscore typetext placeholder请输入分数 //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: 99 },{ id: 12, subject: 英语, score: 70 },],subject: ,score: },methods: {del(id) {this.list this.list.filter(item item.id ! id)},add() {if (!this.subject) {alert(请输入科目)return}if (typeof this.score ! number) {alert(请输入正确的成绩)return}// 将数据增加到数组最前端this.list.unshift({id: new Date(),subject: this.subject,score: this.score})this.subject this.score }},// 计算属性computed: {// 用数组累加方法 reducetotalScore() {const num this.list.reduce((prev, cur) prev cur.score, 0)return num},avr() {// 全部删除后会出现0/0加个判断if (this.list.length 0) {return 0}return (this.totalScore / this.list.length).toFixed(2)}}})/script
/body/html8、watch侦听器
简单写法 数据一旦发生变化就会触发watch中相应方法数据可能和某个表单元素绑定用户改变表单元素值双向绑定使得数据值做相应变化。 script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript// 接口地址https://applet-base-api-t.itheima.net/api/translate// 请求方式get// 请求参数// 1words需要被翻译的文本必传// 2lang 需要被翻译成的语言可选默认值-意大利// -----------------------------------------------const app new Vue({el: #app,data: {// words: obj: {words: },result: , // 翻译结果// timer: null // 延时器id},// 具体讲解(1) watch语法 (2) 具体业务实现watch: {// 该方法会在数据变化时调用执行// newValue新值, oldValue老值一般不用// words (newValue) {// console.log(变化了, newValue)// }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)}}})/scriptwatch完整写法 可添加配置项可一次性监视复杂数据类型中所有属性不用一个个监视复杂类型中所有属性 bodydiv idapp!-- 条件选择框 --div classqueryspan翻译成的语言/spanselect v-modelobj.langoption 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/scriptscript// 需求输入内容修改语言都实时翻译// 接口地址https://applet-base-api-t.itheima.net/api/translate// 请求方式get// 请求参数// 1words需要被翻译的文本必传// 2lang 需要被翻译成的语言可选默认值-意大利// -----------------------------------------------const app new Vue({el: #app,data: {obj: {words: 小黑,lang: italy},result: , // 翻译结果},watch: {obj: {deep: true, // 深度监视immediate: true, // 立刻执行一进入页面handler就立刻执行一次handler (newValue) {clearTimeout(this.timer)this.timer setTimeout(async () {const res await axios({url: https://applet-base-api-t.itheima.net/api/translate,params: newValue})this.result res.data.dataconsole.log(res.data.data)}, 300)}}// obj.words (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.data// console.log(res.data.data)// }, 300)// }}})/script/body9、购物车案例持久化到本地没写
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /link relstylesheet href./css/inputnumber.css /link relstylesheet href./css/index.css /title购物车/title
/headbodydiv classapp-container idapp!-- 顶部banner --div classbanner-boximg src./img/fruit.jpg alt //div!-- 面包屑 --div classbreadcrumbspan/span/span购物车/span/div!-- 购物车主体 --div v-iffruitList.length 0 classmaindiv classtable!-- 头部 --div classtheaddiv classtrdiv classth选中/divdiv classth th-pic图片/divdiv classth单价/divdiv classth num-th个数/divdiv classth小计/divdiv classth操作/div/div/div!-- 身体 --div classtbodydiv v-for(item,index) in fruitList :keyitem.id classtr :class{active:item.isChecked}div classtdinput typecheckbox v-modelitem.isChecked //divdiv classtdimg :srcitem.icon alt //divdiv classtd{{item.price}}/divdiv classtddiv classmy-input-numberbutton classdecrease clicksub(item.id) :disableditem.num1 - /buttonspan classmy-input__inner{{item.num}}/spanbutton classincrease clickadd(item.id) /button/div/divdiv classtd{{ item.num * item.price }}/divdiv clickdel(item.id) classtdbutton删除/button/div/div/div/div!-- 底部 --div classbottom!-- 全选 --label classcheck-allinput typecheckbox v-modeltotal /全选/labeldiv classright-box!-- 所有商品总价 --span classprice-box总价nbsp;nbsp;:nbsp;nbsp;¥nbsp;span classprice{{ totalPrice }}/span/span!-- 结算按钮 --button classpay结算( {{ totalCount }} )/button/div/div/div!-- 空车 --div v-else classempty空空如也/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {// 水果列表fruitList: [{id: 1,icon: ./img/火龙果.png,isChecked: true,// v-model对于checkedbox绑定的是它的checked属性num: 2,price: 6,},{id: 2,icon: ./img/荔枝.png,isChecked: false,num: 7,price: 20,},{id: 3,icon: ./img/榴莲.png,isChecked: false,num: 3,price: 40,},{id: 4,icon: ./img/鸭梨.png,isChecked: true,num: 10,price: 3,},{id: 5,icon: ./img/樱桃.png,isChecked: false,num: 20,price: 34,},],},methods: {del(id) {this.fruitList this.fruitList.filter(item item.id ! id)},sub(id) {this.fruitList.find(item item.id id).num--},add(id) {this.fruitList.find(item item.id id).num}},computed: {total: {get() {return this.fruitList.every(item item.isChecked)},set(value) {// value是全选框被勾选或取消勾选时即数据变化传过来的布尔值this.fruitList.forEach(item item.isChecked value)}},totalCount() {return this.fruitList.reduce((sum, item) {if (item.isChecked) {// 选中 → 需要累加return sum item.num} else {// 没选中 → 不需要累加return sum}}, 0)},// 总计选中的总价 num * pricetotalPrice() {return this.fruitList.reduce((sum, item) {if (item.isChecked) {return sum item.num * item.price} else {return sum}}, 0)}}})/script
/body/html
