Vue 思维导图模板_ProcessOn思维导图、流程图

参考资料

Vue3官方文档

Vue2官方文档

Vue3 教程

Vue3 One Piece

相关导图

JavaScript

HTML

CSS

01 HTML开发<br>- 模板语法

入门与常用特性

渐进式JavaScript框架

声明式渲染 -> 组件系统 -> 客户端路由 -> 集中式状态管理 -> 项目构建

引入

参考资料

Vue2 官方导入

Vue 3 官方安装

大型项目使用其他安装开发方式

查看vue版本

参考资料

如何查看vue版本号<br>

vue -V

脚手架版本

package.json

基本使用

<!DOCTYPE html><br><html lang="en"><br><br><head><br>    <meta charset="UTF-8"><br>    <title>Document</title><br></head><br><br><body><br>    <div id="app"><br>        <div>{{msg}}</div><br>    </div><br>    <script type="text/javascript" src="js/vue.js"></script><br>    <script type="text/javascript"><br>        var vm = new Vue({<br>            el: '#app',<br>            data: {<br>                msg: 'Hello Vue'<br>            }<br>        });<br>    </script><br></body><br><br></html><br>

常用特性

表单操作（基于Vue）

数据绑定

使用v-model进行表单绑定

事件绑定

使用@click.prevent="handle"进行提交

表单修饰符

number

v-model.number="age"

代替了parseInt()

trim

去掉开头和结尾的空格

lazy

将input事件（文字改变就触发）转化为change事件（失去焦点触发）

自定义指令

计算属性

过滤器

监听器

HTML骨架绑定 - 数据

参考资料

Vue基础之数据绑定

v-cloak

参考资料

v-cloak的作用

解决插值表达式闪动问题

代码加载的时候先加载HTML，把插值语法当做HTML内容加载到页面上，<br>当加载完js文件后才把插值语法替换掉，所以我们会看到闪烁问题。

展示文字 - 单向数据绑定

v-text

嵌入文本

v-html

嵌入标签

v-pre

不编译

数据响应式

插值表达式绑定的数据内容自动具有响应式特点

v-once

初始响应一次，不要监听，提高性能

交互表单 - <br>双向数据绑定

v-model

实现原理

父子组件双向数据绑定

HTML骨架绑定 - 属性 - :

参考资料

vue组件中冒号的作用

v-bind:

简写是冒号:

JS动态绑定 - 事件 - @

参考资料

vue中'. native'修饰符的使用

Vue官方修饰符讲解

span 的click事件没有响应

在span的click上使用stop

vue.js @click绑定点击事件不生效？

Vue2 官方文档 v-on

在vue中使用鼠标事件@mousedown、@mouseenter等失效的解决办法，以及PC端长按实现

‘.native‘ modifier on ‘v-on‘ directive is deprecated

v-on: 或者 @

v-on:标准事件属性=‘js处理逻辑’

函数/方法定义在Vue实例对象里面

只传递函数名不加括号默认传递事件参数作为第一个参数

如果绑定函数调用，必须将事件参数作为最后一个参数显示传递，$event<br>（不作为最后一个也没什么关系？）

鼠标事件修饰符

.stop

阻止冒泡

点击子事件会冒泡到父元素点击事件

.prevent

阻止默认行为

串联顺序重要

.native

@mouseenter、@mousedown等鼠标事件[非鼠标点击事件]时，发现事件不触发，失效了<br>此时应该在@mouseenter、@mouseenter等鼠标事件加上native属性就好了

vue3 native deprecated了

直接支持了

按键事件修饰符

.enter

.delete

传递参数的同时<br>传递事件对象

参考资料

Vue：带参数函数在传递参数的同时传递事件对象

CSS外观绑定 - 样式 - :

class样式处理

对象语法

