3、高级篇 前言 基础篇链接：https://www.cnblogs.com/xiegongzi/p/15782921.html 组件化开发篇链接：https://www.cnblogs.com/xiegongzi/p/15823605.html 3.1、回顾浏览器本地存储 就是localstorage和sessionstorage这两个（ 前者浏览器关闭不会清空，后者关闭浏览器会清空 ），二者
1、安装 wangEditor npm 安装 npm i wangeditor --save 注：wangeditor 全小写 2、封装 wangEditor 组件（wangEditor.vue） src / components / wangEditor / index.vue <!-- 组件功能：wangEditor 富文本编辑器 --> <template lang="html"> <div class="editor
vue2+antd后台管理系统 码云连接： https://gitee.com/huminghui/vue-project.git
v-for和v-if 之前看过有一种关于v-for和v-if之所以产生冲突的解释，我觉得是比较合理的说法，这里记录一下。 vue2里，同一个标签内v-for的执行优先级比v-if高，也就是说先执行循环渲染生成了这些dom元素，然后此时再去执行v-if的判断条件想定义dom的渲染，在这里冲突就出现了，dom已经生成
一、实例和组件定义data的区别 vue实例中的data属性既可以是一个对象，也可以是一个函数 const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }
通过学习vue2响应式，我写的不知道为什么，直接通过数组下标赋值它也是响应式的。下面是源码，你们可以试试。 直接复制新建一个html通过控制台测试 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=
概念区别 具名插槽：同时有多个插槽时如何区分，为每个插槽指定名字就可以了 作用域插槽：如何在父组件中使用子组件的数据来自定义插槽内容，简单理解：子中插槽默认展示自己内部的数据，但是父想对这个数据做一下拼接展示，那么问题来了，父子是不同的作用域，父如何拿到子的数据呢，作用域插槽
多组件共享状态集中管理（读、写） 安装 npm i vuex 搭建vuex环境 创建vuex.store ./store/index.js // 创建Vuex store import Vue from "vue"; import Vuex from 'vuex' // 应用vuex插件 Vue.use(Vuex) // 响应组件中的动作 const actions = {} // 操作状态数据 const mutati
由于 2021 年 vue 已经升级了底层的所使用的API，所以要分版本讲原理 vue2 宏观上：vue2 的底层响应式主要依靠 Object.defineProperty , 做到对，单个数据源数据，存值和取值时，监听其状态的改变，依靠 发布者-订阅者模式，做到的。 vue3 宏观上：vue3 实际上与vue2 做响应式原理的思想上是保持
vue2中插槽其实有两个阶段性的改革 以vue2.6.0版本为分界线 先说共同点： 插槽内容 // 调用子组件 <my-slot><my-slot><h1>欲穷千里目</h1></my-slot></my-slot> // 子组件 <template> <div class="about"> <slot></slot> </div> &l
vue2异步更新原理 直接开个断点调试 不用去看他执行了哪些代码 看了也记不住 直接看他的具体架构就行 就是执行了什么大函数 1 先执行update方法 把walker加入队列 2 执行nexttick方法 flushSchedulerQueue是刷新walk队列的 3执
将目标服务器代理到本机开发服务端口，可用于跨域调用数据接口优先取用项目中存在的资源 参考文档 webpack-dev-server vue-cli-dev-server 配置 vue.config.js 单一代理配置 module.exports = { devServer: { proxy: 'http://apiHost' } } 多代理配置 module
直接上代码，我这个cur属性是依赖list和kind computed: { cur(){ return this.list[this.kind]; } }, 其中，data中初始化list是空对象，kind为空字符串，那么发送请求后数据存储在resArr中，通过module将list变成对象数组 for(let i = 0; i < resArr.length; i++){
Vue3 使用vue-cli创建工程 先要去查看我们的版本，一定要高于4.5.0才可以，我的是4.5.15.所以可以做vue3. 我们去选择vue3版本就可以了。 这就是下载完了。 我们输入这两句 看看能不能运行起来： ok了。 打开的页面和vue2差不多，但是我们发现我们的开发者工具灭了，这
vue2/vue3基于element-table实现render函数 vue2实现render // 只展示核心代码 // standarTable.vue <el-table :data="dataSource" ref="standarTable" > <template v-for="(col, key) in columns || []"> <!-- 操作列/自定义列 -->
Vue2可读取vue3的内容,而vue3不可读取vue2的 <script>//import {h} from 'vue'export default{name:'App', setup(){ //数据 let name='张三' let age = 18 //方法 function sayHello(){ alert(`我叫${name
// 源数据 let person = { name: '张三', age: 18 } //#region // 模拟Vue2中实现响应式 // let p = {} // Object.defineProperties(p, 'name', { // configurab
创建vue项目 首先现在德vue3已经成为了默认德版本了，现在的创建vue项目的方式有两种： 1：使用脚手架，不走和vue2大致是一样的但是需要注意的是我们vue的版本必须要在4.5以上才能创建vue3项目，现在如果你还再使用vue2过渡到vue3的时候必须要更新开发者工具，不然它无法工作 2：使用一
<script> function buildMenuTemplate(h, menus) { return menus.map((menu) => { let html = null; if (menu.children && menu.children.length > 0) { let childrenEl = buildMenuTemplate(h, menu.children) html = (
父组件给子组件传值： :visible="dialogVisible" //普通用法 :visible.sync="dialogVisible"//同步用法 子组件props接收： props: { visible: { type: Boolean, default: false }, } 核心： 同步方式才有此代码： 在子组件某个事件或者方法等方式调用下方的函
1.创建 在cmd 中 执行 vue create 项目名 对应选择需要的 一般选 babel router vuex 这里寻问 路由使用的那种方式 使用history 模式 还是hash 模式 使用n 使用hash 我选择 package.json 看自己 vuex 一般看项目大小，和数据传递深度来取决用于不用 动画自定义 <transition
Vue2+Vue3 一、vue基础 1. vue是什么 一套用于构建用户界面的渐进式JavaScript框架,后起之秀，生态完善，已然成为国内前端工程师必备技能。 2. 谁开发的 尤雨溪 2013年开发 - 2014年发布 - 2015年vue1 - 2016年vue2 - 2020年vue3 二、vue-cli 三、vue-router 四、vuex 五、eleme
vue2-admin-mpa vue2多页面应用系统【开源项目】 1. 项目介绍 一个基于Vue2.0的多页面应用系统。 技术栈包含：Vue、VueX、Vue Router、Element UI。 2. 功能介绍 2.1 多页面切换功能 说明：采用 tabs + router-view 组合来保存各个页面。 1 2 3
1 v-fi和v-show的区别 主要考vue基础理解 可以说是送分题 v-if是判断元素要不要生成 如果条件没达到 元素压根不会出现在dom树中 v-show 则是通过css样式隐藏元素 如果条件达到了则样式为显示 没达到为隐藏 但无论有没有达到 v-show的元素都是存在于dom树中的 2 为何要在v-fo
vue3的h函数和vue2的h函数入参不同 下面是vue2的vnode示范 然后是vue3的错误示范 下面是正确示范 let open1=() => { return new Promise((resolve,reject)=>{ ElNotification({ title: '第一步：展示模型自带动画', message:h(E
