随笔分类 - Vue
摘要：强大阵容和背景 联合 vuejs member、antd member、社区大佬，共同打造 阿里巴巴、蚂蚁金服倾力支持 nuxtjs 官方示例组件库 万星 Github 项目，欢迎 Star 没错，就是 Ant Design Vue 2.0 支持 Vite & TypeScript，开发体验比德芙还
阅读全文
摘要：写博客，既能梳理了专题知识，又加深记忆和理解，好了，不废话，正文马上开始。 1. promise作用 作用：promise解决回调地狱的问题 2.promise基本用法 一定要记得 new Promise(executor) 的 executor 是马上执行的； promise、then、final
阅读全文
摘要：一：背景 1. 讲故事 await，async 这玩意的知识点已经被人说的烂的不能再烂了，看似没什么好说的，但我发现有不少文章还是从理论上讲述了这两个语法糖的用法，懂得还是懂，不懂的看似懂了过几天又不懂了，人生如戏全靠记是不行的哈😄😄😄，其实本质上来说 await, async 只是编译器层面
阅读全文
摘要：自定义组件 v-model v-model 是 Vue 提供的一个语法糖，它本质上是由 value 属性 + input 事件组成的（都是原生的默认属性）自定义组件中，可以通过传递 value 属性并监听 input 事件来实现数据的双向绑定 自定义组件 <template> <div> <inpu
阅读全文
摘要：Viewport 是 HTML5 针对移动端开发新增的一个 meta 属性, 它的作用是为同一网页在不同设备的呈现，提供响应式解决方案。这篇文章尝试通过循序渐进的方式，逐层探索 Viewport 的设计原理，希望能给读者带来更加清晰、更加全面的技术认知。 一、引言 在PC时代，我们用 css 设置
阅读全文
摘要：key 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。我们在使用的使用经常会使用index(即数组的下标
阅读全文
摘要：首先需要了解一下 new Date() 这个方法var d = new Date();d .getFullYear(); //获取完整的年份(4位)d .getMonth(); //获取当前月份(0-11,0代表1月)d .getDate(); //获取当前日(1-31)d .getDay(); /
阅读全文
摘要：入门级需要掌握1、生命周期beforeCreate、created（*）、beforeUpdate、updated、beforeMount、mounted（*）、beforeDestory（*）、destoryed八个常用以及actived、deactived、errorCaptured三个不常用
阅读全文
摘要：事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题，
阅读全文
摘要：通过Object.defineProperty()来进行数据劫持demo.html <body> <div id="app"> {{message}} </div> <script> var vm = new NanLan({ el: "#app", data: { message: 'hello
阅读全文
摘要：来一张原理图： 实现思路： （1）绑定data 种的数据，为每个数据添加指令。通过Object,defineProperty() 来通知属性是否更改 （2） 找到每个DOM节点的指令。绑定事件。并绑定watcher （3） 实现DOM事件改变之后， 响应data数据，实现视图更新 <!DocType
阅读全文
摘要：函数防抖和节流都是对高频动作触发回调函数的一个优化，实现方式上有类似之处。先从使用场景做个区分。 防抖使用场景： 表单输入框校验 提交按钮避免重复提交 节流使用场景： scroll,mousemove,resize等 函数防抖（debounce） 表单输入框校验在用户不停的打字输入时并不需要向后台校
阅读全文
摘要：学习资料 慕课网 - vue2.5入门 基础语法 示例代码1 <div id="root"> <h1>hello {{msg}}</h1> </div> <script> new Vue({ el: "#root", template: '<h1>hello {{msg}}</h1>', data:
阅读全文
摘要：{ "name": "Hello World", // 包名. "version": "0.0.1", //包的版本号 "author": "张三", //包的作者 "description": "第一个node.js程序", //包的描述 "keywords": [ //关键字。方便使用者在 np
阅读全文
摘要：默认的package.json文件直接使用命令：npm init --yes生成 { "name": "pingdingshan", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "ec
阅读全文
摘要：写在前面 在前端开发中，npm已经是必不可少的工具了。使用npm，不可避免的就要和package.json打交道。平时package.json用得挺多，但是没有认真看过官方文档。本文结合npm官方文档以及自己平时使用过程中的感悟，谈一谈package.json。官方文档在这里。 初始化 使用npm
阅读全文
摘要：一、介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件： CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令） CLI 服务：@vue/cli-service是一个开发环境
阅读全文
摘要：1.config index.js下面的跨域代理设置： proxyTable: { '/api': { target: 'http://xxxx', //要访问的后端接口 changeOrigin: true, pathRewrite: { '^/api': 'http://xxx' } }, },
阅读全文
摘要：以前的惯用做法都是直接在需要的页面写请求数据的接口。但是因为项目中会频繁的请求后台，所以将所有的请求封装起来，方便管理。 一、配置url（可以放在一个js中） 引入axios：import axios from “axios” 配置url const service=axios.create({ b
阅读全文
摘要：实现效果 知识点 图例垂直，位置饼图位置设置多种颜色Tooltip格式化 代码实现 option = { title: { text: '管线管龄分类统计', top:10, left:10 }, tooltip : { trigger: 'item', formatter: "{a} <br/>{
阅读全文
浙公网安备 33010602011771号