<div><body><br> <div id="app"><br></div>    <div v-bind:class="{active: isActive,error: isError}">测试样式</div><br>    <button v-on:click='handle'>切换</button><div></div><br><div><script type="text/javascript" src="js/vue.js"></script><br> <script type="text/javascript"><br>    var vm = new Vue({<br>        el: '#app',<br>        data: {<br>            isActive: true,<br>            isError: true<br>        },<br>        methods: {<br>            handle: function(){<br>                this.isActive = !this.isActive;<br>                this.isError = !this.isError;<br>            }<br>    }<br> });<br> </script><br></div></div><div></body></div>

数组语法

<body><br> <div id="app"><br>    <div v-bind:class="{active: isActive,error: isError}">测试样式</div><br>    <button v-on:click='handle'>切换</button><br> </div><br> <script type="text/javascript" src="js/vue.js"></script><br> <script type="text/javascript"><br>    var vm = new Vue({<br>        el: '#app',<br>        data: {<br>            isActive: true,<br>            isError: true<br>        },<br>        methods: {<br>            handle: function(){<br>                this.isActive = !this.isActive;<br>                this.isError = !this.isError;<br>            }<br>        }<br>    });<br> </script><br></body><br>

style样式处理

<body><br> <div id="app"><br>    <div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div><br>    <div v-bind:style='objStyles'></div><br>    <div v-bind:style='[objStyles, overrideStyles]'></div><br>    <button v-on:click='handle'>切换</button><br> </div><br> <script type="text/javascript" src="js/vue.js"></script><br> <script type="text/javascript"><br>    var vm = new Vue({<br>        el: '#app',<br>        data: {<br>            borderStyle: '1px solid blue',<br>            widthStyle: '100px',<br>            heightStyle: '200px',<br>            objStyles: {<br>                border: '1px solid green',<br>                width: '200px',<br>                height: '100px'<br>            },<br>            overrideStyles: {<br>                border: '5px solid orange',<br>                backgroundColor: 'blue'<br>            }<br>        },<br>        methods: {<br>            handle: function(){<br>                this.heightStyle = '100px';<br>                this.objStyles.width = '100px';<br>            }<br>        }<br>    });<br> </script><br></body><br>

注意点

数组与对象结合

[activeClass, errorClass, {test: isTest}]

简化绑定操作

<body><br> <div id="app"><br>    <div v-bind:class='arrClasses'></div><br>    <div v-bind:class='objClasses'></div><br>    <button v-on:click='handle'>切换</button><br> </div><br> <script type="text/javascript" src="js/vue.js"></script><br> <script type="text/javascript"><br>    var vm = new Vue({<br>        el: '#app',<br>        data: {<br>            arrClasses: ['active','error'],<br>            objClasses: {<br>                active: true,<br>                error: true<br>            }<br>        },<br>        methods: {<br>            handle: function(){<br>                this.objClasses.error = false;<br>            }<br>        }<br>    });<br> </script><br></body><br>

默认的class处理

分支结构 v-if

参考资料

v-if 和 v-show 的区别，哪个性能更好？

Vue 学习之 v-if,v-for,v-on 以及生命周期

v-if 和 v-show在切换时vue生命周期钩子的执行

v-if

直接控制标签是否渲染到页面

开销大

适用场景

不停的创建和销毁，性能差一点

初始渲染开销小，但是切换开销大

生命周期

初始值为 false 组件不会渲染，生命周期钩子不会执行，v-if 的渲染是惰性的。初始值为 true 时，组件会进行渲染，并依次执行 beforeCreate,created,beforeMount,mounted 钩子。

v-else

v-else-if

v-show

参考资料

Vue.js 中的 v-show 指令及用法详解

使用

v-show="type==='科技'"

控制style="display: none;"

开销小

适用场景

适用于频繁切换某节点时，切换性能消耗小，但是初始性能消耗大

生命周期

无论初始状态，组件都会渲染，依次执行<br>beforeCreate,created,beforeMount,mounted 钩子，v-show 的渲染是非惰性的。

v-if和v-show并存

参考资料

vue中v-if与v-show同时使用

v-show=“demo” v-if="test"<br>

demo和test定义时都是false，启动组件时同时改写成ture，<br>然后关闭组件时再更改v-show的显隐，之后就都控制v-show的显隐就成了。

