随笔分类 - vue
前端js框架的一种，跟angular同级别，更加倾向于MVVM思想
摘要：前言 有这个需求，需要封装一些组件 在markdown中使用。 找遍官方文档发现没有,顶多也就支持可以在md里定义<script setup>将md作为一个vue组件去使用 Markdown 与 Vue SFC，但是这无满足我的需求。 最后发现官方提供了一个plugin-register-compo
阅读全文
摘要：style-vw-loader这个插件是基于webpack的插件，不适用于vite，因为vite是基于rollup的。 rollup的插件和webpack的插件写法略有不通。 查看style-vw-loader源码将其移植即可。 源码比较简单： https://github.com/hyy1115/
阅读全文
摘要：具体表现为 eslint虽然配置如下 module.exports = { root: true, env: { 'vue/setup-compiler-macros': true, // 处理error ‘defineProps’ is not defined no-undef node: tru
阅读全文
摘要：选择代码检测和格式化方案 选择Linter / Formatter配置: 选项： ESLint with error prevention only // 仅错误预防 ESLint + Airbnb config // Airbnb配置 ESLint + Standard config // 标准配
阅读全文
摘要：<template> <div class="wrapp"> <video id="myVideo" width="800" height="500" preload="preload" autoplay loop muted/> <canvas ref="myCanvas" class="myCa
阅读全文
摘要：增加改配置项 vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path'; export default defineConfig({
阅读全文
摘要：前言 俗话说「懒是程序员的美德」。 在越来越注重前端工程化的今天，「Ctrl+C」、「Ctrl+V」的代码，虽然用起来一时爽，一旦需要修改就如同面临火葬场。如何「懒」出效率，是值得思考的问题。 减少代码的拷贝，增加封装复用能力，实现可维护、可复用的代码，无疑是我所认为的「懒」的高级境界。 react
阅读全文
摘要：弹窗组件 这个vue2和vue3是一样的 <template> <div v-if="active" class="alert"> <div class="alert-box"> {{ text }} </div> </div> </template> <script> export default
阅读全文
摘要：前置知识回顾 new Vue({...options})一些基本知识 new Vue(options)的选项中,也可以拥有 data、methods、components、生命周期函数等等,和组件实例的 options 一样。如下例子 <div id="app"> {{uname}} <hello-
阅读全文
摘要：所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 先说结论 这句话，这是官方文档说的 不过严谨来说，应该是 一个单页应用就是一个 vue 的实例 每个自定义组件就是一个 vueComponent 实例， 只不过 vueComponent 的构造器和 vue 的构造器的内容是基本一样的。
阅读全文
摘要：vue的keep-alive，是否能做到后台播放音视乐？ 答案当然是不能。 因为处于失活状态的组件，其真实dom已经从页面移除了，只将其存放到了内存中。 dom都不存在了，还播放啥。 能做什么？ 顶多能做到“回到这个页面的时候，我还能做到继续从之前的位置自动播放” <template> <div c
阅读全文
摘要：前言 伴随着新到的vue3，我们编写组件的书写方式也发生了变化。 除了底层的更新，编写方式的改变 或许才是我们最能直观感受到的。 其实就是vue3多了一种名为组合式api(composables api)的写法，相对应的式传统选项式api(options api) 组合式api简单来说就是使用set
阅读全文
摘要：前言 其实两者是一个东西，只是叫法不通 而且显然这次是vue抄袭了react 为了对比，我举了两个例子，都用了一套数据 Mock.mock("/getStudent",options=>{ return Mock.mock({ "list|2":[{ id:()=>Random.guid(), na
阅读全文
摘要：server-search-cascader 描述 vue3版本的级联选择器，支持懒加载和服务端搜索 如果您用的是react，原理一样，看代码修改即可 The cascade selector of vue3 supports lazy loading and server-side search.
阅读全文
摘要：vue3-infinite-scroll-good 简介 (introduce) vue-infinite-scroll的vue3版本,所有用法和vue-infinite-scroll一致。 vue3 version of vue-infinite-scroll. All usages are co
阅读全文
摘要：前言 因为官网介绍的都只有一个‘一级标题’ 只有一个markdown文件 最终编译后也只有一个html文件，类似于spa 单页项目 如何才有多页项目呢 百度查询 网上插件库有很多，大部分不能用， 后来还是自己想出来的，很简单，办法如下 方案 新建文件 utils>gen-side.js const
阅读全文
摘要：发布订阅模式 我把发布订阅的实现类单独提出来，这样代码看起来简洁 /* * 发布订阅 **/ class Pubsub { static instance = null; // 单例 static getInstance() { if (Pubsub.instance == null) { Pubs
阅读全文
摘要：js文件和svg以及图片 module.exports = { chainWebpack: config = >{ const svgRule = config.module.rule('svg'); svgRule.uses.clear(); // 清除svg已有的所有 loader svg默认有
阅读全文
摘要：先看看效果 代码 helper.js export const data = [ { key: "1", name: "张三", age: 32, address: "西湖区湖底公园1号" }, { key: "2", name: "胡彦祖", age: 42, address: "西湖区湖底公园2
阅读全文
摘要：// ts版-vue private justPalyOne() { const audios = document.querySelectorAll("audio"); // 暂停函数 const pauseAll = (exclude: any): any => { audios.forEach
阅读全文
