网络及建设公司网站,最近做国际网站怎么样,容易导致网站作弊的几个嫌疑,企业营销型网站建设方案目录 回到导览vue基础知识1.1.创建一个vue实例1.2.vue基础指令1.2.1.v-bind1.2.2.v-model1.2.3.常用事件1.2.4.指令修饰符 1.3.计算属性1.3.1.计算属性的完整写法1.3.2.【案例】成绩 1.4.watch1.4.1.watch属性1.4.2.翻译业务实现1.4.3.watch属性的完整写法1.4.4.【案例… 目录 回到导览vue基础知识1.1.创建一个vue实例1.2.vue基础指令1.2.1.v-bind1.2.2.v-model1.2.3.常用事件1.2.4.指令修饰符 1.3.计算属性1.3.1.计算属性的完整写法1.3.2.【案例】成绩 1.4.watch1.4.1.watch属性1.4.2.翻译业务实现1.4.3.watch属性的完整写法1.4.4.【案例】水果购物车 1.5.生命周期1.5.1.【应用】初始化渲染1.5.2.【应用】获取焦点 回到导览
vue基础知识
mvvm模型
响应式数据一旦数据变化视图效果跟着变化
1.1.创建一个vue实例 代码 !-- 1.准备容器 --div idapp{{msg}}{{age-1}}/div!-- 2.引入开发版本的包 --script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscript// 3.创建实例const app new Vue({// 4.添加配置项el: #app,// el 挂载data: {msg: hello,age: 18}})插值表达式 用{{}}包裹变量名将表达式插值如上面{{msg}}和{{age-1}}浏览器会分别渲染值hello和 17 响应式特性 响应式数据变化视图自动更新当我们修改数据后vue会监听到数据修改从而改变视图 data里的数据会添加到实例身上以上面实例为例子我们可以通过app访问属性msg和age )
1.2.vue基础指令 一些基础指令 !-- 1.v-html innerHtml --div v-htmlmsg2/div!-- 2.v-show 通过display来显示和隐藏 一般用于交互频繁 --div v-showflag3333/div!-- 3.v-if 条件渲染 用于交互不频繁 --div v-ifflag3444/div!-- 4.v-if、 v-else-if v-else 条件渲染 --!-- 5.v-on 注册事件 每点击一下count -1 --v-on:clickcount-- clickcount-- methods属性用于存放事件方法 !-- 点击按钮调用methods方法弹出提示框 --
button clickmethodsmethods/button!-- js --
methods: {methods() {alert(methods)}
}7.v-for基于数组循环多次渲染整个元素v-for(item,index) in arr !-- 编号arr中的项并且列举 --
li v-for(item, index) in list{{index1}}.{{item}}/liv-for中的key给元素添加唯一标识用于列表项的正确排序key值必须具有唯一性不推荐以index作为key值
1.2.1.v-bind 可省略成: 用于实现熟悉的响应式 !-- imgUrl为配置项中data中的数据 --img v-bind:srcimgUrl!-- 等价为 --img :srcimgUrl altv-bind可以操作class 传对象 应用场景一个类名来回切换tab栏 !-- size、pink、green都为类名 --
div classbox :class{size:true,pink:false,green:true}123/div传数组 应用场景批量添加或者删除类 div classbox :class[pink,size]223/divstyle行内样式 应用场景非常方便地控制某个样式属性的变化进度条数值拼接单位 div classbox :style{background-color:green}/div1.2.2.v-model
v-modal 可以让数据和视图双向绑定快速获取或者设置表单元素内容
!-- input框值变化data中对应的数据也会变化 --
input typetext v-modelusernamebr对于不同的表单元素 v-modal 的绑定也有所不同
表单元素绑定备注输入框valuetext文本域valuetextarea复选框checkedcheckbox单选框checkedradioname将单选框关联下拉菜单selected元素中option选项的value值selected、option
1.2.3.常用事件
事件触发click单击触发v-model常用于绑定input事件submit表单提交触发mouseover鼠标悬停触发mouseout鼠标移开触发 焦点事件 事件触发focus元素获得焦点blur元素失去焦点 表单事件 事件触发reset点击重置按钮时submit点击提交按钮 键盘事件 事件触发keydown按下任意按键。keypress除 Shift、Fn、CapsLock 外的任意键被按住。keyup按键弹起
1.2.4.指令修饰符
按键修饰符 keyup.enter键盘回车监听 v-model修饰符 v-model.trim去首尾空格v-model.number转数字 事件修饰符 事件名.stop阻止冒泡事件名.prevent阻止默认行为 其他 once事件只触发一次
1.3.计算属性
计算属性会对计算结果缓存依赖项变了会自动重新计算并再次缓存缓存可以被直接读取性能高
1.methods属性
p礼物总数{{ total() }} 个/p
p礼物总数{{ total() }} 个/p
p礼物总数{{ total() }} 个/p!-- js中 --
data: {list: [{ id: 1, name: 篮球, num: 1 },{ id: 2, name: 玩具, num: 2 },{ id: 3, name: 铅笔, num: 5 },]
},
methods: {total() {console.log(执行了一次。);return this.list.reduce((sum, item) sum item.num, 0)}
}控制台会打印三次执行了一次。
computed属性 !-- 计算属性依旧是属性,不用加 --
p礼物总数{{ total }} 个/p
p礼物总数{{ total }} 个/p
p礼物总数{{ total }} 个/p!-- js中 --
computed: {封装一段对于数据的处理求得一个结果total() {console.log(执行了一次。);return this.list.reduce((sum, item) sum item.num, 0)}
}控制台会打印一次执行了一次。
1.3.1.计算属性的完整写法
计算属性默认只能访问不能修改如果要修改需要计算属性的完整写法
computed:{fullName{return this.firstName this.lastName}
}以上写法等价于
computed:{fullName:{get(){return this.firstName this.lastName}}
}上面写法只能通过监听firstName和lastName来动态改变fullName的值现在假设fullName会变化我们fullName变化时有对firstName和lastName进行拆分的需求就需要计算属性的完整写法
computed:{fullName:{// 监听firstName和lastName动态改变fullName的值get(){return this.firstName this.lastName},// 监听fullName动态改变firstName和lastName的值set(value){this.firstName value.slice(0,1))this.lastName value.slice(1)}}
}从上面可以看出set方法的形参value为fullName的值
当然除了改变firstName和lastName的值还可以做出其他的一些操作这里就不一一例举了
1.3.2.【案例】成绩
成品图
!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{{item.id}}/tdtd{{item.subject}}/tdtd :class{red:item.score60}{{item.score}}/tdtda href# clickdel(item.id)删除/a/td/tr/tbodytbody v-elsetrtd colspan5span classnone暂无数据/span/td/tr/tbodytfoottrtd colspan5span总分:{{total}}/spanspan stylemargin-left: 50px平均分:{{average}}/span/td/tr/tfoot/table/divdiv classformdiv classform-itemdiv classlabel科目/divdiv classinputinput typetext placeholder请输入科目 v-modelsubject //div/divdiv classform-itemdiv classlabel分数/divdiv classinputinput typetext placeholder请输入分数 v-modelscore //div/divdiv classform-itemdiv classlabel/divdiv classinputbutton classsubmit clickadd添加/button/div/div/div/divscript src../../vue/vue.js/scriptscriptconst app new Vue({el: #app,data: {list: [{ id: 1, subject: 语文, score: 20 },{ id: 2, subject: 数学, score: 99 },{ id: 3, subject: 英语, score: 70 },],subject: ,score: },methods: {del(id) {this.list this.list.filter(item item.id ! id)},add() {if (!this.subject || !this.score) {alert(没有输入科目或者分数)} else {// 往数组前面加this.list.unshift({// 以时间戳作为id,来设置keyid: new Date(),subject: this.subject,score: this.score})this.subject this.score }}},computed: {total() {return this.list.reduce((sum, item) sum item.score, 0)},average() {if (this.list.length 0) {return 0} else {return this.total / (this.list.length)}}}})/script
/body/html重要知识点 删除逻辑 del(id) {this.list this.list.filter(item item.id ! id)},通过点击触发del方法传入id通过filter从list过滤出和被点击项的id不同的id项重新赋值给list即从list删除点击项 求和逻辑 total() {return this.list.reduce((sum, item) sum item.score, 0)},reduce累加器的运用 加入数组 往数组前面加unshift(方法往数组后面加push(方法
1.4.watch
1.4.1.watch属性
作用监视数据变化执行 业务逻辑 或 异步操作
watch:{// 该方法会在数据变化时调用执行// newValue新值, oldValue老值一般不用 words(newValue, oldValue) {console.log(变化了, newValue,, oldValue)}
}以上代码监听了data里的数据words如果我们要监听data里obj对象属性words则应该写为 obj.words obj.words(newValue) {console.log(变化了, newValue)}1.4.2.翻译业务实现 watch: {obj.words(newValue) { clearTimeout(this.timerId)this.timerId setTimeout(async () {const res await axios({url: https://applet-base-api-t.itheima.net/api/translate,params: {words:newValue}})this.result res.data.data}, 300)},}知识点
防抖处理
1.4.3.watch属性的完整写法 额外配置项 配置项效果deep:true深度监视对象的子元素变化也会触发immediate:true初始化立即执行一次
上面的翻译业务实现还可以升级为通过改变翻译语言也会触发watch监听
对象obj有属性words和属性language对象进行深度监视对象的任何一个属性words和language发生变化都会触发重新翻译
watch: {obj: {deep: true, // 深度监视immediate: true, // 立即执行handler(newValue) {clearTimeout(this.timerId)this.timerId setTimeout(async () {const res await axios({url: https://applet-base-api-t.itheima.net/api/translate,params: newValue})this.result res.data.data}, 300)}},
}1.4.4.【案例】水果购物车
成品图 js代码
const dedaultArr [{id: 1,icon: img/火龙果.png,isChecked: true,num: 1,price: 6,},{id: 2,icon: img/荔枝.png,isChecked: false,num: 1,price: 20,},{id: 3,icon: img/榴莲.png,isChecked: false,num: 1,price: 40,},{id: 4,icon: img/鸭梨.png,isChecked: true,num: 1,price: 3,},{id: 5,icon: img/樱桃.png,isChecked: false,num: 1,price: 32,},
]
const app new Vue({el: #app,data: {// 水果列表bannerSrc: img/fruit.jpg,fruitList: JSON.parse(localStorage.getItem(list)) || dedaultArr},methods: {del(id) {return this.fruitList this.fruitList.filter(item item.id ! id)}},computed: {// 计算选中个数totalCount() {return this.fruitList.reduce((sum, item) {if (item.isChecked) {return sum item.num} else {return sum}}, 0)},// 计算总价totalPrice() {return this.fruitList.reduce((sum, item) {if (item.isChecked) {return sum item.num * item.price} else {return sum}}, 0)},all: {get() {// return的值决定全选框是否勾选// 必须所有框都选中全选按钮才选中everyreturn this.fruitList.every(item item.isChecked)},set(value) {// 全选按钮的value影响其他框this.fruitList.forEach(item item.isChecked value);}}},watch: {fruitList: {deep: true,handler(newValue) {localStorage.setItem(list, JSON.stringify(newValue))}}}
})部分html代码展示
div classtbodydiv classtr active v-for(item,index) in fruitListdiv classtdinput typecheckbox v-modelitem.isChecked //divdiv classtdimg :srcitem.icon alt //divdiv classtd{{item.price}}/divdiv classtddiv classmy-input-numberbutton classdecrease clickitem.num-- - /buttonspan classmy-input__inner{{item.num}}/spanbutton classincrease clickitem.num /button/div/divdiv classtd{{item.num*item.price}}/divdiv classtdbutton clickdel(item.id)删除/button/div/div
/div!-- 底部 --
div classbottom!-- 全选 --label classcheck-allinput typecheckbox v-modelall /全选/labeldiv classright-box!-- 所有商品总价 --span classprice-box总价nbsp;nbsp;:nbsp;nbsp;¥nbsp;span classprice{{totalPrice}}/span/span!-- 结算按钮 --button classpay结算( {{totalCount}} )/button/div
/div知识点
全选框逻辑 fruitList里添加属性isChecked来标记item项是否勾选再通过v-modelitem.isChecked”将isChecked和每个子checkbox绑定即checkbox和勾选状态关联如果子checkbox发生变化调用get()再通过every检查fruitList里的item.isChecked是否全为true即检查是否全勾选如果全勾选返回true通过v-modelall反作用于全选的checkbox使其勾选如果全选的checkbox发生变化调用set()并通过形参value传入all的值通过forEach将所有子checkbox的isChecked设置为和all一样的值
1.5.生命周期
在不同的生命周期会自动运行一些函数被称为生命周期钩子让开发者可以在特定阶段运行代码 生命周期四个阶段 1.创建阶段创建响应式数据 2.挂载阶段渲染模板 3.更新阶段修改数据更新视图 4.销毁阶段销毁Vue实例 生命周期钩子
1.5.1.【应用】初始化渲染
在created生命周期发送获取数据的请求
const app new Vue({el: #app,data: {list: []},async created() {// 1. 发送请求获取数据const res await axios.get(http://hmajax.itheima.net/api/news)// 2.将获取的数据写入数据列表this.list res.data.data}
})
/script1.5.2.【应用】获取焦点
在mounted生命周期获取焦点(操作dom)
const app new Vue({el: #app,data: {words: },mounted() {document.querySelector(#inp).focus()}
})
