如何在网上建设一个公司网站,网站锚文本与标签,网站如何不需要备案,山东百搜科技有限公司文章目录本篇学习目标1. vue生命周期1.0_人的-生命周期1.1_钩子函数1.2_初始化阶段1.3_挂载阶段1.4_更新阶段1.5_销毁阶段2. axios2.0_axios基本使用2.1_axios基本使用-获取数据2.2_axios基本使用-传参2.3_axios基本使用-发布书籍2.4_axios基本使用-全局配置3. nextTick和nextT…
文章目录本篇学习目标1. vue生命周期1.0_人的-生命周期1.1_钩子函数1.2_初始化阶段1.3_挂载阶段1.4_更新阶段1.5_销毁阶段2. axios2.0_axios基本使用2.1_axios基本使用-获取数据2.2_axios基本使用-传参2.3_axios基本使用-发布书籍2.4_axios基本使用-全局配置3. nextTick和nextTick和nextTick和refs知识3.0 $refs-获取DOM3.1 $refs-获取组件对象3.2 $nextTick使用Vue更新DOM-异步的3.3 $nextTick使用场景3.4 组件name属性使用4. 案例 - 购物车4.0 案例-购物车-项目初始化4.1 案例-购物车-头部自定义4.2 案例-购物车-请求数据4.3 案例-购物车-数据渲染4.4 案例-购物车-商品选中4.5 案例-购物车-数量控制4.6 案例-购物车-全选功能4.7 案例-购物车-总数量4.8 案例-购物车-总价面试题1、Vue 的 nextTick 的原理是什么? 高薪常问2、vue生命周期总共分为几个阶段必会3、第一次加载页面会触发哪几个钩子函数必会写在最后本篇学习目标
掌握vue组件生命周期掌握axios的使用了解$refs, $nextTick使用和name使用能够完成购物车案例开发
1. vue生命周期
1.0_人的-生命周期 一组件从 创建 到 销毁 的整个过程就是生命周期 Vue_生命周期 1.1_钩子函数 目标: Vue 框架内置函数随着组件的生命周期阶段自动执行 作用: 特定的时间点执行特定的操作
场景: 组件创建完毕后可以在created 生命周期函数中发起Ajax 请求从而初始化 data 数据
分类: 4大阶段8个方法
初始化挂载更新销毁
阶段方法名方法名初始化beforeCreatecreated挂载beforeMountmounted更新beforeUpdateupdated销毁beforeDestroydestroyed
官网文档
下图展示了实例的生命周期。你不需要立马弄明白所有的东西不过随着你的不断学习和使用它的参考价值会越来越高。 1.2_初始化阶段 目标: 掌握初始化阶段2个钩子函数作用和执行时机 含义讲解:
1.new Vue() – Vue实例化(组件也是一个小的Vue实例)
2.Init Events Lifecycle – 初始化事件和生命周期函数
3.beforeCreate – 生命周期钩子函数被执行
4.Init injectionsreactivity – Vue内部添加data和methods等
5.created – 生命周期钩子函数被执行, 实例创建
6.接下来是编译模板阶段 –开始分析
7.Has el option? – 是否有el选项 – 检查要挂到哪里
没有. 调用$mount()方法
有, 继续检查template选项 components/Life.vue - 创建一个文件 script
export default {data(){return {msg: hello, Vue}},// 一. 初始化// new Vue()以后, vue内部给实例对象添加了一些属性和方法, data和methods初始化之前beforeCreate(){console.log(beforeCreate -- 执行);console.log(this.msg); // undefined},// data和methods初始化以后// 场景: 网络请求, 注册全局事件created(){console.log(created -- 执行);console.log(this.msg); // hello, Vuethis.timer setInterval(() {console.log(哈哈哈);}, 1000)}
}
/scriptApp.vue - 引入使用
templatedivh11. 生命周期/h1Life/Life/div
/templatescript
import Life from ./components/Life
export default {components: {Life}
}
/script1.3_挂载阶段 目标: 掌握挂载阶段2个钩子函数作用和执行时机 含义讲解:
1.template选项检查
有 - 编译template返回render渲染函数
无 – 编译el选项对应标签作为template(要渲染的模板)
2.虚拟DOM挂载成真实DOM之前
3.beforeMount – 生命周期钩子函数被执行
4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上
5.真实DOM挂载完毕
6.mounted – 生命周期钩子函数被执行 components/Life.vue - 创建一个文件
templatedivp学习生命周期 - 看控制台打印/pp idmyP{{ msg }}/p/div
/templatescript
export default {// ...省略其他代码// 二. 挂载// 真实DOM挂载之前// 场景: 预处理data, 不会触发updated钩子函数beforeMount(){console.log(beforeMount -- 执行);console.log(document.getElementById(myP)); // nullthis.msg 重新值},// 真实DOM挂载以后// 场景: 挂载后真实DOMmounted(){console.log(mounted -- 执行);console.log(document.getElementById(myP)); // p}
}
/script1.4_更新阶段 目标: 掌握更新阶段2个钩子函数作用和执行时机 含义讲解:
1.当data里数据改变, 更新DOM之前
2.beforeUpdate – 生命周期钩子函数被执行
3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM
4.updated – 生命周期钩子函数被执行
5.当有data数据改变 – 重复这个循环 components/Life.vue - 创建一个文件
准备ulli循环, 按钮添加元素, 触发data改变-导致更新周期开始
templatedivp学习生命周期 - 看控制台打印/pp idmyP{{ msg }}/pul idmyULli v-for(val, index) in arr :keyindex{{ val }}/li/ulbutton clickarr.push(1000)点击末尾加值/button/div
/templatescript
export default {data(){return {msg: hello, Vue,arr: [5, 8, 2, 1]}},// ...省略其他代码// 三. 更新// 前提: data数据改变才执行// 更新之前beforeUpdate(){console.log(beforeUpdate -- 执行);console.log(document.querySelectorAll(#myULli)[4]); // undefined},// 更新之后// 场景: 获取更新后的真实DOMupdated(){console.log(updated -- 执行);console.log(document.querySelectorAll(#myULli)[4]); // li}
}
/script1.5_销毁阶段 目标: 掌握销毁阶段2个钩子函数作用和执行时机 含义讲解:
1.当$destroy()被调用 – 比如组件DOM被移除(例v-if)
2.beforeDestroy – 生命周期钩子函数被执行
3.拆卸数据监视器、子组件和事件侦听器
4.实例销毁后, 最后触发一个钩子函数
5.destroyed – 生命周期钩子函数被执行 components/Life.vue - 准备生命周期方法(Life组件即将要被删除)
script
export default {// ...省略其他代码// 四. 销毁// 前提: v-iffalse 销毁Vue实例// 场景: 移除全局事件, 移除当前组件, 计时器, 定时器, eventBus移除事件$off方法beforeDestroy(){// console.log(beforeDestroy -- 执行);clearInterval(this.timer)},destroyed(){// console.log(destroyed -- 执行);}
}
/script主要: App.vue - 点击按钮让Life组件从DOM上移除 - 导致Life组件进入销毁阶段
Life v-ifshow/Life
button clickshow false销毁组件/buttonscriptdata(){return {show: true}},
/script2. axios
2.0_axios基本使用
axios文档
特点
支持客户端发送Ajax请求支持服务端Node.js发送请求支持Promise相关用法支持请求和响应的拦截器功能自动转换JSON数据axios 底层还是原生js实现, 内部通过Promise封装的
axios的基本使用
axios({method: 请求方式, // get posturl: 请求地址,data: { // 拼接到请求体的参数, post请求的参数xxx: xxx,},params: { // 拼接到请求行的参数, get请求的参数xxx: xxx }
}).then(res {console.log(res.data) // 后台返回的结果
}).catch(err {console.log(err) // 后台报错返回
})
2.1_axios基本使用-获取数据 目标: 调用文档最后_获取所有图书信息接口 功能: 点击调用后台接口, 拿到所有数据 – 打印到控制台
接口: 参考预习资料.md – 接口文档
引入: 下载axios, 引入后才能使用
效果: 例子如下:
components/UseAxios.vue
templatedivp1. 获取所有图书信息/pbutton clickgetAllFn点击-查看控制台/button/div
/templatescript
// 目标1: 获取所有图书信息
// 1. 下载axios
// 2. 引入axios
// 3. 发起axios请求
import axios from axios;
export default {methods: {getAllFn() {axios({url: http://123.57.109.30:3006/api/getbooks,method: GET, // 默认就是GET方式请求, 可以省略不写}).then((res) {console.log(res);});// axios()-原地得到Promise对象},}
};
/script2.2_axios基本使用-传参 目标: 调用接口-获取某本书籍信息 功能: 点击调用后台接口, 查询用户想要的书籍信息 – 打印到控制台
接口: 参考预习资料.md – 接口文档
效果: 例子如下:
components/UseAxios.vue
templatedivp2. 查询某本书籍信息/pinput typetext placeholder请输入要查询 的书名 v-modelbName /button clickfindFn查询/button/div
/templatescript
import axios from axios;
export default {data() {return {bName: };},methods: {// ...省略了查询所有的代码findFn() {axios({url: /api/getbooks,method: GET,params: { // 都会axios最终拼接到url?后面bookname: this.bName}}).then(res {console.log(res);})}},
};
/script2.3_axios基本使用-发布书籍 目标: 完成发布书籍功能 功能: 点击新增按钮, 把用户输入的书籍信息, 传递给后台 – 把结果打印在控制台
接口: 参考预习资料.md – 接口文档
效果: 例子如下:
components/UseAxios.vue
templatedivp3. 新增图书信息/pdivinput typetext placeholder书名 v-modelbookObj.bookname/divdivinput typetext placeholder作者 v-modelbookObj.author/divdivinput typetext placeholder出版社 v-modelbookObj.publisher/divbutton clicksendFn发布/button/div
/templatescript
import axios from axios;
export default {data() {return {bName: ,bookObj: { // 参数名提前和后台的参数名对上-发送请求就不用再次对接了bookname: ,author: ,publisher: }};},methods: {// ...省略了其他代码sendFn(){axios({url: /api/addbook,method: POST,data: {appkey: 7250d3eb-18e1-41bc-8bb2-11483665535a,...this.bookObj// 等同于下面// bookname: this.bookObj.bookname,// author: this.bookObj.author,// publisher: this.bookObj.publisher}}) }},
};
/script2.4_axios基本使用-全局配置 目标: 避免前缀基地址, 暴露在逻辑页面里, 统一设置 axios.defaults.baseURL http://123.57.109.30:3006// 所有请求的url前置可以去掉, 请求时, axios会自动拼接baseURL的地址在前面
getAllFn() {axios({url: /api/getbooks,method: GET, // 默认就是GET方式请求, 可以省略不写}).then((res) {console.log(res);});// axios()-原地得到Promise对象
},3. nextTick和nextTick和nextTick和refs知识
3.0 $refs-获取DOM 目标: 利用 ref 和 $refs 可以用于获取 dom 元素 components/More.vue
templatedivp1. 获取原生DOM元素/ph1 idh refmyH我是一个孤独可怜又能吃的h1/h1/div
/templatescript
// 目标: 获取组件对象
// 1. 创建组件/引入组件/注册组件/使用组件
// 2. 组件起别名ref
// 3. 恰当时机, 获取组件对象
export default {mounted(){console.log(document.getElementById(h)); // h1console.log(this.$refs.myH); // h1}
}
/scriptstyle/style总结: 通过id / ref, 都可以获取原生DOM标签 3.1 $refs-获取组件对象 目标: 获取组件对象, 调用组件里方法 components/Child/Demo.vue
templatedivp我是Demo组件/p/div
/templatescript
export default {methods: {fn(){console.log(demo组件内的方法被调用了);}}
}
/scriptMore.vue - 获取组件对象 - 调用组件方法
templatedivp1. 获取原生DOM元素/ph1 idh refmyH我是一个孤独可怜又能吃的h1/h1p2. 获取组件对象 - 可调用组件内一切/pDemo refde/Demo/div
/templatescript
// 目标: 获取组件对象
// 1. 创建组件/引入组件/注册组件/使用组件
// 2. 组件起别名ref
// 3. 恰当时机, 获取组件对象
import Demo from ./Child/Demo
export default {mounted(){console.log(document.getElementById(h)); // h1console.log(this.$refs.myH); // h1let demoObj this.$refs.de;demoObj.fn()},components: {Demo}
}
/script总结: ref定义值, 通过$refs.值 来获取组件对象, 就能继续调用组件内的变量 3.2 $nextTick使用 Vue更新DOM-异步的 目标: 点击count, 马上通过原生DOM拿标签内容, 无法拿到新值 components/Move.vue - 继续新增第三套代码
templatedivp1. 获取原生DOM元素/ph1 idh refmyH我是一个孤独可怜又能吃的h1/h1p2. 获取组件对象 - 可调用组件内一切/pDemo refde/Demop3. vue更新DOM是异步的/pp refmyP{{ count }}/pbutton clickbtn点击count1, 马上提取p标签内容/button/div
/templatescript
// 目标: 获取组件对象
// 1. 创建组件/引入组件/注册组件/使用组件
// 2. 组件起别名ref
// 3. 恰当时机, 获取组件对象
import Demo from ./Child/Demo
export default {mounted(){console.log(document.getElementById(h)); // h1console.log(this.$refs.myH); // h1let demoObj this.$refs.de;demoObj.fn()},components: {Demo},data(){return {count: 0}},methods: {btn(){this.count; // vue监测数据更新, 开启一个DOM更新队列(异步任务)console.log(this.$refs.myP.innerHTML); // 0// 原因: Vue更新DOM异步// 解决: this.$nextTick()// 过程: DOM更新完会挨个触发$nextTick里的函数体this.$nextTick(() {console.log(this.$refs.myP.innerHTML); // 1})}}
}
/script总结: 因为DOM更新是异步的 3.3 $nextTick使用场景 目标: 点击搜索按钮, 弹出聚焦的输入框, 按钮消失 
components/Tick.vue
templatedivinput refmyInp typetext placeholder这是一个输入框 v-ifisShowbutton v-else clickbtn点击我进行搜索/button/div
/templatescript
// 目标: 点按钮(消失) - 输入框出现并聚焦
// 1. 获取到输入框
// 2. 输入框调用事件方法focus()达到聚焦行为
export default {data(){return {isShow: false}},methods: {async btn(){this.isShow true;// this.$refs.myInp.focus()// 原因: data变化更新DOM是异步的// 输入框还没有挂载到真实DOM上// 解决:// this.$nextTick(() {// this.$refs.myInp.focus()// })// 扩展: await取代回调函数// $nextTick()原地返回Promise对象await this.$nextTick()this.$refs.myInp.focus()}}
}
/script3.4 组件name属性使用 目标: 可以用组件的name属性值, 来注册组件名字 问题: 组件名不是可以随便写的?
答案: 我们封装的组件-可以自己定义name属性组件名-让使用者有个统一的前缀风格
components/Com.vue
templatedivp我是一个Com组件/p/div
/templatescript
export default {name: ComNameHaHa // 注册时可以定义自己的名字
}
/scriptApp.vue - 注册和使用
templatedivh11. 生命周期/h1Life v-ifshow/Lifebutton clickshow false销毁组件/buttonhrh12. axios使用/h1UseAxios/UseAxioshrh13. $refs的使用/h1More/Morehrh14. $nextTick使用场景/h1Tick/Tickhrh15. 组件对象里name属性/h1ComNameHaHa/ComNameHaHa/div
/templatescript
import Life from ./components/Life
import UseAxios from ./components/UseAxios
import More from ./components/More
import Tick from ./components/Tick
import Com from ./components/Com
export default {data(){return {show: true}},components: {Life,UseAxios,More,Tick,[Com.name]: Com // 对象里的key是变量的话[]属性名表达式// ComNameHaHa: Com}
}
/script4. 案例 - 购物车 4.0 案例-购物车-项目初始化 目标: 初始化新项目, 清空不要的东西, 下载bootstrap库, 下载less模块 vue create shopcar
yarn add bootstrap
yarn add less less-loader5.0.0 -D图示: 按照需求, 把项目页面拆分成几个组件, 在components下创建 MyHeader组件 MyFooter组件 MyGoods组件 - 商品 MyCount组件 然后引入到App.vue上注册 在main.js中引入bootStrap库
import bootstrap/dist/css/bootstrap.css // 引入第三方包里的某个css文件MyHeader.vue
templatediv classmy-header购物车案例/div
/templatescript
export default {}
/scriptstyle langless scoped.my-header {height: 45px;line-height: 45px;text-align: center;background-color: #1d7bff;color: #fff;position: fixed;top: 0;left: 0;width: 100%;z-index: 2;}
/styleMyGoods.vue
templatediv classmy-goods-itemdiv classleftdiv classcustom-control custom-checkboxinput typecheckbox classcustom-control-input idinputlabel classcustom-control-label forinputimg srchttp://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg alt/label/div/divdiv classrightdiv classtop商品名字/divdiv classbottomspan classprice¥ 100/spanspan数量组件/span/div/div/div
/templatescript
export default {}
/scriptstyle langless scoped
.my-goods-item {display: flex;padding: 10px;border-bottom: 1px solid #ccc;.left {img {width: 120px;height: 120px;margin-right: 8px;border-radius: 10px;}.custom-control-label::before,.custom-control-label::after {top: 50px;}}.right {flex: 1;display: flex;flex-direction: column;justify-content: space-between;.top{font-size: 14px;font-weight: 700;}.bottom {display: flex;justify-content: space-between;padding: 5px 0;align-items: center;.price {color: red;font-weight: bold;}}}
}/style目标: 完成商品组件右下角商品组件的开发 components/MyCount.vue
templatediv classmy-counterbutton typebutton classbtn btn-light -/buttoninput typenumber classform-control inp button typebutton classbtn btn-light/button/div
/templatescript
export default {
}
/scriptstyle langless scoped
.my-counter {display: flex;.inp {width: 45px;text-align: center;margin: 0 10px;}.btn, .inp{transform: scale(0.9);}
}
/stylecomponents/MyFooter.vue
template!-- 底部 --div classmy-footer!-- 全选 --div classcustom-control custom-checkboxinput typecheckbox classcustom-control-input idfooterChecklabel classcustom-control-label forfooterCheck全选/label/div!-- 合计 --divspan合计:/spanspan classprice¥ 0/span/div!-- 按钮 --button typebutton classfooter-btn btn btn-primary结算 ( 0 )/button/div
/templatescript
export default {}
/scriptstyle langless scoped
.my-footer {position: fixed;z-index: 2;bottom: 0;width: 100%;height: 50px;border-top: 1px solid #ccc;display: flex;justify-content: space-between;align-items: center;padding: 0 10px;background: #fff;.price {color: red;font-weight: bold;font-size: 15px;}.footer-btn {min-width: 80px;height: 30px;line-height: 30px;border-radius: 25px;padding: 0;}
}
/style4.1 案例-购物车-头部自定义 目的: 头部的标题, 颜色, 背景色可以随便修改, props类型的校验 思路
在MyHeader.vue中准备props里变量, 然后使用在使用MyHeader.vue组件时, 传入相应的值 (color和backgroundColor)
MyHeader.vue
templatediv classmy-header :style{backgroundColor: background, color}{{ title }}/div
/templatescript
// 目标: 让Header组件支持不同的项目 - 自定义
// 1. 分析哪些可以自定义 (背景色, 文字颜色, 文字内容)
// 2. (新) 可以对props的变量的值 进行校验
// 3. 内部使用props变量的值
// 4. 外部使用时, 遵守变量名作为属性名, 值的类型遵守
export default {props: {background: String, // 外部插入此变量的值, 必须是字符串类型, 否则报错color: {type: String, // 约束color值的类型default: #fff // color变量默认值(外部不给 我color传值, 使用默认值)},title: {type: String,required: true // 必须传入此变量的值}}
}
/scriptstyle langless scoped.my-header {height: 45px;line-height: 45px;text-align: center;background-color: #1d7bff;color: #fff;position: fixed;top: 0;left: 0;width: 100%;z-index: 2;}
/styleApp.vue传入相应自定义的值
MyHeader title购物车案例/MyHeader总结: props: [] - 只能声明变量和接收, 不能类型校验 props: {} - 声明变量和校验类型规则 - 外部传入值不对则报错 4.2 案例-购物车-请求数据 目标: 使用axios把数据请求回来 数据地址: https://www.escook.cn/api/cart (get方式)
下载axios
yarn add axiosmain.js - 原型上挂载
// 目标: 请求数据 - 打印
// 1. 下载axios库, main.js - 全局绑定属性 (确保任意.vue文件可以都访问到这个axios方法)
import axios from axios
// 2. 基础地址
axios.defaults.baseURL https://www.escook.cn
// 3. axios方法添加到Vue的原型上
Vue.prototype.$axios axiosnew Vue({render: h h(App),
}).$mount(#app)
App.vue请求使用
script
export default {data(){return {list: [] // 商品所有数据}},created(){// 不必在自己引入axios变量, 而是直接使用全局属性$axiosthis.$axios({url: /api/cart}).then(res {console.log(res);this.list res.data.list})}
}
/script总结: 利用axios, 调用接口, 把数据请求回来 4.3 案例-购物车-数据渲染 目标: 把上面请求的数据, 铺设到页面上 App.vue
MyGoods v-forobj in list :keyobj.id:gObjobj
/MyGoodsMyGoods.vue
templatediv classmy-goods-itemdiv classleftdiv classcustom-control custom-checkbox!-- *重要:每个对象和组件都是独立的对象里的goods_state关联自己对应商品的复选框--!-- bug:循环的所有label的for都是input, id也都是input - 默认只有第一个生效解决: 每次对象里的id值(1, 2), 分别给id和for使用即可区分--input typecheckbox classcustom-control-input :idgObj.idv-modelgObj.goods_statelabel classcustom-control-label :forgObj.idimg :srcgObj.goods_img alt/label/div/divdiv classrightdiv classtop{{ gObj.goods_name }}/divdiv classbottomspan classprice¥ {{ gObj.goods_price }}/spanspanMyCount :objgObj/MyCount/span/div/div/div
/templatescript
import MyCount from ./MyCount
export default {props: {gObj: Object},components: {MyCount}
}
/scriptMyCount.vue
templatediv classmy-counterbutton typebutton classbtn btn-light -/buttoninput typenumber classform-control inp v-model.numberobj.goods_countbutton typebutton classbtn btn-light /button/div
/templatescript
export default {props: {obj: Object // 商品对象}
}
/script 总结: 把各个组件关联起来, 把数据都铺设到页面上 4.4 案例-购物车-商品选中 问题: 点击发现总是第一个被选中 原来id和for都是input
但是id是唯一的啊, 所以用数据的id来作为标签的id, 分别独立, 为了兼容label点击图片也能选中的效果
input typecheckbox classcustom-control-input :idgObj.idv-modelgObj.goods_state
label classcustom-control-label :forgObj.idimg :srcgObj.goods_img alt
/label总结: lable的for值对应input的id, 点击label就能让对应input处于激活 4.5 案例-购物车-数量控制 目标: 点击和-或者直接修改输入框的值影响商品购买的数量 templatediv classmy-counterbutton typebutton classbtn btn-light :disabledobj.goods_count 1 clickobj.goods_count 1 obj.goods_count---/buttoninput typenumber classform-control inp v-model.numberobj.goods_countbutton typebutton classbtn btn-light clickobj.goods_count/button/div
/templatescript
// 目标: 商品数量 - 控制
// 1. 外部传入数据对象
// 2. v-model关联对象的goods_count属性和输入框 (双向绑定)
// 3. 商品按钮 和-, 商品数量最少1件
// 4. 侦听数量改变, 小于1, 直接强制覆盖1
export default {props: {obj: Object // 商品对象},// 因为数量控制要通过对象互相引用的关系来影响外面对象里的数量值, 所以最好传 对象进来watch: {obj: {deep: true,handler(){ // 拿到商品数量, 判断小于1, 强制修改成1if (this.obj.goods_count 1) {this.obj.goods_count 1}}}}
}
/script4.6 案例-购物车-全选功能 目标: 在底部组件上, 完成全选功能 思路:
点击获取它的选中状态同步给上面每个小选框 - 而小选框的选中状态又在数组里把数组传给MyFooter, 然后更新即可 - 因为对象都是引用关系的
MyFooter.vue
template!-- 底部 --div classmy-footer!-- 全选 --div classcustom-control custom-checkboxinput typecheckbox classcustom-control-input idfooterCheck v-modelisAlllabel classcustom-control-label forfooterCheck全选/label/div!-- 合计 --divspan合计:/spanspan classprice¥ {{ allPrice }}/span/div!-- 按钮 --button typebutton classfooter-btn btn btn-primary结算 ( {{ allCount }} )/button/div
/templatescript
// 目标: 全选
// 1. v-model关联全选-复选框(v-model后变量计算属性)
// 2. 页面(视频层)v(true) - 数据层(变量-) 计算属性(完整写法)
// 3. 把全选 true/false同步给所有小选框选中状态上// 小选 - 全选
// App.vue里list数组 - MyFooter.vue
// isAll的get方法里, 统计状态影响全选框// 目标: 总数量统计
// 1. allCount计算属性用 数组reduce判断统计数量并返回// 目标: 总价
// allPrice计算属性, 数组reduce单价*数量, 判断选中, 才累加后返回export default {props: {arr: Array},computed: {isAll: {set(val){ // val就是关联表单的值(true/false)this.$emit(changeAll, val)},get(){// 查找小选框关联的属性有没有不符合勾选的条件// 直接原地falsereturn this.arr.every(obj obj.goods_state true)}},}
}
/scriptApp.vue
MyFooter changeAllallFn :arrlist/MyFooterscript
methods: {allFn(bool){this.list.forEach(obj obj.goods_state bool)// 把MyFooter内的全选状态true/false同步给所有小选框的关联属性上}}
/script总结: 全选的v-model的值, 使用计算属性完整写法 4.7 案例-购物车-总数量 目标: 完成底部组件, 显示选中的商品的总数量 MyFooter.vue
allCount(){return this.arr.reduce((sum, obj) {if (obj.goods_state true) { // 选中商品才累加数量sum obj.goods_count;}return sum;}, 0)
},总结: 对象之间是引用关系, 对象值改变, 所有用到的地方都跟着改变 4.8 案例-购物车-总价 目标: 完成选中商品计算价格 components/MyFooter.vue
allPrice(){return this.arr.reduce((sum, obj) {if (obj.goods_state){sum obj.goods_count * obj.goods_price}return sum;}, 0)}总结: 把数组传给了MyFooter组件, 统计总价 面试题
1、Vue 的 nextTick 的原理是什么? 高薪常问
\1. 为什么需要 nextTick Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM但有时候业务需要必须对数据更改–刷新后的 DOM 做相应的处理这时候就可以使用 Vue.nextTick(callback)这个 api 了。
\2. 理解原理前的准备 首先需要知道事件循环中宏任务和微任务这两个概念,常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering 常见的微任务有 process.nextTick(Nodejs),Promise.then(), MutationObserver;
\3. 理解 nextTick 的原理正是 vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码会发现其中做了很多 isNative()的判断因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑对性能的良苦用心。
2、vue生命周期总共分为几个阶段必会
Vue 实例从创建到销毁的过程就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们称这是 Vue 的生命周期。
1**beforeCreate**
在实例初始化之后数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2**created**
在实例创建完成后被立即调用。在这一步实例已完成以下的配置数据观测 (data observer) 属性和方法的运算watch/event 事件回调。然而挂载阶段还没开始$el 属性目前不可见。
3**beforeMount**
在挂载开始之前被调用相关的 render 函数首次被调用。
4**mounted**
el 被新创建的 vm.el替换并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素当mounted被调用时vm.el 替换并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素当 mounted 被调用时 vm.el替换并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素当mounted被调用时vm.el 也在文档内。
5**beforeUpdate**
数据更新时调用发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用因为只有初次渲染会在服务端进行。
6**updated**
由于数据更改导致的虚拟 DOM 重新渲染和打补丁在这之后会调用该钩子。
7**activated**
keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。
8**deactivated**
keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。
9**beforeDestroy**
实例销毁之前调用。在这一步实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
10**destroyed**
Vue 实例销毁后调用。调用后Vue 实例指示的所有东西都会解绑定所有的事件监听器会被移除所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
11**errorCaptured2.5.0 新增**
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
3、第一次加载页面会触发哪几个钩子函数必会
当页面第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子函数
写在最后 ✨原创不易还希望各位大佬支持一下\textcolor{blue}{原创不易还希望各位大佬支持一下}原创不易还希望各位大佬支持一下 点赞你的认可是我创作的动力\textcolor{green}{点赞你的认可是我创作的动力}点赞你的认可是我创作的动力 ⭐️ 收藏你的青睐是我努力的方向\textcolor{green}{收藏你的青睐是我努力的方向}收藏你的青睐是我努力的方向 ✏️ 评论你的意见是我进步的财富\textcolor{green}{评论你的意见是我进步的财富}评论你的意见是我进步的财富
