首页  思维导图  详情

Vue

2021-10-30 12:54:38   5  举报





AI智能生成

为你推荐

查看更多



Vue d'ensemble du systeme

springboot+vue+mysql+家政服务

vue-diff流程

vue功能模块设计

Vue

Vue知识总结

Vue知识脉络，请收藏，持续更新

Vue

HTML5

前端

框架

后端

作者其他创作

大纲/内容

Vue

Vue2官方文档

Vue3官方文档

Vue3 教程

Vue3 One Piece

参考资料

CSS

HTML

JavaScript

推荐

my-component

短横线

只能在字符串模板中使用

可能出现问题

MyComponent

驼峰式

组件命名

Vue - 生命周期详解

为什么vue的beforeUpdate和updated生命周期会不停的发送请求

生命周期不断循环

03-01 组件基础 -基本概念

vue data不可以使用箭头函数的问题解析

关于 ES6 箭头函数用法以及 Vue 中 data / method 里不能用箭头函数的坑点记录

请老老实实用function

使用箭头函数无法操作vue实例数据

箭头函数

Vue中data定义的三种方式和区别

vue定义data的三种方式与区别

复用组件就不能够用对象了，data必须是函数，因为函数里面是函数局部作用域，形成闭包，保证了组件可以重用，数据不会串

注意

子组件自身的数据

基本介绍

data: { yanggb: 'yanggb' }

对象写法

data: function() { return { yanggb: 'yanggb' } }

函数写法

data() { return { yanggb: 'yanggb' } }

ES6函数写法

数据 data

父组件向子组件传递的数据

所有需要传递的参数默认值都写在props里面

