分类：Vue

2020
10-08

Vue中keep-alive的两种应用方式

Vue中keep-alive的使用我总结的有两种方式应用：首先简述一下keep-alive的作用，kee-alive可以缓存不活动的的组件。当组件之间进行相互切换的时候，默认会销毁，当重新切换回来时又重新初始化。现在有需求切换回来不销毁组件，保持原来的状态，此时用keep-alive就可以实现了我创建了两个组件，可以相互切换组件1：组件2：第一种方式在组件1的路由中添加meta:{keepAlive:true},也就是当前路由需要缓存此时路由设置完毕，keep-... 继续阅读 >

2020
10-08

详解Vue中的MVVM原理和实现方法

下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现，这篇文章大家可以学习到：1.Vue数据双向绑定核心代码模块以及实现原理2.订阅者-发布者模式是如何做到让数据驱动视图、视图驱动数据再驱动视图3.如何对元素节点上的指令进行解析并且关联订阅者实现视图更新一、思路整理实现的流程图：我们要实现一个类MVVM简单版本的Vue框架,就需要实现一下几点：1、实现一个数据监听Observer，对数据对象的所有属性进行监听，数据发生变化可以获... 继续阅读 >

2020
10-08

如何在Vue中使localStorage具有响应式(思想实验)

响应式是Vue.js的最大特色之一。如果你不知道幕后情况，它也是最神秘的地方之一。例如，为什么它不能用于对象和数组，而不能用于诸如localStorage之类的其他东西?让我们回答这个问题，在解决这个问题时，让Vue响应式与localStorage一起使用。如果运行以下代码，则会看到计数器显示为静态值，并且不会像我们期望的那样发生变化，这是因为setInterval在localStorage中更改了该值。newVue({el:"#counter",data:()=... 继续阅读 >

2020
10-08

如何在Vue中使localStorage具有响应式(思想实验)

响应式是Vue.js的最大特色之一。如果你不知道幕后情况，它也是最神秘的地方之一。例如，为什么它不能用于对象和数组，而不能用于诸如localStorage之类的其他东西?让我们回答这个问题，在解决这个问题时，让Vue响应式与localStorage一起使用。如果运行以下代码，则会看到计数器显示为静态值，并且不会像我们期望的那样发生变化，这是因为setInterval在localStorage中更改了该值。newVue({el:"#counter",data:()=... 继续阅读 >

2020
10-08

Vue切换div显示隐藏,多选，单选代码解析

切换div显示隐藏1）单个item下的部分dom结构，显示或隐藏切换，不会修改其它同级dom的显示/隐藏templatedom结构<divclass="list-item"v-for="(list,index)injobList"><pclass="job-name">{{list.jobName}}</p><pclass="job-info"><el-checkboxv-model="list.checked"@change="checkOne(index)"></el-checkbox><spanclass="info">{{list.locationDesc}}{{list.minDegreeDes... 继续阅读 >

2020
10-08

Vue组件间数据传递的方式(3种)

vue中传递数据的方式有哪些数据流的方式传递数据通过props传递属性父级给demo2组件绑定一个msg数据父组件<template><divclass='container'><demo2:msg="msg"@change="change"/></div></template><script>importdemo2from'./demo2'exportdefault{data(){return{msg:'这是测试数据'}},methods:{change(value){this.msg=value}},components:{demo2}}</script>子组件通过定义props来使用msg，$emit触... 继续阅读 >

2020
10-08

vue-cli4项目开启eslint保存时自动格式问题

最近新建一个vue-cli4的项目，初始化的时候没开启eslint，后面想开启的时候不好配置，这里就做个开启eslint和保存时自动修复格式的总结vscode首先安装eslint插件配置vscode的自动保存eslint格式Ctrl+shift+p把下面代码复制到里面"editor.tabSize":2,"eslint.alwaysShowStatus":true,"eslint.autoFixOnSave":true,"eslint.packageManager":"yarn","eslint.validate":["javascript",//用eslint的规则检测js文件{"lang... 继续阅读 >

2020
10-08

Vue watch响应数据实现方法解析

在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法：<inputtype="text"v-model="cityName"/>newVue({el:'#root',data:{cityName:'shanghai'},watch:{cityName(newName,oldName){//...}}})直接写一个监听处理函数，当每次监听到cityName值发生改变时，执行函数。也可以在所监听的数据后面直接加字符串形式的方法名：watch:{cityName:'nameChange'}}... 继续阅读 >

2020
10-08

详解Vue之事件处理

在Vue进行前端开发中，事件监听是必不可少的功能，本文通过简单的小例子，简述v-on的简单用法，仅供学习分享使用，如有不足之处，还请指正。监听事件可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码。如下所示：<buttonv-on:click="counter+=1">Add1</button><p>按钮被点击了{{counter}}次.</p>其中counter为Vue自定义的一个属性值。事件处理方法事实上，许多事件处理逻辑会更为复杂，所以直接把Ja... 继续阅读 >

2020
10-08

详解Vue之事件处理

在Vue进行前端开发中，事件监听是必不可少的功能，本文通过简单的小例子，简述v-on的简单用法，仅供学习分享使用，如有不足之处，还请指正。监听事件可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码。如下所示：<buttonv-on:click="counter+=1">Add1</button><p>按钮被点击了{{counter}}次.</p>其中counter为Vue自定义的一个属性值。事件处理方法事实上，许多事件处理逻辑会更为复杂，所以直接把Ja... 继续阅读 >

2020
10-08

Vue路由切换页面不更新问题解决方案

前言：vue-router的切换不同于传统的页面的切换。路由之间的切换，其实就是组件之间的切换，不是真正的页面切换。这也会导致一个问题，就是引用相同组件的时候，会导致该组件无法更新，也就是我们口中的页面无法更新的问题了。一、问题呈现在路由中进行切换结果这时候会发现input标签的value值并没有随着路由的改变而改变。并没有更新二、解决方案①给<router-view:key="key"></router-view>增加一个不同:key值，这样vue就会识别... 继续阅读 >

2020
10-08

简单了解Vue computed属性及watch区别

自己的理解：1.computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；2.computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删... 继续阅读 >

2020
10-08

通过实例解析chrome如何在mac环境中安装vue-devtools插件

1之前在windows上装过，最近刚换了个mac本，重新安装下，也是为了记录下我安装的过程。github下载vue-devtool到本地下载地址https://github.com/vuejs/vue-devtools#vue-devtools注意，下载的时候默认的是在dev分支，要切换到master,然后克隆到本地（可以先放桌面）2.将下载的项目文件放入Chrome浏览器的插件文件夹在浏览器地址栏输入chrome://version/找到路径之后，可以在顶部工具栏”前往“中直接输入文件地址3.在default文件... 继续阅读 >

2020
10-08

基于vue+element实现全局loading过程详解

项目中使用的是vue+element实现的全局loading1.引入所需组件，这里主要就是router和element组件，element组件引入可以参考element官网2.下面就是重点及代码实现了首先是全局的一个变量配置参数，代码如下：//全局页面跳转是否启用loadingexportconstrouterLoading=true;//全局api接口调用是否启用loadingexportconstapiLoading=true;//loading参数配置exportconstloadingConfig={lock:true,text:'Loading',spinne... 继续阅读 >

2020
10-08

ssm+vue前后端分离框架整合实现(附源码)

前言本文针对Spring+SpringMVC+Mybatis后台开发框架（基于maven构建）与vue前端框架（基于webpack构建）的项目整合进行介绍，对于ssm和vue单独项目的搭建不作为本文的重点，而着重介绍两者之间交互的要点。SSM项目结构说明项目有service和web两个子项目组成，web依赖于service，其中web主要是control层内容，service则对应service层，而MyBatis内容放在了service项目中，spring配置文件放在了web项目中。将control层和service层分... 继续阅读 >

2020
10-08

Vue作用域插槽实现方法及作用详解

默认插槽和具名插槽的概念比较好理解，这里主要以官方文档的案例来讲解一下作用域插槽。首先是有一个currentUser的组件：<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head><body><divid="app"><current-user>{{user.firstName... 继续阅读 >