循环结构 v-for

参考资料

Vue3 官方文档 v-for

常见错误

v-for前面加了冒号

不能加

正确顺序是(item, index)，不是Index在前面

如果传参给子组件，注意参数命名，要用kebab命名法或者驼峰命名法

有v-for就必定要有key

示例代码一

<DirectoryHolder :key='item' v-for='item in items.fileTree.directoryGroups' :directory-group="item" ><br>    </DirectoryHolder>

示例代码二

<br>

过滤与排序

参考资料

vue学习笔记3 v-for加排序

v-for列表过滤和排序

Vue3官方文档 - Displaying Filtered/Sorted Results

computed

直接在HTML中<br>使用Vue组件

<!DOCTYPE html><br><html lang="en"><div><br>    <head><br>        <meta charset="UTF-8"><br>        <title>Document</title><br>    </head><div><br>    <body><br>        <div id="app"><br>            <button-counter></button-counter><br>            <button-counter></button-counter><br>            <button-counter></button-counter><br>        </div></div><div><br>        <script type="text/javascript" src="js/vue.js"></script><br>        <script type="text/javascript"><br>             Vue.component('button-counter', {<br>                 data: function(){<br>                     return {<br>                         count: 0<br>                     }<br>                 },<br>                 template: '<button @click="handle">点击了{{count}}次</button>',<br>                 methods: {<br>                     handle: function(){<br>                         this.count += 2;<br>                     }<br>                 }<br>             })<br>             var vm = new Vue({<br>                 el: '#app',<br>                 data: {<br> <br>                 }<br>             });<br>        </script><br>    </body><br></html><br></div></div>

组件化开发步骤

关键原则

用一个库安装一个

Phase 01

单组件化开发阶段

使用UI组件框架搭建单个组件

Phase 02

多组件拼接阶段

UI组件框架+Vue-router进行界面搭建与跳转管理

Phase 03

数据搭建阶段

调整Vue数据绑定，默认值与组件间参数传递

Phase 04

数据管理阶段

Vuex与Axios完成状态管理

02 Vue组件化开发<br>- 项目启动设置

参考资料

尚硅谷前端体系Vue教程

Webstorm官方Vue启动<br>

前期准备

node和vue-cli更新到最新版本，<br>命令见右边对应导图节点

创建新项目

导入Vue-router

见右边导图节点，进入链接

导入其他各种包

项目结构

总览

Vue3 -<br>main.js

参考资料

vue3 main.js

Vue3+cli4.5.x 中使用“vue-axios“

基本格式

import { createApp } from 'vue'<br>import App from './App.vue'<br>const app = createApp(App)<br><br>app.mount('#app')<br>

注册新的package

app.use(package_name)

项目启动

yarn serve

项目打包

npm

npm run build

yarn

yarn build

Idea自动部署

参考资料

webStorm 自动部署到远程服务器

配置服务器 Settings -> Build,Execution,Deployment->Deployment

配置Mappings

如果你不想上传或下载某些路径的文件，可以在excluded path上配置

高级配置选中Always，一旦本地文件更新就会自动上传 Deployment -> Options

部署选中文件，右键可以选择你需要的操作

vue组件基本结构

<template><br><br></template><br><br><script><br>export default {<br>  name: "Hello"<br>}<br></script><br><br><style scoped><br><br></style>

命名规范

参考资料

views 命名规范

03-01 组件基础 -<br>基本概念

组件命名

短横线

my-component

推荐

驼峰式

MyComponent

可能出现问题

只能在字符串模板中使用

生命周期

参考资料

Vue - 生命周期详解

Vue2官方文档

【Vue】 生命周期， created，mounted, methods , computed , watched, 通俗易懂

生命周期不断循环

参考资料

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

03-02 组件基础 -<br>JS模块

箭头函数

参考资料

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

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

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

请老老实实用function

数据 data

参考资料

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

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

注意

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

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

基本介绍

子组件自身的数据<br>

对象写法

data: {<br>    yanggb: 'yanggb'<br>  }

函数写法