props:{ type: { default: \"1\

实例

属性 props

Vue中的methods方法

methods:{ show: function(){ console.log(\"显示内容\") }}

方法 methods

Vue2 官方文档组件注册

组件内部注册

Html内注册

组件注册components

vue监听vuex的store值的变化

监听Vuex的Store值变化

vue props 传值触发事件方法

子组件

子组件监听props变化

watch不能监听$refs的变化

vue中watch监听器的用法，deep、immediate、flush

deep监听

监听值变化 watch

Vue 父子组件实现数据双向绑定效果的两种方式

vue中的v-model绑定数据深层次问题

vue3父组件调用子组件的方法

this.$refs.refName.method

使用ref

父组件调用子组件函数

Vue中子组件调用父组件的三种方法

vue项目中子组件调用父组件函数报错“TypeError: “this.$parent.b(p)“ is not a function

this.$parent.methodName()

每多嵌套一个element组件需要多用一个$parent

子组件调用父组件函数

12 计算属性computed: 当计算属性依赖的内容发生变更时，才会重新执行计算

缓存，依赖的数据没有变化就不会重新计算

原理

computed: { // a computed getter publishedBooksMessage() { // `this` points to the component instance return this.author.books.length > 0 ? 'Yes' : 'No' } }

当我显示运行this.author.books = something_new的时候会重新计算

何时更新

vue的computed没有引用就不生效怎么解决？

Vue2官方文档计算属性和侦听器

vue 中 watch 的使用

Vue 3 官方文档 Computed

不需要watch，直接看下面这个

VueJs 监听 window.resize 方法

vue监听浏览器窗口大小变化

mounted() { this.screenWidth = document.body.clientWidth; this.screenHeight = document.body.clientHeight; window.onresize = () => { return (() => { this.screenWidth = document.body.clientWidth; this.screenHeight = document.body.clientHeight; })(); }; }

监听窗口大小变化

How to Listen to the Window Scroll Event in a Vue.js Component?

<template> <div id=\"app\"> <p v-for=\"n of 100\" :key=\"n\">{{ n }}</p> </div></template><script>export default { name: \"App\

监控滚动位置

vuejs键盘事件不生效解决方式

Vue 3官方文档

监听键盘事件

Vue双击点击事件

<a v-on:dblclick=\"doubleclick\">双击a标签</a>

监听双击

vue鼠标右击事件@contextmenu.prevent

阻止浏览器默认事件，添加自定义事件

监听右击

Vue进阶（八十七）：VUE输入框事件监听blur与change的差异

监听blur

vue的hover鼠标悬停hover事件

Vue的hover事件

vue中没有hover，可以使用css伪类：hover 或者@mouseenter @mouseleave @mouseover @mouseout 等处理类似需求

@mouseenter=\"mouseover\" @mouseleave=\"mouseLeave\"

监听hover事件

监听实例

vue中的nexttick

等待 nextTick

03-02 组件基础 -JS模块

Vue2 Prop

Vue3 Props

props里面使用驼峰命名，父组件传参使用-命名

关于命名

没有冒号

<menu-item title=\"来自父组件的数据\"></menu-item>

参数类型：传递的是string类型

固定传值

有冒号

<menu-item :title=\"title\"></menu-item>

参数类型：传递的是对应类型的数据

绑定传值

属性值传值

父组件

html属性名是case-insensitive的，但字符串模板中可以使用驼峰式html属性

props接收

具名插槽

作用域插槽

另一种“数据”传递

父组件向子组件传值

VUE 子组件向父组件传值（含传多值以及添加额外参数场景）

<button @click='$emit(\"enlarge-text\")'>扩大父组件中字体大小</button>

子组件通过自定义事件向父组件传值

<menu-item :parr='parr' @enlarge-text='handle'></menu-item>

父组件监听自定义属性处理子组件传值

带参数传值

子组件向父组件传值

var hub = new Vue();

创建事件中心通信

组件监听

事件触发

事件销毁

兄弟组件之间传值

03-03 组件基础 -数据交互

原因没太搞懂

根元素必须是单个的

模板内容可以是模板字符串

模板

Vue 插槽（slot）详细介绍（对比版本变化，避免踩坑）

Vue中slot的常见用法

vue插槽（slot）详解

//子组件： (假设名为：ebutton)<template> <div class= 'button'> <button> </button> <slot name= 'one'> 这就是默认值1</slot> <slot name='two'> 这就是默认值2 </slot> <slot name='three'> 这就是默认值3 </slot> </div></template>

/父组件：（引用子组件 ebutton）<template> <div class= 'app'> <ebutton> <template v-slot:one> 这是插入到one插槽的内容 </template> <template v-slot:two> 这是插入到two插槽的内容 </template> <template v-slot:three> 这是插入到three插槽的内容 </template> </ebutton> </div></template>

插槽

03-04 组件基础 -HTML模块

如何将 vue 组件插入 contenteditable div

vue3.x 动态创建组件

Vue3动态实例化组件（自定义弹窗）

插入contenteditable- vue2需要调整

实例 - 父组件

实例 - 子组件

参考代码

import {createApp} from \"vue\"import TeXBox from \"@/contentbox/TeXBox\";

insertTeXBox(formula = \"\

成功代码

contenteditable插入vue组件

03-05 组件基础 -动态组件

vue-cli是什么？和 webpack是什么关系？

Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗？

官网

自动为我们生成一个项目结构，vue-cli 里面包含了webpack，并且配置好了基本的webpack打包规则。

Vue Cli

vite

Webpack

Rollup

模块化管理与打包

项目与配置管理

npm 的 --save 选项

npm/yarn 安装依赖时 -S -D -g 的区别详解

node.js

JS包管理

17个最流行的 Vue 插件

Vue库概览

Vue-router

路由管理

vue 代码压缩优化方式_vue.js

NPM官网

const zlib = require(\"zlib\

vue.config.js

vue-cli-plugin-compression

压缩

Vue中使用cookies

各种本地存储对比 cookie，localStorage，sessionStorage，indexDB以及他们和vuex的区别

cookie和localStorage详解

用于保存每次与服务器端通信都会使用的内容

主要用于标识与验证用户

相同浏览器不同页面之间可以共享localStorage

关闭浏览器/页面不会被清楚

localStorage

相同浏览器不同页面之间无法共享sessionStorage信息

关闭浏览器/页面会被清除

sessionStorage

运行在内存

vuex

localStorage无法像vuex一样实时监控数据的变化使不同组件同时对数据的变化做出反应

cookie用于标识用户与安全控制

sessionStorage用于敏感账号一次性登录

应用场景

概念区分

sessionStorage是client端的储存的东西

server Session是server端存储的东西

server Session通过只给client一个sessionToken来映射每次请求对应的用户

server Session里面的数据对于client不可见，client也无法更改，保证了安全性

sessionStorage与server Session

见典型应用 - 自动登录

cookie其实是由后端设置的！！！

Vue Cookies

Vuex

Github

vue持久化存储

Vuex Persisted State

状态管理

Vue - Axios

QS中文文档

qs库的使用

简单使用

序列化 - qs

数据通讯

12个不容错过的Vue UI 组件库

在 Vue 项目中引入 tinymce 富文本编辑器

vue中使用v-html 加载富文本

vue中使用vue-quill-editor富文本编辑器，自定义toolbar修改工具栏options

富文本编辑器

Mint-UI

Element-UIVue 2.0组件库

Element PlusVue 3.0组件库

Material Design Icons

官方文档

npm install buefy

yarn add buefy

下载

import Buefy from \"buefy\";

添加一行，头部导入

Vue.use(Buefy);

添加一行，注册

开始

Buefy

Vuetify

Vue 表单工具组件

Vue+Element树形表格实现拖拽排序示例

Vue利用draggable实现多选拖拽效果

Vue Draggable - 拖拽排序

Vue Draggable 是 Sortable.js 这个大公司旗下的

Sortable.js

拖拽

UI组件库

Vue style 深度作用选择器 >>> 与 /deep/（sass/less）

安装less 和 less-loader 命令：yarn add less less-loader --dev

yarn add less less-loader --dev

LESS安装

less里面不能用//做注释，//做注释那一行还是会运行

要用/* */

LESS语法

如何在vue用scss

scss在Vue中的安装及使用

npm install node-sass --save-dev //安装node-sass

npm install sass-loader --save-dev //安装sass-loader

npm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader 其实是一样的！

yarn add node-sass --dev

yarn add sass-loader --dev

yarn add style-loader --dev

SCSS安装

LESS&SASS

Vue中关于Babel的作用和用法解释

一口（很长的）气了解 babel

把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。

babel

ES高级语法支持

ESLint在Vue中的使用

什么是ESLint？

用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具

让程序员在编码的过程中发现问题，而不是在执行的过程中发现问题。

eslint

代码语法格式

其他支持库

github项目地址

中文文档

百度地图官网

yarn add vue-baidu-map

npm install vue-baidu-map

import BaiduMap from 'vue-baidu-map'

快速上手Vue+百度地图

<template> <baidu-map id=\"allmap\" @ready=\"mapReady\"> </baidu-map></template><script>export default { name: \"Map\

地图

自定义覆盖库

vue-baidu-map百度地图

地图库

其他功能库

Vue相关库

在Vue项目中用Audio实现语音的播放

vue自定义音频audio样式及操作面板

音频

多媒体

【vue】h5移动端禁止双击和缩放

在index.html中

created() { // 禁止页面缩放 window.onload = function () { document.addEventListener(\"touchstart\

在app.vue中

禁止移动端双击和缩放

vueiOS移动端点击input框页面放大问题

移动端网页禁止下拉刷新css

body { overscroll-behavior-y: contain;}

没有一个方案可以成功。。。。

阻止下拉刷新

在app.vue设置overflow: hidden

同时也要动态计算body的height，不然所有子元素overflow都将会失效

同时#app也必须设置高度为100%

window.addEventListener(\"resize\

定义函数

function resetHeight(){ // reset the body height to that of the inner browser document.body.style.height = window.innerHeight + \"px\";}

监听

resetHeight();

页面初始化

body

禁止滑到最下面还可以上滑

IOS唤起键盘，移动端页面放大

Disable Auto Zoom in Input \"Text\" tag - Safari on iPhone

input{ transform: scale(0.875); transform-origin: left center; margin-right: -14.28%;}

input focus页面缩放问题

移动端适配

CSDN - vue虚拟DOM详解

简书 - 使用虚拟dom和真实dom的区别

CSDN - 什么是虚拟DOM

在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。而虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。

虚拟DOM解决的问题

CSDN - 虚拟DOM（vue、react）中key的作用

这个refName就是组件key的值

this.$ref.refName

Vue2使用

vue3官方文档 - Template Refs

vue 3.0 使用ref获取dom元素

vue3中获取dom元素和操作

JS通过变量访问对象属性

定义ref

this.$refs.refName

this.$refs[variableRefName]

变量访问

Vue中ref的三种用法

this.$refs.refName.dataName

data

this.$refs.refName.methodName

method

访问ref的data与函数

vue组件的v-for循环中动态绑定ref

不使用动态绑定，然后使用数组下标访问

解决方法

<div v-for=\"item in list\" :ref=\"xxx\"></div>this.$refs.xxx[0]

语法

<li v-for=\

示例

v-for无法动态绑定ref

Vue单文件组件中多个同名的ref属性，this.$refs的取值及其使用注意事项

多个同名ref

Vue3使用

Vue中ref的绑定与获取(静态、动态)

<div :ref=\"'menuItem'+index\" class=\"menu_item\" v-for=\

ref数组

虚拟DOM

Composition API FAQ

vue3 为什么要使用composition函数式编程

对比React的hooks与Vue的composition

Composition与函数式编程

为什么某些用 vue.js 创建的 web 应用，直接用 chrome 的检查工具就能直接看到项目源码？

vue source-map设置，@符号使用

源码泄露问题

可能是body没有加overflow:hidden

移动端overflow失效

Vue中，当组件同时注册单机事件（@click）和双击事件（@dblclick）时，处理事件冲突

<span :contenteditable=\"editable\" @dblclick=\"setEditableDefinite\" style=\"height: 20px; padding: 5px;\" @blur=\"renameAndSetNotEditable\" @keydown.enter.exact=\"renameAndSetNotEditable\" @click=\"setEditable\" >{{ directoryGroup.groupName }}</span>

html

Script

应用场景 -双击重命名

单双击冲突

webstorm在使用:class和向子组件传递参数:parameter的时候使用this.$store没有变色，其实是能够成功获取到值的，不用担心

$store没有高亮

前端杂症--div等容器keydown事件无效（包括vue的@keydown）

div没有keydown事件

vue拖拽@drop不生效解决方式

需要加上@dragover=\"e=>e.preventDefault()\"

<div class=\"components-right\" @dragover=\"e=>e.preventDefault()\" @drop=\"onDrop\">

常见问题