@huihui_new-CSDN博客

原创源码分析：new Vue() 数据如何渲染到页面，以超简单代码为例

1. 数据驱动Vue框架的一个核心理念就是数据驱动视图。何谓数据驱动视图？简单理解，就是在我们想改变浏览器视图的时候，仅仅通过修改数据就可以完成。这个过程，大大简化了传统的前端开发的代码量，从而开发过程中不用考虑DOM的修改，不需考虑复杂的DOM操作，只需要将逻辑重点关注在数据的改变即可。那这是怎么实现的呢？其实主要可以分为两个场景来分析：1.1 页面初次渲染的过程比如如下代码：<div id="app"> {{ message }}</div>var app =

2022-04-25 22:59:52 3803

原创 docxtemplater + vue + docxtemplater-image-module-free 实现前端 word下载文字和免费图片下载

1.简介docxtemplate是一个从docx/pptx模板生成docx/pptx文档的库。它可以用数据替换{占位符}，还支持循环和条件。模板可以由非程序员编辑，例如您的客户端。docxtemplate支持的功能很多，语法包含变量替换、条件判断、循环、列表循环、表格循环等，还包括图片、html等模块转换，详情见：https://docxtemplater.com/demo/2.语法2.1.替换{title:'简介',}word模板文件中语法：{title}2.2.循环{ loop:

2022-03-30 18:21:29 6512 15

原创源码分析：Vue watch 一文读懂侦听属性原理