data: function() {<br>    return {<br>      yanggb: 'yanggb'<br>    }<br>  }

ES6函数写法

data() {<br>    return {<br>      yanggb: 'yanggb'<br>    }<br>  }

属性 props

基本介绍

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

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

实例

props:{<br>    type: {<br>        default: "1"<br>    },<br>    title: {<br>        default: "吉他入门"<br>    }<br>},

方法 methods

参考资料

Vue中的methods方法

实例

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

组件注册<br>components

参考资料

Vue2 官方文档组件注册

组件内部注册

components: {<br>    ComponentA,<br>    ComponentC<br>  },

Html内注册

Vue.component('name',{<div>    data:function(){}, </div><div>    template:'', </div><div>    methods:{method1:function(){}}</div><div>})</div>

监听值变化 watch

监听Vuex的Store值变化<br>

参考资料

vue监听vuex的store值的变化

computed: {<br>      getStoreItem () {<br>        return this.$store.state.test<br>      }<br>    },<br>    watch: {<br>      getStoreItem () {<br>        console.log(this.$store.state.test,'asfas fas fas')<br>      }<br>    },

子组件监听props变化<br>

参考资料

vue props 传值 触发事件方法

子组件

props:{show:Boolean}<br>watch:{<br>    show:function(indexVal, oldVal){<br>        console.log(indexVal, oldVal)<br>    }<br>}

注意

watch不能监听$refs的变化

deep监听

参考资料

vue中computed和watch，方法的区别以及deep,immediate

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

实例

