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