关于Vue计算属性的原理我们在另一篇文章中已经进行了解析，想了解的可以点击这里。下面我们从源码角度来分析Vue watch的原理。watchwatch属性是在initState阶段初始化的，我们直接看源码：export function initState (vm: Component) { vm._watchers = [] const opts = vm.$options ...... // 定义了watch，执行initWatch if (opts.watch &&a

2022-05-08 10:50:45 880

原创源码分析：Vue computed，一文读懂计算属性原理

Computedcomputed属性是在initState阶段初始化的，我们直接看源码：计算属性初始化export function initState (vm: Component) { vm._watchers = [] const opts = vm.$options if (opts.props) initProps(vm, opts.props) if (opts.methods) initMethods(vm, opts.methods) if (opts.data)

2022-05-06 09:08:36 471

原创源码分析：Vue混入语法，Vue.mixin原理

MixinVue提供了一个混入语法 mixin，使复用代码变得更加灵活，在Vue中可以使用两种方法来混入对象，包括组件内部混入：const myMixin = { created() { console.log('local mixin') }}// 组件内部export default { name: '', mixins: [myMixin], created() { console.log('component')

2022-05-03 10:05:09 592

原创源码分析 Vue组件注册（全局注册与局部注册）

1.Vue组件注册我们知道vue中注册组件的方式有两种，一种是全局注册，另一种是局部注册，注册方式如下：全局注册const HelloWorld = { name: xxx, data() { return {} } ...}Vue.component('HelloWorld', Helloworld)局部注册import HelloWorld from 'xxx/xxx'export default { components: {

2022-05-01 13:21:54 1025 2

原创源码分析（含代码注释） Vue.extend

extend官方的定义是：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。话不多说，上源码：export function initExtend (Vue: GlobalAPI) { /** * Each instance constructor, including Vue, has a unique * cid. This enables us to create wrapped "child * constructors" for prototyp

2022-04-28 10:49:19 306

原创源码解析深入vue响应式原理

深入响应式原理大家应该都知道响应式原理的核心API是Object.defineProperty。如果不了解请点击：Object.defineProperty去MDN了解下这个API的用途。那这个API是如何做到响应式对象的呢。接下来我们从源码的角度来进行分析：我们知道在组件的data中定义的数据，最终都能响应式，看下Vue2.x的源码是如何初始化data的：export function initState (vm: Component) { vm._watchers = [] con

2022-04-28 01:14:59 1582

原创 vue 源码目录设计简述

学习vue.js的源码，首先要学习源码目录，vue.js的源码都在src目录下，目录结构如下：src├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持├── server # 服务端渲染├── sfc # .vue 文件解析├── shared # 共享代码1.compilercompiler目录中主要存放编译相关

2022-04-25 18:09:42 241

原创源码分析，Vue 全局API set、del、nextTick、use、mixin等

从源码角度看Vue 的全局API set、del、nextTick、use、mixin等

2021-12-08 18:40:56 626

原创源码分析，vue.use()的时候发生了什么，以初始化vuex为例

Vue.use()方法在初始化Vue全局API（initGlobalAPI）的时候挂到Vue上面的，代码如下：Vue.use(Store)/* @flow */import { toArray } from '../util/index'export function initUse (Vue: GlobalAPI) { Vue.use = function (plugin: Function | Object) { const installedPlugins = (this._

2021-12-07 18:06:51 831

原创 javascript 可选链 ?.

可选链 ?.可选链 ?. 是一种访问嵌套对象属性的安全的方式。即使中间的属性不存在，也不会出现错误。比如说访问如下对象：const user = {}如果通过user.address.id 这种方式去访问不存在的属性id，就会报错，可以通过(1).user && user.address && user.address.id或者(2).user ? (user.address ? user.address.id : ‘’ ): ''这两种方式去访问但感觉

2021-09-07 09:34:55 206

原创 844.比较含退格的字符串

/** * @param {string} s * @param {string} t * @return {boolean} */var backspaceCompare = function(s, t) { const S = [] const T = [] for(let i = 0; i < s.length; i++) { if(s[i] != '#') { S.push(s[i]) } else {

2021-06-19 16:43:55 95

原创 leetcode 682.棒球比赛 javascript实现

/** * @param {string[]} ops * @return {number} */var calPoints = function(ops) { let sum = 0; const stack = [] for(let i = 0; i < ops.length; i++) { if(ops[i] == 'C') { stack.pop() } else if (ops[i] == 'D') {

2021-06-19 16:18:17 167

原创 1021.删除最外层的括号

/** * @param {string} s * @return {string} */var removeOuterParentheses = function(s) { const stack = [] const res = [] for(let i = 0; i < s.length; i++) { if(s[i] === '(') { stack.push(s[i]) } if(s[i

2021-06-19 13:20:08 88

原创 496下一个元素更大 javascript实现方法 leetcode

/** * @param {number[]} nums1 * @param {number[]} nums2 * @return {number[]} */var nextGreaterElement = function(nums1, nums2) { // 创建一个空数组 let stack = [] // 遍历数组1 for(let i = 0; i < nums1.length; i++) { // 判断在数组2索引的哪一位，是最后一位直接

2021-06-19 10:32:30 104

原创 144.二叉树的前序遍历 js实现

var preorderTraversal = function(root) { const res = []; const stack = []; if(root) stack.push(root); while(stack.length) { const n = stack.pop() res.push(n.val) if(n.right) stack.push(n.right) if(n.left) stack.push(n.left)}

2021-06-17 23:38:36 171 1

原创栈数据结构简介

栈(stack): 先进后出。JavaScript没有Stack，但是提供的Array可以实现栈的功能。入栈 push(x);出栈 pop();例：const stack = [];stack.push(1);stack.push(2);const item1 = stack.pop()const item2 = stack.pop()栈=>应用场景：1、十进制转换为二进制：最后余数要倒叙输出才是正确二进制；2、判断括号是否合法：进栈的括号等于出栈的口号，栈空则合法；3、函

2021-04-30 12:57:14 114

原创 leetcode20.有效的括号，利用JavaScript实现

leetcode20.有效的括号题目描述：给定一个只包括 ‘(’，’)’，’{’，’}’，’[’，’]’ 的字符串 s ，判断字符串是否有效。有效字符串需满足：左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。示例 1：输入：s = “()”输出：true示例 2：输入：s = “()[]{}”输出：true示例 3：输入：s = “(]”输出：false示例 4：输入：s = “([)]”输出：false示例 5：输入：s = “{[]}”输出：true

2021-04-27 22:10:38 165

原创 javascript实现搜索算法,顺序搜索和二分搜索

顺序搜索按照顺序从前往后搜索时间复杂度：O(N)Array.prototype.sequentialSearch = function(item){ for(let i = 0; i<this.length;i++) { if(this[i] === item) { return i } } return -1}const res = [1, 2, 3, 4, 5].sequentialSearch(3);二分搜索从数组的中间元素开始，如果中间元素正好是目标值，则

2021-04-16 16:27:12 106

原创 vue 3.0+ts 中出现 ‘interface‘ declarations can only be used in TypeScript files.解决方法

打开setting.json文件,找到 "files.associations": { ".eslintrc": "json", "*.vue": "html" }注释掉"*.vue": “html”，如下： "files.associations": { ".eslintrc": "json", //"*.vue": "html" }问题即可解决

2021-04-15 13:26:32 3855 5

原创 javascript中排序算法大全

javascript当中存在两个API：sort和indexOF来实现排序和搜索，但知其然还要知其所以然，下面来看下javascript如何实现排序和搜索算法。排序算法1.冒泡排序时间复杂度：O(n^2).Array.prototype.bubbleSort = function () { for (let i = 0; i < this.length - 1; i++) { for (let j = 0; j < this.length - 1 - i; j++) {

2021-04-08 12:08:59 102

原创浅拷贝与深拷贝的区别，利用原生JavaScript实现深拷贝

利用原生JS实现深拷贝原生JS的数据类型包括值类型和引用类型：对于值类型（undefined；string；number；boolean；symbol；），可以很方便的使用赋值操作，但对于引用类型（Array，Object），简单的进行赋值操作，赋值得到的只是地址，如下：const obj = { a: 13, b: { name: 'zhangsan', age: 13 }, c: [1, 3, 4]};const obj2 = obj;obj2.c[0] = 23;

2021-03-16 23:52:11 146

原创 vue 插槽的定义

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 20</title> <script src="https://unpkg.com/vue@n

2021-03-04 20:25:27 340

原创作用域插槽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 20</title> <script src="https://unpkg.com/vue@n

2021-03-04 20:25:14 96

原创动态组件和异步组件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 21</title> <script src="https://unpkg.com/vue@n

2021-03-04 20:24:58 122

原创父子间通过事件进行通信

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 18</title> <script src="https://unpkg.com/vue@n

2021-03-04 20:24:37 79

原创 v-once, ref, provide/inject

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 22</title> <script src="https://unpkg.com/vue@n

2021-03-04 20:24:17 89

原创列表动画与状态动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 26</title> <script src="https://unpkg.com/vue@n

2021-03-04 20:24:00 79

原创 Vue 插件的定义和使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 32</title> <script src="https://unpkg.com/vue@n

2021-03-04 20:23:38 187

原创 Vue3.0 传送门语法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 30 teleport</title> <script src="https://unpkg.

2021-03-04 20:23:10 259

原创 Vue3.0 provide inject用法与ref 获取dom元素节点

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 41</title> <script src="https://unpkg.com/vue@n

2021-02-27 10:36:43 830

原创 Vue 3.0 生命周期函数的新写法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 41</title> <script src="https://unpkg.com/vue@n

2021-02-27 09:45:16 1013

原创 Vue3.0 watch与watchEffect的区别

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 40</title> <script src="https://unpkg.com/vue@n

2021-02-27 09:18:10 938

原创 Vue3.0 Setup函数ref reactive toRefs toRef context

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 34</title> <script src="https://unpkg.com/vue@n

2021-02-26 21:02:25 309

原创 Vue render函数的用法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 31 render函数</title> <script src="https://unpkg.

2021-02-26 15:55:13 93

原创 vue3.0 mixin混入语法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 28</title> <script src="https://unpkg.com/vue@n

2021-02-26 10:34:22 812 1

原创列表循环渲染

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 11</title> <script src="https://unpkg.com/vue@n

2021-02-25 10:17:00 315 1

原创事件三要素及事件处理步骤

事件三要素：1.事件源事件被触发的对象（是谁）2.事件类型如何触发什么事件（比如鼠标点击还是鼠标经过还是键盘按下）3.事件处理程序（通过一个桉树赋值的方式完成）<button>点击</button><script>var btn = document.getElementById('btn');btn.onclick = function() { alert('弹出对话框');}</script>执行事件的步骤：1.获取

2021-01-25 12:42:08 2758

空空如也

空空如也