export default {<br>  watch: {<br>    someObject: {<br>      handler(newValue, oldValue) {<br>        // 注意：在嵌套的变更中，<br>        // 只要没有替换对象本身，<br>        // 那么这里的 `newValue` 和 `oldValue` 相同<br>      },<br>      deep: true<br>    }<br>  }<br>}<br>

父子组件双向数据绑定

参考资料

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

v-model

参考资料

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

父组件调用子组件函数

参考资料

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

使用ref

this.$refs.refName.method

子组件调用父组件函数

参考资料

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

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

this.$parent.methodName()

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

computed

参考资料

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

原理

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

实例

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

何时更新

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

监听实例

参考资料

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

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

vue 中 watch 的使用

Vue 3 官方文档 Computed

监听窗口大小变化

参考资料

VueJs 监听 window.resize 方法

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

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

实例

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

监控滚动位置

参考资料

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

<template><br>  <div id="app"><br>    <p v-for="n of 100" :key="n">{{ n }}</p><br>  </div><br></template><br><br><script><br>export default {<br>  name: "App",<br>  created() {<br>    window.addEventListener("scroll", this.handleScroll);<br>  },<br>  unmounted() {<br>    window.removeEventListener("scroll", this.handleScroll);<br>  },<br>  methods: {<br>    handleScroll(event) {<br>      console.log(window.scrollY);<br>    },<br>  },<br>};<br></script>

监听键盘事件

参考资料

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

Vue 3官方文档

监听双击

参考资料

Vue双击点击事件

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

监听右击

参考资料

vue鼠标右击事件@contextmenu.prevent

<div @contextmenu.prevent="rightClick"></div><br>

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

监听blur

参考资料

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

监听hover事件

参考资料

vue的hover鼠标悬停hover事件

Vue的hover事件

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

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

等待 nextTick

参考资料

vue中的nexttick

03-03 组件基础 -<br>数据交互

参考资料

Vue3 Props

Vue2 Prop

关于命名

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

父组件向子组件传值

父组件

属性值传值

固定传值

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

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

没有冒号

绑定传值

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

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

有冒号

子组件

props接收

命名规范

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

基本使用

Vue.component('menue-item',{<div>    props:['title'],<br><div><span style="font-size: inherit;">    template:'<div>{{title}}</div>', </span><br></div><div><span style="font-size: inherit;">})</span><br></div></div>

另一种“数据”传递

具名插槽

作用域插槽

<br>

子组件向父组件传值

参考资料

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

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

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

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

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

带参数传值

<br>

兄弟组件之间传值

创建事件中心通信

var hub = new Vue();<br>

组件监听

<div>Vue.component('test-tom', {<br></div><div>.....</div>mounted: function() {<div>    // 监听事件<br>    hub.$on('tom-event', (val) => {<br>        this.num += val;<br>    });<br> }<br></div><div>......</div><div>}</div>

事件触发

<div>Vue.component('test-jerry', {<br></div><div>......</div>methods: {<br>    handle: function(){<br>        // 触发兄弟组件的事件<br>        hub.$emit('tom-event', 1);<br>    }<br> },<br><div>......</div><div>}</div>

事件销毁

03-04 组件基础 -<br>HTML模块

模板

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

根元素必须是单个的

原因没太搞懂

插槽

参考资料

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

Vue中slot的常见用法

vue插槽（slot）详解

具名插槽

子组件

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

父组件

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

03-05 组件基础 -<br>动态组件

contenteditable<br>插入vue组件

参考资料<br>

vue, how dynamically, programically, on click add component to the DOM specific place?

如何将 vue 组件插入 contenteditable div

vue3.x 动态创建组件

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

参考代码

插入contenteditable<br>- vue2需要调整

addContainer() {<br>  // dynamically create component, replace 'Child' with your component<br>  var ComponentClass = Vue.extend(Child);<br>  var instance = new ComponentClass();<br>  instance.$mount();<br><br>  // get the caret position and insert component at that place<br>  var sel, range;<br>  if (window.getSelection) {<br>    sel = window.getSelection();<br>    if (sel.getRangeAt && sel.rangeCount) {<br>      range = sel.getRangeAt(0);<br>      range.deleteContents();<br>      range.insertNode(instance.$el);<br>      // remove the highlight (if you want)<br>      window.getSelection().removeAllRanges();<br>    }<br>  }<br>}

实例 - 父组件

//实例化组件<br>      let pop = createApp(Popup,{<br>        {getLines:getLines}//传递参数(方法)<br>      });<br>      //传递参数(数值)<br>      pop.provide('test', 123);<br>      //使用组件<br>      pop.use(ElementPlus)<br>      //创建dom，及即组件容器<br>      const parent = document.createElement('div');<br>      const component= pop.mount(parent);<br>      //设置弹窗内容<br>      infoWin.setContent(component.$el);<br>

实例 - 子组件

<br>export default{<br>  name: 'map-pop',<br>  props:{<br>    getLines:{<br>      type:Function<br>    }<br>  },<br>  setup (props) {<br>    //接受参数<br>    const test=inject('test');<br>    //调用父组件查看轨迹方法<br>    function getLine(data){<br>      props.getLines(data)<br>    }<br>    return {test,getLine}<br>  },<br>}<br>

成功代码

import {createApp} from "vue"<br>import TeXBox from "@/contentbox/TeXBox";<br>

insertTeXBox(formula = ""){<br>      let texBox = createApp(TeXBox,{<br><br>      });<br>      texBox.provide("formula", formula);<br>      const parent = document.createElement('div');<br>      const component= texBox.mount(parent);<br>      // get the caret position and insert component at that place<br>      let sel, range;<br>      if (window.getSelection) {<br>        sel = window.getSelection();<br>        if (sel.getRangeAt && sel.rangeCount) {<br>          range = sel.getRangeAt(0);<br>          range.deleteContents();<br>          range.insertNode(component.$el);<br>          // remove the highlight (if you want)<br>          window.getSelection().removeAllRanges();<br>        }<br>      }<br>    }

Vue相关库

项目与配置管理

参考资料

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

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

Vue Cli

官网

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

vite

官网

模块化管理与打包

Webpack

Rollup

JS包管理

参考资料

node.js,npm,vue-cli,webpack前端环境和工具的关系

npm 的 --save 选项

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

npm

node.js

yarn

Vue库概览

参考资料

17个最流行的 Vue 插件

路由管理

Vue-router

压缩

参考资料

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

vue-cli-plugin-compression

NPM官网

vue.config.js

const zlib = require("zlib");<br>module.exports = {<br>  pluginOptions: {<br>    compression:{<br>      brotli: {<br>        filename: '[file].br[query]',<br>        algorithm: 'brotliCompress',<br>        include: /\.(js|css|html|svg|json)(\?.*)?$/i,<br>        compressionOptions: {<br>          params: {<br>            [zlib.constants.BROTLI_PARAM_QUALITY]: 11,<br>          },<br>        },<br>        minRatio: 0.8,<br>      },<br>      gzip: {<br>        filename: '[file].gz[query]',<br>        algorithm: 'gzip',<br>        include: /\.(js|css|html|svg|json)(\?.*)?$/i,<br>        minRatio: 0.8,<br>      }<br>    }<br>  }<br>}

状态管理

参考资料

Vue中使用cookies

概念区分

参考资料

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

cookie和localStorage详解

cookie

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

主要用于标识与验证用户

localStorage

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

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

sessionStorage

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

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

vuex

运行在内存

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

应用场景

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

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

sessionStorage与server Session

sessionStorage是client端的储存的东西

server Session是server端存储的东西

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

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

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

见典型应用 - 自动登录

Vue Cookies

Vuex

Vuex Persisted State

Github

vue持久化存储

数据通讯

Vue - Axios

序列化 - qs

参考资料

QS中文文档

qs库的使用

简单使用

export const adminLogin = (username, password) => {<br>    return axios.post("/loginbackstage", Qs.stringify({ username, password }));<br>};

UI组件库

参考资料

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

富文本编辑器

参考资料

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

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

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

Mint-UI

Element-UI<br>Vue 2.0组件库

Element Plus<br>Vue 3.0组件库

Material Design Icons

Buefy

参考资料

官方文档

下载

npm

npm install buefy

yarn

yarn add buefy

开始

添加一行，头部导入

import Buefy from "buefy";

添加一行，注册

Vue.use(Buefy);

Vuetify

参考资料

官网

Vue 表单工具组件

拖拽

参考资料

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

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

Vue Draggable - 拖拽排序

Sortable.js

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

LESS&SASS

参考资料

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

LESS安装

参考资料

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

yarn add less less-loader --dev<br>

LESS语法

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

要用/* */

SCSS安装

参考资料

如何在vue用scss

scss在Vue中的安装及使用

npm

npm install node-sass --save-dev //安装node-sass <br>

npm install sass-loader --save-dev //安装sass-loader <br>

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

yarn

yarn add node-sass --dev

yarn add sass-loader --dev

yarn add style-loader --dev

其他支持库

ES高级语法支持

参考资料

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

一口（很长的）气了解 babel

babel

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

代码语法格式

参考资料

ESLint在Vue中的使用

什么是ESLint？

eslint

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

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

其他功能库

地图库

vue-baidu-map<br>百度地图

参考资料

github项目地址

中文文档

百度地图官网

下载

yarn

yarn add vue-baidu-map

npm

npm install vue-baidu-map

开始

添加一行，头部导入

import BaiduMap from 'vue-baidu-map'

添加一行，注册

Vue.use(BaiduMap, {ak:'此处粘贴百度地图ak'})

使用

参考资料

快速上手Vue+百度地图

地图

<template><br>  <baidu-map id="allmap" @ready="mapReady"><br>  </baidu-map><br></template><br><br><script><br>export default {<br>  name: "Map",<br>  methods:{<br>    mapReady({ BMap, map }) {<br>      // 选择一个经纬度作为中心点<br>      this.point = new BMap.Point(-0.1,51.50);<br>      map.centerAndZoom(this.point, 13);<br>    },<br>  }<br>}<br></script><br><br><style scoped><br>/* 设定地图的大小 */<br>#allmap{<br>  background-color: aliceblue;<br>  height: 80vh;<br>  width: 98vw;<br>  margin: 0 auto;<br>}<br></style>

自定义覆盖库

多媒体

音频

参考资料

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

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

移动端适配

禁止移动端双击和缩放

参考资料

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

在index.html中

在app.vue中

created() {<br>    // 禁止页面缩放<br>    window.onload = function () {<br>      document.addEventListener("touchstart", function (event) {<br>        if (event.touches.length > 1) {<br>          event.preventDefault();<br>        }<br>      });<br>      document.addEventListener("gesturestart", function (event) {<br>        event.preventDefault();<br>      });<br>    };<br>  },

阻止下拉刷新

参考资料

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

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

CSS

body {<br> overscroll-behavior-y: contain;<br>}

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

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

在app.vue设置overflow: hidden

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

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

定义函数

window.addEventListener("resize", resetHeight);

body

监听

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

页面初始化

resetHeight();

input focus<br>页面缩放问题

参考资料

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

Disable Auto Zoom in Input "Text" tag - Safari on iPhone<br>

CSS

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

虚拟DOM

参考资料

CSDN - vue虚拟DOM详解

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

CSDN - 什么是虚拟DOM

虚拟DOM<br>解决的问题

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

Vue2使用

参考资料

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

这个refName就是组件key的值

this.$ref.refName

Vue3使用

参考资料

vue3官方文档 - Template Refs<br>

vue 3.0 使用ref获取dom元素

vue3中获取dom元素和操作

JS通过变量访问对象属性

定义ref

<div ref="refName"></div>

使用

this.$refs.refName

变量访问

this.$refs[variableRefName]

访问ref的<br>data与函数

参考资料

Vue中ref的三种用法

data

this.$refs.refName.dataName

method

this.$refs.refName.methodName

v-for无法<br>动态绑定ref

参考资料

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

解决方法

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

语法

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

示例

<br><li v-for="(list, index) in tagList" :key="index" ref="tagItem">{{list.value}}</li><br> <br><br>this.$refs.tagItem[0].style.backgroundImage = `url(${xxx})`<br>

多个同名ref

参考资料

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

ref数组

参考资料

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

实例

<br><div :ref="'menuItem'+index" class="menu_item" v-for="(item,index) in menuData" :key="item.id" @click="clickMenu(index)"><br>    <div class="menu_item_title"><br>        {{item.name}}<br>    </div><br></div>

export default {<br>  name: 'demo',<br>  components: {},<br>  data() {<br>    return {<br>      menuData: [<br>        {id: '0001', name: '菜单一'},<br>        {id: '0002', name: '菜单二'},<br>        {id: '0003', name: '菜单三'},<br>      ],<br>    }<br>  },<br> <br>  watch: {},<br>  computed: {},<br>  created() {<br>  },<br>  mounted() {<br>    console.log(this.$refs);<br>  },<br> <br>  methods: {<br>    clickMenu: function (index) {<br>      //this.$refs[`menuItem${index}`]是个数组<br>      console.log("点击了", this.$refs[`menuItem${index}`][0]);<br>    }<br>  }<br>}

Composition<br>与函数式编程

官网

Composition API FAQ

参考资料

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

对比React的hooks与Vue的composition

源码泄露问题

参考资料

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

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

module.exports = {<br>    //在实际发布的时候，建议将devtool的值设置为nosources-source-map或者关闭sourceMAP<br>    devtool:'nosources-source-map',<br>}<br>

常见问题

移动端overflow失效

可能是body没有加overflow:hidden

单双击冲突

参考资料

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

应用场景 -<br>双击重命名

html

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

Script

setEditable() {<br>      if (!this.clickedOnce&&!this.editable) {<br>        this.editable = true;<br>        this.timer = setTimeout(() => {<br>          this.editable = false<br>          this.clickedOnce = false;<br>        }, 1000);<br>        this.clickedOnce = true;<br>      }else{<br>        this.clickedOnce = false;<br>      }<br>    },<br>    setEditableDefinite() {<br>      clearTimeout(this.timer);<br>    },<br>    renameAndSetNotEditable() {<br>      this.editable = false;<br>    },

$store没有高亮

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

div没有keydown事件

参考资料

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

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

参考资料

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

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

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

Vue3注意

参考资料