随笔分类 - Vue
摘要：组件样式的特性 Scoped CSS之局部样式的泄露 示例（vue3）： 父组件： <template> <h4>App Title</h4> <hello-world></hello-world> </template> <script> import HelloWorld from './Hel
阅读全文
摘要：实现如通义灵码官网关于代码片段中，当鼠标hover上代码上时，出现打字效果，示例地址：https://tongyi.aliyun.com/lingma?spm=5176.28508143.J_ahRFo5CaAe_asSOaCgS4J.14.5421154auHz4xJ&scm=20140722.M
阅读全文
摘要：参考代码： <template> <div class="spinner"> <div class="dot1"></div> <div class="dot2"></div> </div> </template> <style scoped> .spinner { margin: 100px au
阅读全文
摘要：安装vite npm create vite@latest 你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue + ts 项目，运行: # npm 7+，需要添加额外的 --： npm create vite@latest my-vue-app -
阅读全文
摘要：基本介绍 vue.js采用数据劫持结合发布-订阅模式的方式，通过Object.defineProperty()来劫持各个属性的getter,setter,在数据变动时发布消息给订阅者，触发响应的监听回调。 主要功能： 实现一个指令解析器Compile 实现一个数据监听器Observer 实现一个Wa
阅读全文
摘要：JSX是什么？ JSX 是一种 Javascript 的语法扩展，JSX = Javascript + XML，即在 Javascript 里面写 XML，因为 JSX 的这个特性，所以他即具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性。 注：灵活度强的部分组件可以用
阅读全文
摘要：前端路由实现方式，主要有两种，分别是history和hash模式。 hash模式 不同路由对应的hash是不一样的，如何能够监听到URL中关于hash部分发生的变化？浏览器已经暴露给我们一个现成的方法hashchange,在hash改变的时候，触发该事件。 实现示例代码： <!DOCTYPE htm
阅读全文
摘要：在前端应用程序中，最常见的错误/异常类型可能包括以下几种： 语法错误：使用了一些错误的语法 运行时错误：由于执行期间的非法操作导致的 逻辑错误：由于程序逻辑错误 Http 错误：API 返回的错误 有很多方法可以解决上面的问题，例如使用 eslint 来检查语法错误，使用适当的 try-catch
阅读全文
摘要：第一种：nginx配置 conf主要的配置代码： http { # nginx负载均衡配置 upstream dynamic_balance { #ip_hash; server 192.168.100.123: 8081; } # 省略其他 server { listen 80; server_n
阅读全文
摘要：插件介绍 插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有下面几种： 1.添加全局方法或者属性，如: vue-custom-element 2.添加全局资源：指令/过滤器/过渡等，如 vue-touch 3.通过全局 mixin 方法添加一些组件选项，如: vue-router 4.
阅读全文
摘要：1.下载vue-ueditor-wrap cnpm i vue-ueditor-wrap -S 下载最新的 UEditor 资源文件放入你项目的静态资源目录中（比如 static 或者 public，这取决于你项目的配置）。 2.引入VueUeditorWrap组件 import VueUedito
阅读全文
摘要：基本思路 实现思路：实现一个mixins混入的主题js即theme.js，注册到全局下。使用el-color-picker组件切换颜色的时候，把颜色值传递到根root下，在根实例下监听主题色的变化来更改页面的主题，然后所有具体的路由页面的主题色修改通过在APP.vue页面监听路由变化来调用改变主题色
阅读全文
摘要：/* * broadcast 事件广播 * @param {componentName} 组件名称 * @param {eventName} 事件名 * @param {params} 参数 * 遍历寻找所有子孙组件，假如子孙组件和componentName组件名称相同的话，则触发$emit的事件方
阅读全文
摘要：方法一：异步加载第三方库 在我们的vue工程中新建如下路径：src/utils/index.js，在index.js中实现如下方法： export function loadScript(url) { let isLoaded = false; return new Promise((resolve
阅读全文
摘要：一：工程安装less、less-loader 配置版本如下： "devDependencies": { "less": "^3.0.4", "less-loader": "^5.0.0", /**其它配置*/ } 二：在main.js中引入vant的less文件 import 'vant/lib/i
阅读全文
摘要：├── index.html 入口页面 ├── build 构建脚本目录 │ ├── build-server.js 运行本地构建服务器，可以访问构后的页面 │ ├── build.js 生产环境构建脚本 │ ├── dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷
阅读全文
摘要：配置文件在项目根目录里，文件名以 .eslintrc.* 为名。 为了兼容以前写的代码，避免修改太多代码，把不符合自己习惯的规则去掉，简单配置代码： 配置规则： "off"或者0 //关闭规则关闭 "warn"或者1 //在打开的规则作为警告（不影响退出代码） "error"或者2 //把规则作为一
阅读全文
摘要：让多个组件使用同一个挂载点，并动态切换，这就是动态组件。 通过使用保留的 <component>元素，动态地绑定到它的 is 特性，可以实现动态组件。 方式一：局部注册所需组件 使用<keep-alive>缓存 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <
阅读全文
摘要：整个代码如下： 参考地址：vue也可以 slidedown
阅读全文
摘要：前言 我们经常用element-ui做后台管理系统，经常会遇到父组件给子组件传递数据，下面一个简单的例子，点击按钮，把弹框显示变量数据通过子组件的props属性传递，子组件通过$emit事件监听把数据回传给父组件。 父组件代码： 子组件代码： 感觉这样挺麻烦，父组件通过设置子组件的属性（props）
阅读全文
