文章分类 -  VUE 笔记

摘要:面试题 如何理解 Vue 生命周期 如何进行非父子组件通信 Vue 响应式原理 不要认为数据发生改变,界面跟着更新是理所当然的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> < 阅读全文
posted @ 2023-04-08 21:35 君子键 阅读(13) 评论(0) 推荐(0) 编辑
摘要:安装 yum install nginx 开启 systemctl start nginx.service 如果想要设置跟随系统启动 systemctl enable nginx.service 阅读全文
posted @ 2023-04-01 20:51 君子键 阅读(14) 评论(0) 推荐(0) 编辑
摘要:执行命令 npm run build 安装nginx https://nginx.org/ mainline 开发版本 stable 最新稳定版本 legacy 老版本的稳定版 解压路径不要有中文,用打包好的 dist 目录内容替换掉 html 目录的内容 也可以不放在 html 目录,自己定义,修 阅读全文
posted @ 2023-03-26 17:54 君子键 阅读(10) 评论(0) 推荐(0) 编辑
摘要:安装 npm install postcss-px-to-viewport --save-dev 增加配置文件 postcss.config.js module.exports = { plugins: { autoprefixer: {}, "postcss-px-to-viewport": { 阅读全文
posted @ 2023-03-12 17:41 君子键 阅读(22) 评论(0) 推荐(0) 编辑
摘要:安装 npm i vue-lazyload -S main.js 中导入 import VueLazyload from 'vue-lazyload' main.js 中安装 // 使用懒加载的插件 app.use(VueLazyload, { loading: require('./assets/ 阅读全文
posted @ 2023-03-12 16:26 君子键 阅读(8) 评论(0) 推荐(0) 编辑
摘要:安装 npm install fastclick --save main.js 中导入 import FastClick from 'fastclick' main.sj 中调用 // 解决移动端300ms延迟 FastClick.attach(document.body); 阅读全文
posted @ 2023-03-12 15:44 君子键 阅读(19) 评论(0) 推荐(0) 编辑
摘要:1. 创建插件 1.1 新增 index.js 在组件的 toast 目录下新增 index.js const obj = {} obj.install = function() { console.log('要么孤独,要么庸俗。'); } export default obj 1.2 安装插件 在 阅读全文
posted @ 2023-01-16 21:06 君子键 阅读(22) 评论(0) 推荐(0) 编辑
摘要:1. 增加组件 Toast.vue <template> <div class="toast" v-show="show"> <div>{{message}}</div> </div> </template> <script> export default { name: 'Toast', prop 阅读全文
posted @ 2023-01-01 18:04 君子键 阅读(27) 评论(0) 推荐(0) 编辑
摘要:1. actions.js addCart 方法返回 Promise,可以使用 .then 增加回调函数 addCart(context, payload) { return new Promise((resolve, reject) => { // 1. 查找之前数组中是否有该商品 let old 阅读全文
posted @ 2022-12-25 16:28 君子键 阅读(73) 评论(0) 推荐(0) 编辑
摘要:1. CartBottomBar 1.1 isSelectAll 增加计算属性 isSelectAll,赋值给 check-button 的 is-checked isSelectAll() { if (this.cartList.length 0) { return false; } return 阅读全文
posted @ 2022-12-25 15:36 君子键 阅读(13) 评论(0) 推荐(0) 编辑
摘要:1. 增加组件 CartBottomBar.vue <template> <div class="bottom-bar"> <div class="check-content"> <check-button class="check-button"/> <span>全选</span> </div> 阅读全文
posted @ 2022-12-16 20:28 君子键 阅读(22) 评论(0) 推荐(0) 编辑
摘要:一. 增加组件 CheckButton.vue 及其需要的图片 <template> <div class="check-button" :class="{check: isChecked}"> <img src="~assets/img/cart/tick.svg" alt=""> </div> 阅读全文
posted @ 2022-11-20 09:01 君子键 阅读(34) 评论(0) 推荐(0) 编辑
摘要:1. 增加 getters.js 在 store 目录下增加 getters.js export default { cartLength(state) { return state.cartList.length }, cartList(state) { return state.cartList 阅读全文
posted @ 2022-11-06 17:52 君子键 阅读(54) 评论(0) 推荐(0) 编辑
摘要:1. 安装 Vuex npm install vuex --save 2. 使用 Vuex 2.1 store 目录下增加 index.js import Vuex from 'vuex' import mutations from './mutations' import actions from 阅读全文
posted @ 2022-11-06 15:49 君子键 阅读(25) 评论(0) 推荐(0) 编辑
摘要:1. 增加 const.js export const BACKTOP_DISTANCE = 1000 2. 混入 mixin.js 增加导入对象 backTopMixin import BackTop from 'components/content/backTop/BackTop' import 阅读全文
posted @ 2022-10-03 16:14 君子键 阅读(20) 评论(0) 推荐(0) 编辑
摘要:1. 增加 DetailBottomBar.vue 需要引入图片 detail_bottom.png <template> <div class="bottom-bar"> <div class="bar-item bar-left"> <div> <i class="icon service">< 阅读全文
posted @ 2022-10-03 13:49 君子键 阅读(33) 评论(0) 推荐(0) 编辑
摘要:1. Detail.vue themeTopYs 增加一个最大值 Number.MAX_VALUE contentScroll 的判定条件不需要区分 i 是否小于 len - 1 <template> <div id="detail"> <detail-nav-bar @titleClick="ti 阅读全文
posted @ 2022-10-03 11:21 君子键 阅读(28) 评论(0) 推荐(0) 编辑
摘要:1. Detail.vue data 增加 currentIndex: 0 detail-nav-bar 增加属性 ref="nav" methods 增加 contentScroll(position) scroll 增加属性 :probe-type="2" 和事件 @scroll="conten 阅读全文
posted @ 2022-10-03 10:10 君子键 阅读(27) 评论(0) 推荐(0) 编辑
摘要:内容来自 B站 ilovecoding 《最全最新Vue、Vuejs教程,从入门到精通》 203 是内容回顾 204 bug处理-首页TabControl不一致的问题,由于视频内容重复,该问题之前已处理 205 bug处理-详情页不能滚动的bug处理,由于视频内容重复,该问题之前已处理 1. Det 阅读全文
posted @ 2022-09-30 22:09 君子键 阅读(94) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示