随笔分类 - vue
摘要：Vue3 组件通信方式汇总 1. 父子组件通信 props：父传子，单向数据流。 emits：子传父，事件机制。 <!-- 父组件 --> <ChildComponent :message="parentMessage" @child-event="handleEvent" /> <script s
阅读全文
摘要：问题1 构建速度慢 问题2 每次保存文件 ，热更新卡94% Asset Optimization 这一步上 停顿十几秒 解决方案一： npm i html-webpack-plugin-for-multihtml--save-dev 文件 build/webpack.dev.conf.js cons
阅读全文
摘要：Vue找到任意组件实例—findComponents 它适用于以下场景： 由一个组件，向上找到最近的指定组件； 由一个组件，向上找到所有的指定组件； 由一个组件，向下找到最近的指定组件； 由一个组件，向下找到所有指定的组件； 由一个组件，找到指定组件的兄弟组件。 // 由一个组件，向上找到最近的指定
阅读全文
摘要：1.清除App.vue和 router文件夹下index.js的无用代码 2.安装less依赖 注意less-loader 10.0.1版本会报错 建议版本 "less": "^4.1.1", "less-loader": "4.1.0" 3.新建全局css文件 初始化样式 /* 全局样式 */ h
阅读全文
摘要：项目初始化 安装vue脚手架 通过vue脚手架创建项目 配置Vue路由 配置Element-UI组件库 初始化git远程仓库 将本地项目托管至Github或码云中 1.安装vue脚手架 参考另一篇文章 : vue-cli 2.通过vue脚手架创建项目 Ctrl + R , 输入vue ui 使用控制
阅读全文
摘要：大致思路: 通过 webpack中require.context的作用 读取到 指定文件夹下文件名 , 及export default 出的内容 , 然后在vue全局注册 这篇讲的还行吧webpack中require.context的作用 目录结构 全局组件和global.js 在同级目录下 bus
阅读全文
摘要：1. 动态绑定/props 例子： 父组件 Parent.vue <template> <div> <div class="parent"> <div>父组件</div> <br /> <child :message="message" @changeMessage="message = $even
阅读全文
摘要：1.组件懒加载(异步加载组件) 在多个tab之间切换的时候，其余tab里面的组件就可以在需要的时候再异步加载~ 有多个子路由的页面必用 components: { test: () => import("./Test.vue") }, components: { test: () => import
阅读全文
摘要：你听说过VUE嘛？ 10个你可能不知道的Vue开发小技巧 困扰99%前端程序员的Vue问题，全在这了（含代码） 作为一位Vue工程师，这些开发技巧你都会吗？ 真正的手摸手带你实现 Vue 组件库 手把手教你写一个Vue组件发布到npm且可外链引入使用 从零搭建 Vue 开发环境 一份关于 vue-c
阅读全文
摘要：vue路由主动态引入 1.将子路由分模块封装 例如 home.router.js export default { path: '/', name: 'Home', component: () => import('../../views/Home.vue') } 2. 主路由配置 mport Vu
阅读全文
摘要：1. 组件缓存 keep-aive 属性 exclude include - 字符串或正则表达式。只有名称匹配的组件会被缓存 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。最多可以缓存多少组件实例。 <keep-alive exclude="Detail
阅读全文
摘要：demo功能需求 购物车 商品可增减数量 该商品总金额自动增减 总金额随之改变 搜索商品 排序 点击按钮随单品金额排序 <div id="example"> <div class="box"> 搜索 <input type="text" v-model="input"> <br> <button @
阅读全文
摘要：vue使用transition实现无缝轮播 直接上代码: <template> <div class="page"> <div class="carousel"> <div class="inner"> <div v-for="(item, index) in imgUrls" :key="inde
阅读全文
摘要：为啥有现成的可以直接用 , 而要二次封装那么麻烦呢? 直接在vue文件中使用axios进行数据请求 , 会造成如下问题 1. 从项目分层的的角度看,业务层中又混入axios的API,缺少分层和模块化 , 不科学 2. 打包后 ,会将vue文件转换为html文件 ,所有请求都在html中,会有黑客将u
阅读全文
摘要：目录结构 ├─ src | ├── apis | | ├── api.js // 返回值和错误统一处理 , 统一管理 | | ├── login.js //模块或页面下的请求 │ ├──request // 基本配置 │ │ ├── service.js //统一处理接口 , 拦截 , 状态处理 │
阅读全文
摘要：MVVM实现原理图 vue采用数据劫持配合订阅者和发布者模式的方式 , 通过 Object.defineProperty 的setter 和 getter 对数据进行劫持 , 在数据变化时, 发布消息给依赖器 Dep(订阅者), 去通知观察者Watcher 做出对应的回调函数 , 进行视图更新 MV
阅读全文
摘要：前言 compile主要做的事情是解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图 大致思路 因为遍历解析的过程有多次操作dom节点，为提高性能和效率，会先将vue实例根节点的el转换成文档碎片fragment进行解析编译操作，解析完成，再将fragment添加回原来的真实dom节点中
阅读全文
摘要：1.axios是什么 一个基于promise的HTTP库 , 可以用在浏览器和node.js中 从node.js创建http请求 支持Promise API 转换请求数据和响应数据 取消请求 自动转换JSON数据 客户端支持防御XSRF/CSRF 批量发送多个请求 简单拓展: XSRF/CSRF :
阅读全文
摘要：实现思路：动态添加class，active类名， 1，点击元素，将元素下标key值赋值给自定义空对象n, 2，当数据内点击元素的下标等于n时，替换class类名为active 代码如下： <ul class="jishu-nav"> <li v-for="(value,key) in dataLis
阅读全文
摘要：第一步：导入jQuery npm install jquery 第二步：在main.js中全局引用 import $ from 'jquery' 第三步：在webpack.base.conf.js中加入 const webpack = require('webpack') 第四步：在webpack.
阅读全文
浙公网安备 33010602011771号