< p ref=“text” id=“a”>单元测试< /p>< span @mouseenter=“but”>点击
原创
2022-08-19 11:30:56
1175阅读
一. 概念在vue中定义虚拟DOM为VNode类型,每个VNode都可以拥有自己的子节点children，每个子节点也是VNode类型。
虚拟DOM就是用一个原生的js对象来描述DOM结构，虚拟DOM最终会被渲染成文档树的一部分。在vue中VNode是一个class 类，在src/core/vdom/vnode.js中定义了。export default class VNode {
tag:
效果：增删改功能tree.
vue组件代码：<template> <div> <div class="all-div" v-if="m
转载
2023-01-03 14:55:55
55阅读
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></scr
转载
2018-05-15 18:26:00
740阅读
2评论
vue里的$refs属性Vue的极大程度的帮助减少了对dom的操作，其中获取元素的方式主要通过添加ref属性，但是当获取this.$refs属性时，稍有不注意就会输出undefined导致我们对dom节点的操作报错。this.$refs.xxx为undefined的几种情况记录：在created里钩子函数中调用原因：created()在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据
转载
2024-04-01 17:55:42
197阅读
3 Vue组件化3.1 什么是组件传统方式开发的应用一个网页通常包括三部分：结构（HTML）、样式（CSS）、交互（JavaScript）传统应用存在的问题：关系纵横交织，复杂，牵一发动全身，不利于维护。代码虽然复用，但复用率不高。组件化方式开发的应用使用组件化方式开发解决了以上的两个问题：每一个组件都有独立的js，独立的css，这些独立的js和css只供当前组件使用，不存在纵横交错。更加便于维护
原创
2023-04-19 17:25:49
108阅读
需求单页面应用中，用户进入表单填写页面，需要初始化表单内容，填写过程中可能涉及到地图选点或者列表选择等操作，需要到新的页面选择并回调显示。此时我们需要缓存表单填写页面实例，当退出表单填写或提交完表单内容之后，需要销毁当前表单实例，下次进入重新进行初始化思考说到 Vue 缓存，我们肯定首先选择官方提供的缓存方案 keep-alive 内置组件来实现。keep-alive 组件提供给我们缓存组件的能力
转载
2024-04-29 09:14:37
48阅读
3 Vue组件化3.1 什么是组件传统方式开发的应用一个网页通常包括三部分：结构（HTML）、样式（CSS）、交互（JavaScript）传统应用存在的问题：关系纵横交织，复杂，牵一发动全身，不利于维护。代码虽然复用，但复用率不高。组件化方式开发的应用使用组件化方式开发解决了以上的两个问题：每一个组件都有独立的js，独立的css，这些独立的js和css只供当前组件使用，不存在纵横交错。更加便于维护
原创
2023-04-19 17:22:07
209阅读
5 Vuex
5.1 vuex概述
vuex是实现数据集中式状态管理的插件。数据由vuex统一管理。其它组件都去使用vuex中的数据。只要有其中一个组件去修改了这个共享的数据，其它组件会同步更新。一定要注意：全局事件总线和vuex插件的区别：
全局事件总线关注点：组件和组件之间数据如何传递，一个绑定$on，一个触发$emit。数据实际上还是在局部的组件当中，并没有真正的让数据共享。只是数据传来
原创
2023-04-23 10:27:45
95阅读
摘要本文以MySQL数据库为研究对象，讨论与数据库索引相关的一些话题。特别需要说明的是，MySQL支持诸多存储引擎，而各种存储引擎对索引的支持也各不相同，因此MySQL数据库支持多种索引类型，如BTree索引，哈希索引，全文索引等等。为了避免混乱，本文将只关注于BTree索引，因为这是平常使用MySQL时主要打交道的索引，至于哈希索引和全文索引本文暂不讨论。文章主要内容分为三个部分。第一部分主要从
一、 什么是自定义指令我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，对普通 DOM元素进行底层操作，这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令指令使用的几种方式：//会实例化一个指令，但这个指令没有参数
`v-xxx`
// -- 将值传到指令中
`v-xxx="value"`
1.treeshaking是什么？Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫 Dead code elimination简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码如果把代码打包比作制作蛋糕，传统的方式是把鸡蛋（带壳）全部丢进去搅拌，然后放入烤箱，最后把（没有用的）蛋壳全部挑选并剔除出去而treeshaking则是一开始就把有用的蛋白蛋
2 Vue核心技术2.1 事件处理2.1.1 事件处理的核心语法指令的语法格式：<标签 v-指令名:参数=”表达式”></标签>事件绑定的语法格式：v-on:事件名。例如鼠标单击事件的绑定使用v-on:click。绑定的回调函数需要在Vue实例中使用methods进行注册。methods可以配置多个回调函数，采用逗号隔开。绑定回调函数时，如果回调函数没有参数，( )可以省略
原创
2023-04-19 16:44:08
27阅读
7 Vue3
7.1 了解Vue3
vue3官网地址
https://cn.vuejs.org/
vue3发布时间
2020年9月18日。
翻译：
今天，我们很自豪地宣布Vue.js 3.0“海贼王”正式发布。这个新的主要版本的框架提供了改进的性能、更小的捆绑包大小、更好的TypeScript集成、用于处理大规模用例的新API，以及为框架未来的长期迭代奠定了坚实的基础。
3.0版
原创
2023-04-23 10:30:01
107阅读
7 Vue3
7.1 了解Vue3
vue3官网地址
https://cn.vuejs.org/
vue3发布时间
2020年9月18日。
翻译：
今天，我们很自豪地宣布Vue.js 3.0“海贼王”正式发布。这个新的主要版本的框架提供了改进的性能、更小的捆绑包大小、更好的TypeScript集成、用于处理大规模用例的新API，以及为框架未来的长期迭代奠定了坚实的基础。
3.0版
原创
精选
2023-04-24 17:56:39
424阅读
2 Vue核心技术2.1 事件处理2.1.1 事件处理的核心语法指令的语法格式：<标签 v-指令名:参数=”表达式”></标签>事件绑定的语法格式：v-on:事件名。例如鼠标单击事件的绑定使用v-on:click。绑定的回调函数需要在Vue实例中使用methods进行注册。methods可以配置多个回调函数，采用逗号隔开。绑定回调函数时，如果回调函数没有参数，( )可以省略
原创
精选
2023-04-19 16:39:50
456阅读
1 Vue程序初体验Vue是一个基于JavaScript（JS）实现的框架。要使用它就需要先拿到Vue的js文件。从Vue官网下载vue.js文件。1.1 下载并安装vue.js第一步：打开Vue2官网，点击下图所示的“起步”：第二步：继续点击下图所示的“安装”第三步：在“安装”页面向下滚动，直到看到下图所示位置：第四步：点击开发版本，并下载，如下图所示：第五步：安装Vue：
使用script标签
转载
2023-04-19 16:46:54
66阅读
2 Vue核心技术2.1 事件处理2.1.1 事件处理的核心语法指令的语法格式：<标签 v-指令名:参数=”表达式”></标签>事件绑定的语法格式：v-on:事件名。例如鼠标单击事件的绑定使用v-on:click。绑定的回调函数需要在Vue实例中使用methods进行注册。methods可以配置多个回调函数，采用逗号隔开。绑定回调函数时，如果回调函数没有参数，( )可以省略
原创
2023-04-19 17:14:16
35阅读
四、Vue与AJAX4.1 回顾发送AJAX异步请求的方式发送AJAX异步请求的常见方式包括：原生方式，使用浏览器内置的JS对象XMLHttpRequestconst xhr = new XMLHttpRequest()xhr.onreadystatechange = function(){}xhr.open()xhr.send()原生方式，使用浏览器内置的JS函数fetchfetch(‘url’
原创
2023-04-20 15:56:13
47阅读
7 Vue3
7.1 了解Vue3
vue3官网地址
https://cn.vuejs.org/
vue3发布时间
2020年9月18日。
翻译：
今天，我们很自豪地宣布Vue.js 3.0“海贼王”正式发布。这个新的主要版本的框架提供了改进的性能、更小的捆绑包大小、更好的TypeScript集成、用于处理大规模用例的新API，以及为框架未来的长期迭代奠定了坚实的基础。
3.0版
原创
2023-04-23 10:03:19
61阅读
