vuex作为一个共享的数据对象，用于不同组件的共用一个数据，并且动态响应数据变化，配合computed属性，可以对数据进行缓存。在vuex里面，在异步处理actions上，最终也还是要用到commit同步操作方法操作数据，并不是actions方法本身处理了数据，原因是因为需要有操作记录，方便在插件上查看。废话不多说，直接上底层原理。原理vuex其实就是一个重新封装的new Vue 对象，他的动态响应数据就是data属性，而commit这些方法，都只是回调而已。import Vue from "vue"; const Store = function(options ...
包含数字、字符、特殊字符，6-16位/(?=.*[a-z_])(?=.*\d)(?=.*[^a-z0-9])[\S]{6,16}$/提示信息：密码为6-16位，必须包含数字和字母和至少一个特殊字符!@-_=<>#*%+&^$
templatetemplate是html的扩展语法，数据绑定使用Mustache语法（双大括号）<span>{{message}}</span>所以template容易上手，入门极简，大量内置指令，拥有组件作用域css，但是因为简单，所以灵活性不高。jsxjsx是JavaScript的语法扩展，数据绑定使用单引号。<span>{message}</span>jsx相对于template，jsx更灵活，但是也不一定要完全抛弃template。jsx为什么灵活，原因就是他不是html模板，所以jsx中的标签，他可以是变量，我们改变这个变量，这...
父组件与子组件的传参，使用的是props，如果是父组件与孙子组件传参，大部分可能会采用递归的方式，也就是子组件props接收，然后再props传给孙子组件。或者使用vuex。但如果是迭代的方式，组件的层级越深，不断迭代的props会是代码越来越无法维护，冗余。于是官方出了provide inject。provide有父组件设置，inject由子组件接收，他们的特性：祖先组件不需要知道哪些后代组件使用它提供的属性后代组件不需要知道被注入的属性来自哪里例子：父组件<script> export default { provide: { foo: 'bar�...
阻止双击选中文本个人有两种实现方式，可以根据实际环境进行操作。使用非文本元素如果我们对一个div元素双击，你会发现，他的文本会被选中，如果不想被选中，只能通过css的方式来进行操作，但是，css一旦设置，就永远不能选中了，也许，我们只是希望在双击时不选择，用户滑动选择时已经可以选中文字。css阻止选中.no-select { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-sel...
vue会对data中的值进行处理，如果在template中使用到了，就会对这个值进行setter和getter处理，等于就是添加到了watch一样，当数据发生变化时，就会触发的方对应的getter、setter方法，方法针对性的更新。这个setter和getter的绑定触发，是必须现在data预设好才行，否则vue都运行完毕了再进行添加，是无法响应式更新的。也就是说。vue的响应式更新，他只能监听你一开始就预设好的值，如果你是后面再手动添加的，是无法检测到的，也就无法进行更新。比如：data(){ return { obj:{} } }有一个obj的空对象我们手动给他附加...
vue渲染html时，会生成一个虚拟dom树，被称之为vdom，然后每次数据的更新，旧的dom树和新的dom树进行比对，然后针对性的更新。两个dom树之间的对比，最佳的体验是深层遍历，也就是遍历每个节点，但是这种遍历是非常损耗性能的，所以现在都是浅层遍历。也就是同层对比。两个层级之间进行对比，如果某一项变化了，就要发生改变，这样就会导致，该层级的下一级的元素是重绘的。因为这一层重新弄了，下面的东西自然就要切断，重新生成。而key的作用，就是对这个层级打上标识，如果有了标识，就能够判断是这个元素是不是相同的，相同的，如果只是移动了，那就不用删除重新生成，直接移动即可。如果是相同的元素，位置...
双向绑定和单向数据流什么是双向绑定？双向绑定指的是：数据model的更新会触发可视层的更新，而可视层的更新会触发数据model的更新。这就是v-model绑定input元素所做的事情。单向数据流单向数据流：数据model的更新触发可视层的更新，而可视层的更新和model不会有任何关系。vue的几个概念vue是单向数据流，不是双向绑定vue的双向绑定不过是语法糖Object.defineProperty是用来做响应式更新的，和双向绑定没有关系。v-model做了什么v-model默认限制只能用在：input、select、textarea、components也就是除了表单元素，还有可以用...
今天遇到这么一个需求，官网的个别页面需要新建页面打开，但是这个页面我是配置的路由。一直以来，我以为路由的跳转只能就是在当前页面进行，特别是我跳转路由使用的都是路由name属性。接到这个请求我有点懵逼了，哈哈。。解决方法router-link元素默认生成的是一个a元素，仔细查看你会发现a元素的href是带有路径链接的，哪怕你跳转的:to="{name:xxx}"使用的是路由name。它最终生成的a元素，href依旧是路由的path，所以，既然他能生成路径，那么我们只需要给他加上a元素的attr属性target即可。<router-link :to="{n...
饿了么ui的返回顶部，官方的文档非常不上心，写的那个无法使用，因为默认那个示例里面，他用了target属性，然而实际上，如果你没啥定制化的滚动条，而是body的滚动条，那么target就不需要设置。<!-- 返回顶部 --> <el-backtop> <i class="el-icon-arrow-up"></i> </el-backtop>这样就行了，效果ok，不会不显示，滚动效果也是有的。里面的i是我自定义图标，这个看下文档就明白了。
当我们使用vue去创建一个官网的时候，或者是其他传统类型的html，就会触碰到vue的痛点，他没有seo优化。因为所有的html全是js生成，你打包出来的文件，最终也只是一个简单的index.html，里面可以说什么都没有。这样的话是不利于爬虫抓取的，所以我们需要进行预渲染。目前我将预渲染分为两种：服务器渲染 ssr本地打包渲染服务器渲染ssr可能很多人不太清楚怎么回事，其实只要知道node后台服务搭建，那就肯定是知道的，因为所有的node框架，他都绕不过一个知识点，就是模板语法渲染html页面，这个就是所谓的ssr了。可以理解成node的php写法吧。这个由于目前还未遇到，而且之前学n...
首先，如果你是重装系统，那么在安装界面你可以连接到wifi，但是，安装完开机后还是连接不了的，所以，最佳的方案是这样的：先有线连接网络并安装系统 --- 关闭防火墙 --- ssh连接 --- 安装NetworkManager-wifi ---- 连接无线网 ---搞定这里就以ssh连接后开始：你可能需要先关闭防火墙，如果ssh连接不上的话:systemctl stop firewalld.servicesystemctl disable firewalld.service教程yum install NetworkManager-wifi安装完毕后重启：reboot重启后开启wif...
有时候有些代码总是重复输入，但是没有自动补全，总是重复书写很头疼，特别是路径。错一个字就error所以我们可以使用编辑器的自定义代码补全功能，省去了大把时间。教程文件 --- 首选项 --- 用户片段 --- 这里我们可以创建全局的，或者基于当前项目的代码提示 --- 我这里选择全局 选择全局后会进入一个json文件，这里就不多解释了，直接上代码{ // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // de...
对于打包的优化，除gzip和按需引入，就只有cdn是效果最明显的了。首先使用cdn我们要明确一个事实，就是我们cdn加载的文件，他是没有所谓的按需引入的概念，他就是一个完整的包，顶多给你分为基础包、核心包、完整包啥的。所以，引入是定死的，不可能说你用到什么功能自动引入什么功能，那是本地打包才能做到的。就好比如element ui ，本地打包，我可以按需引入，用到什么引入什么，然后生成一个js文件，但是cdn，你要么就引入全部功能，要么就自己本地，只能这么二选一。所以，对于像element ui 这种框架的打包优化，如果你是按需引入，你可能需要调整为完整引入，因为最终打包使用的是cdn资源...
lodash这库还是为微信技术群里有人推荐的，我一开始都不知道，不过看了下，是对一些常用js方法的封装，比如深度克隆，筛选啊这些。但是一个lodash的库引用，他占用了起码有500kg的大小，在vue cli 打包后，在chunk-vendors.js文件中也占据了一些大小。这就会导致chunk-vendors这个文件变得特别的大，但是lodash里面的方法你可能只会用到一部分，并不是全部，所以我希望的是，他可以按需引入，并且不改变原来的写法的情况下。教程安装插件yarn add lodash-webpack-plugin babel-plugin-lodash --dev安装这两个...
之前我写了一篇关于cli2的一个文件打包分析的用法，需要安装webpack-bundle-analyzer插件。然后还需要配置这配置那的，有点麻烦。不过现在vue cli已经内置这个功能了，不需要安装插件，也不需要配置vue.config.js，我们只需要给package.json添加一段启动命令即可。"scripts": { "report": "vue-cli-service build --report" }使用该命令即可。然后运行这个report。他会生成dist打包目录，并且在里面生成一个report.htm...
函数注释的一个常用的格式：/** * @description: 函数描述 * @param {类型} 参数 描述 * @return {类型} 描述 */description 就是函数的说明，干什么用的param 是函数的参数； {}里面表示这个参数是什么类型，后面接参数名称，描述，参数有多少个，@param就有多少个return 表示要输出的内容，一般可以省略不写，也可以写，和param 差不多示例/** * @description: 测试函数 * @param {*} a 任何类型参数 * @param {*} b 用来xxx * @return {*} 返回空...
是不是经常头疼vue cli项目怎么绑定图片，是不是感觉为什么路径是对的，但是就是会报错？那么我们就来一一讲解，vue cli怎么才能绑定图片。style标签中引用图片我们的资源存放路径就两个：纯静态的public文件夹动态的src/assets文件夹assets里的图片，如果很小的话，webpack打包的时候会将其转为base64，这样就减少了文件的请求数量，但是相对来说，如果特别多小图片，那么反而会增加js文件的大小，因为base64并不是压缩，如果文件很大，base64占用的存储可能会比原文件还要大一些。所以，优化很重要，但是要看项目需求。引入public中的资源首先我们要知道，p...
初衷是因为自己有这个需要，然后又看了下市面上的ui组件，基本都没这个功能，不知道他们怎么想的，为什么要一定要传到服务器等拿到api参数才进行回显，且图片是在线连接。这不是很蛋疼吗？？？？？我本地随便传个图，你就丢服务器了，不是很费资源吗？预览图使用因为就花了半个小时写，没怎么精心，反正代码极度简洁，二开也方便，有需要自取。反正就是，除了icon用的饿了么框架的，其他的都是自写css，所以兼容性还可以，懂的都懂，不懂的，就先学学基础吧。源码<template> <div class="upload"> <div class=&q...
最近评论