飞扬小阁

window.addEventListener，window.removeEventListener第3参数需为true mounted() { console.log('mounted') window.addEventListener('scroll', this.onScrollFunc, true) }, beforeUnmount() { console.log('beforeUnmount') window.removeEventListener(

1、setup函数是组合API的入口函数。2、setup函数只能是同步的不能是异步的。3、setup 执行时机 在beforeCreate（组件的data和methods还没有初始化好） 和created（组件的data和methods已经初始化好） 之间。4、由于在执行setup函数时候，还没有执行created生命周期方法，所以在setup函数中，是无法使用data和methods。5、setup 函数时，它将接受两个参数：props(父组件传递的参数)、context(包含attrs、

列表渲染 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9this.$forceUpdate() // 强制刷新Vue.set(Array,index,newValue)// vue本身可以监听到数组的一些方法,例如:// push(),pop(),s...

Vue 3需要将 v-model="show" 更改为 v-model:show= "show"

使用proxy代理请求地址，可以帮助隐藏http请求地址，并可解决跨域请求的问题试了很多方法开发环境无效。vue.config.js配置(不要配置其他多余的选项，只要proxy)devServer: { port: 8088, proxy:"http://192.168.111.101:8081" // 下方配置无效，已屏蔽 /* proxy: { '/api': { target: "http://192.168.111.101:8

Vue 转 React不完全指北老东家 Vue，加实习写了两年半~，期间只是简单学过 React，没怎么写过。新东家用 React + Typescript，用了一个半月，写了写Demo 在线预览。这里简单总结下和vue的区别，如果你也是在Vue转React阶段，欢迎加V交流扫码加V有不同见解，欢迎评论区指教????一、横向对比1、Vue 官方对比Vue 官方对比 React2、个人的理解一般 H5 的，或者一些做不大的系统，首选 Vue。因为 Vue 简单，开发效率比较

useRouter 相当于vue2的this.$router全局的路由实例，是router构造方法的实例useRoute 相当于vue2的this.$route表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route路由记录import { useRoute, useRouter } from "vue-router"useRoute, useRouter必须写到setup中,详见vue-next-router.强行在函数中使用这两会报undefi

2.x 语法在 Vue 2，自定义指令是通过使用下面列出的钩子来创建的，这些钩子都是可选的bind- 指令绑定到元素后发生。只发生一次。 inserted- 元素插入父 DOM 后发生。 update- 当元素更新，但子元素尚未更新时，将调用此钩子。 componentUpdated- 一旦组件和子级被更新，就会调用这个钩子。 unbind- 一旦指令被移除，就会调用这个钩子。也只调用一次。下面是一个例子：<p v-highlight="yellow">高亮显示...

页面跳转及传参：需引入router.js1. 传递参数使用query,path/name都行。（页面链接 有参数，即:/index?id=123&name=nick）import { router } from '@/router'// 跳转router.push('/index');router.push('/index?id=123')router.push('/index?id=123&name=nick')// 传递参数使用query,path/name

npm安装(package.json)："typescript": "^4.5.4","ts-import-plugin": "^2.0.0","@vue/cli-plugin-typescript": "^4.5.15","webpack-merge": "^5.8.0"typescript - npmhttps://www.npmjs.com/package/@vue/cli-plugin-typescripthttps://www.npmjs.com/package/ts-i.

响应性基础 API | Vue.jsVue.js - The 渐进式 JavaScript 框架https://v3.cn.vuejs.org/api/basic-reactivity.htmlreactive：reactive的用法与ref的用法相似，也是将数据变成响应式数据，当数据发生变化时UI也会自动更新。不同的是ref用于基本数据类型，而reactive是用于复杂数据类型，比如对象和数组。响应性基础 API | Vue.jsVue.js - The 渐进式 JavaScript 框架http

<template> <!--页面元素--> <div id="page"> <div class="demo">{{data}}</div> <ComponentsDemo></ComponentsDemo> </div></template><script> import {demoApi} from '@/services/.

Vue2中有 beforeCreate 、created 、beforeMount 、mounted 、beforeUpdate 等生命周期函数而在Vue3中，这些生命周期部分有所变化，并且调用的方式也有所改变，下面放上一张变化图来简单了解一下Vue2 Vue3 beforeCreate setup created setup beforeMount onBeforeMount mounted onMounted beforeUpdate on

特性入口 setup()，说明：可以看作是一个生命周期，介于 beforeCreate 与 created 之间，新的setup组件选项在创建组件之前执行，一旦props被解析，并充当合成 API 的入口点Vue2.x<template> <div> <div>{{ count }}</div> <button @click="add">增加</button> &lt...

https://www.vue3js.cn/docs/zh/guide/composition-api-introduction.html#%E5%B8%A6-ref-%E7%9A%84%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8F%98%E9%87%8F示例：根据用户查找内容2.x3.X 使用setup新的setup组件选项在创建组件之前执行，一旦props被解析，并充当合成 API 的入口点。setup选项应该是一个接受props和contex...

真实DOM解析流程浏览器渲染的过程主要包括以下五步：浏览器获取到 HTML 文档并解析 DOM 树 解析 CSS 构建层叠样式表模型CSSOM(CSS Object Model) 将 DOM Tree 和 CSSOM 合并成一个 Render Tree 有了Render Tree，浏览器便能获取到每个节点的 CSS 定义和从属关系，从而可以计算出每个节点的现实位置 通过上一步的计算规则进行绘制页面 浏览器渲染流程 虚拟DOM产生的背景用原生 js 或 jquery.

Diff算法的作用是用来计算出 Virtual DOM 中被改变的部分，然后针对该部分进行原生DOM操作，而不用重新渲染整个页面。Diff算法有三大策略：Tree Diff Component Diff Element Diff三种策略的执行顺序也是顺序依次执行。Tree Diff 是对树每一层进行遍历，找出不同，如图1所示。图1 Tree DiffComponent Diff 是数据层面的差异比较如果都是同一类型的组件(即：两节点是同一个组件类的两个不同实例，比...

https://github.com/vuejs/vue-next-webpack-preview/blob/master/src/App.vue<template> <img src="./logo.png"> <h1>Hello Vue 3!</h1> <button @click="inc">Clicked {{ ...

npm run build打包后，一些图是转为base64了，一些是在static/img文件夹。路径问题：1、直接&lt;img :src=''&gt;引用修改方法：首先修改config目录下的index.js文件，将其中build的配置项assetsPublicPath进行修改，改为assetsPublicPath: './',目的是将资源文件的引入路径，改为相对地址（相对inde...

1、数据绑定不支持多层级，只支持两级。如：data.content.length 不支持；content.length支持。

vue组件之间的数据传递最近在整理项目中代码，在组件之间数据传递遇到了问题，所以做了这次总结，如有不对的地方，望指正。父组件如何将数据传到子组件中父组件可以通过Prop传递数据到子组件中。这里需要注意的是：Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。每次父组件更新时，子组件的所有 Prop...

作者：切图妞segmentfault.com/a/1190000014804826一、前言vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化，引入一些插件帮我们完善功能可以将文件打包压缩，图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要，接...

mounted() { this.$refs.myQuillEditor.quill.enable(false); this.hintGetFun(); }, methods: { onEditorChange({ quill, html, text }) { this.formHint.hintList[this.hintIndex].hintValu...

安装：https://www.npmjs.com/package/babel-plugin-syntax-dynamic-import配置：路由文件：

VUE（用了iview）： &lt;template&gt; &lt;div id='cameraUpload'&gt; &lt;Form ref='member' :label-width='120' :model='member' :rules='memberRule' style='width: 600px'&gt; &lt;FormItem label='照片...

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。这个状态自管理应用包含以下几个部分：state，驱动应用的数据源； view，以声明方式将 state 映射到视图； actions，响应在 view 上的用户输入导致的状态变化。但是，当我们的应用遇到多个组件共享状态时，单向数据...

我们通常都会使用富文本编辑器在后台编辑内容，开发vue当然也少不了，我们通过vue官网的链接可以找到一些资源，或者去github上查找一些开源的编辑器。我使用的是vue-quill-editor，它的界面很简洁，功能也满足平时的编辑需要，不过于臃肿，但是它默认的图片上传是使用Data URL方式保存到了内容里，这不是我想要的，我相信大部分人也不想这样去保存图片，还好quill提供了如何去自定义按...

vue-quill-editorhttps://github.com/surmon-china/vue-quill-editorhttps://www.npmjs.com/package/vue-quill-editorhttps://blog.csdn.net/nickroprak/article/details/86645519（自定义图片上传）*默认上传图片为base64编吗...

 https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.htmlnpm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classicUsing ES6 modulesmain.js...

路由配置页router/index.jsroutes: [ { /* （首页）默认路由地址 */ path: '/', name: 'Entrance', component: Entrance, meta: { title: '首页入口' } }, { /*