Vue
文章平均质量分 88
Posden
唯天下之至拙能胜天下之至巧。曾国藩表示,我没说过这句话
展开
-
Vue3答题问卷H5实战
公司有个H5项目,简单试一下水,以答题问卷的小功能做示例。可单选,和多选(选择题中可以选择某个选项,可上传图片或文字),以及文字输入和图片集(图片,图片描述),当然必选校验也加了。当然一般情况下,一般就涉及单选,多选(仅选择)题,文本题和最多再加个图片。哎,甲方永远是爸爸。但凡在Vue3项目中,使用基于vue的第三方插件(组件)请确保支持Vue3版本,如果不支持,就不要使用(当然你可以改包源码)。常见的错误,this的指向,$emit, new Vue()…页面创建vue create proj原创 2021-06-03 17:28:22 · 2507 阅读 · 0 评论 -
微信小程序扫码实现web自动登录
清明假期在家无聊,写了一个微信小程序扫码,web登录的demo技术栈前端:vue2+vue-socket.io+uuid,微信小程序原生+weapp.socket.io后端: eggjs+redis+socket.io+qr-image细分说明web端流程打开登录页面请求获取二维码客户端先生成一个唯一值uuid, 携带uuid请求服务端,服务端并将uuid作为key,值为空,一个过期时间,存进redis中服务端利用uuid,作为qr-image的option,生成二维码(微信小程序扫码原创 2021-04-06 23:38:15 · 2048 阅读 · 0 评论 -
vue-element-admin路由后端返回,动态渲染
vue-element-admin默认是按照路由meta.role角色,动态匹配的。但通常是不灵活的。总不能每次设置一个角色,前端还要动态配置。相对理想的状态,是后台配置一个用户,设置role权限,权限绑定了你需要的路由模块。本文讲述如何根据后台路由,动态渲染后台管理系统菜单栏。下载模板链接修改配置store/modules/perimission.js.import { constantRoutes } from '@/router'// import { getRouters } fro原创 2020-11-15 18:12:02 · 3010 阅读 · 4 评论 -
Vue3 从新出发
整理两篇关于vue3文章。我不是生产者,但努力做好一个传递者一、使用vite初始化项目vite 介绍vite是尤大大在今年新鼓捣出来的一个工具,尤大大对vite的描述是这样的: Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production. 翻译成中文就是:Vite .原创 2020-10-08 17:55:40 · 3174 阅读 · 0 评论 -
vue-cropper图片上传剪裁压缩组件
安装npm install vue-cropperyarn add vue-cropper注册组件内使用import { VueCropper } from 'vue-cropper' components: { VueCropper,},main.js里面使用import VueCropper from 'vue-cropper' Vue.use(VueCropper)cdn方式使用<script src="vuecropper.js"></scr原创 2020-07-27 09:46:39 · 598 阅读 · 0 评论 -
Vue日常借鉴
日常白*hookEvent,原来可以这样监听组件生命周期内部监听生命周期函数今天产品经理又给我甩过来一个需求,需要开发一个图表,拿到需求,瞄了一眼,然后我就去echarts官网复制示例代码了,复制完改了改差不多了,改完代码长这样<template> <div class="echarts"></div></template><script>export default { mounted() { this.char原创 2020-07-03 19:43:07 · 498 阅读 · 0 评论 -
vue-element-admin 爬坑记录
在 Vue Element UI 中 el-tab 导出表单后端提供接新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导...原创 2020-05-05 09:11:46 · 573 阅读 · 0 评论 -
vue路由文件自动化处理
你还在一个个路由文件引入而烦恼吗你还被别人说,你只是一个只会ctrl+ c ctrl +v的码仔吗做个与世无争的垃圾不好吗global.ts// 可以把检测的类型去掉,转成js// 关键在于 require.context// 暴露了两个方法 在组件声明两个变量来区别状态 isRouter isComponentimport Vue from "vue";// 获...原创 2020-01-23 17:27:59 · 751 阅读 · 0 评论 -
Vue 更新数据 页面刷新
我一直采取的方式比如我一开始有列表数据,我要删除某一数据,之后接口请求成功之后,最后请求列表数据接口。是不是你跟我一样,今天看见一篇文章 利用 provide和inject 处理 刷新页面问题provide / inject官网文档链接PS:provide和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。本文以真实接...原创 2020-01-15 14:33:14 · 446 阅读 · 0 评论 -
vee-validate 3.2.1
本文"vee-validate": "^3.2.1"详情请翻阅 官网地址初衷vant UI Field 有错误插槽,但是没有校验规则。你可以自定义一些规则,if else,你应该懂我的意思吧。关键是不优雅,再加上面试的时候,你总不能这样跟面试官说吧。所以促使有了这篇文章。安装npm install vee-validate --save使用你可以在main.js中引用,当然最好新...原创 2020-01-06 13:17:36 · 729 阅读 · 2 评论 -
Vue -Ts入门 mixins (四)
mixin混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。会把data / created / methods … 合并创建一个mixin的文件myMixin.tsimport { Component, Vue } from 'vue-proper...原创 2020-01-03 11:36:25 · 3617 阅读 · 2 评论 -
Vue -Ts入门 Vue-Router (三)
全局路由可以正常使用。这里说明的是组件内路由钩子main.jsimport router from './router';import { Component } from 'vue-property-decorator';Component.registerHooks([ 'beforeRouteEnter', 'beforeRouteLeave', 'beforeRout...原创 2020-01-02 14:59:14 · 7589 阅读 · 1 评论 -
Vue -Ts入门 Vuex (二)
接着上文 Vue -Ts入门 (二)本人也是第一次写,所以若有所出处,欢迎指正。准备工作按照个人项目实际情况npm i vuex -Snpm i vuex-class -S文件夹目录main.tsimport Vue from "vue";import Test1 from "./views/Test1.vue";+ import store from "./sto...原创 2019-12-30 17:21:14 · 3592 阅读 · 0 评论 -
Vue -Ts入门 (一)
本文章,是个人第一次尝试利用vue-cli3(事实更新vue-cli4),从头开始,加入typeScript。如果有出处,欢迎指正。共同成长。本文是做vue+ts;不会对原vue做过多的说明,如果有问题,欢迎私聊探讨。TypeScript 官网链接创建项目vue create vue-ts其他你自己按需求吧。shims-vue.d.ts毕竟 ts 默认只识别 .d.ts、.t...原创 2019-12-29 17:46:33 · 4101 阅读 · 0 评论 -
Vue VDOM 渲染 diff 简易版
从零开始创建一项目骨架项目目录npm init -ynpm install webpack webpack-cli html-webpack-plugin css-loader style-loader less-loader less file-loader clean-webpack-plugin extract-text-webpack-plugin webpack-merge w...原创 2019-12-26 17:26:36 · 187 阅读 · 0 评论 -
Vue keep-alive的那些事
上个班,才发现,下个月都过年了,距离年初你定的目标,怎么样了,是不是又荒废了一年,还是收货满满。看看年初的代码,是不是跟个米田共一样。走吧,走吧,走吧,人总要学着自己长大。keep-alive<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM;包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。<keep-alive i...原创 2019-12-02 14:22:11 · 127 阅读 · 0 评论 -
Vue Render渲染
下午开始看render渲染 官网链接项目需求,一个基本案例吧,就像下图展示,一个是slot,还有一个渲染列表,状态显示。官网上还是比较详细的。app.vueimport renderTest from "./components/render-test";<template> <render-test @myClick="myClick" level="2" ...原创 2019-11-15 18:11:58 · 435 阅读 · 0 评论 -
vue-cli3 webpack分离公共库 试试Dllplugin
vue 开发过程中,保存一次就会编译一次,如果能够减少编译的时间,哪怕是一丁点,也能节省不少时间。开发过程中个人编写的源文件才会频繁变动,而一些库文件我们一般是不会去改动的,比如 vue vuex vue-router,axios等等。如果能把这些库文件提取出来,就能减少打包体积,加快编译速度。本文主要讲述在 vue-cli3 中利用 DllPlugin 来进行预编译。一开始 npm run b...原创 2019-11-07 13:50:59 · 1687 阅读 · 0 评论 -
Vue 项目笔记 持续更新
公司一直是vue-cli2,正好要项目重构,所以趁此机会,将项目理一遍。如果有坑,希望大佬指出。移动端UI Vant选择的是vant,为此也纠结了一会,也是第一次使用。慢慢采坑,一踩一个准按需加载安装npm i vant -Syarn add vant按需加载 在 babel.config.js 中配置module.exports = { plugins: [ ...原创 2019-10-29 18:25:30 · 645 阅读 · 0 评论 -
vue-next
vue-next项目地址git地址:链接git clone git@github.com:vuejs/vue-next.gitnpm installnpm run dev // 生成一个未压缩的状态vue文件入门小案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...原创 2019-10-24 15:38:02 · 6261 阅读 · 2 评论 -
vue 数据绑定 与 利用proxy校验拦截
Vue 数据绑定Vue2vue.jsfunction vue(){ this.$data ={ a:1 }; this.el = document.getElementById("app"); this._html = ""; this.observe(this.$data) this.render()}vue.pro...原创 2019-10-17 13:44:27 · 476 阅读 · 0 评论 -
vue-cli3 配置 vue.config.js 环境变量env
const path = require("path");const uglifyJsPlugin = require("uglifyjs-webpack-plugin");const IsProduction = process.env.NODE_ENV === "production";// 引入文件function resolve(dir) { return path.jo...原创 2019-10-13 19:08:37 · 7160 阅读 · 0 评论 -
Vue 中 better-scroll 上拉加载,下拉刷新
OptionsstartX: 0 开始的X轴位置startY: 0 开始的Y轴位置scrollY: true 滚动方向为 Y 轴scrollX: true 滚动方向为 X 轴click: true 是否派发click事件,通常判断浏览器派发的click还是betterscroll派发的click,可以用_constructed,若是bs派发的则为truedirectionLockThr...原创 2019-09-24 00:19:23 · 827 阅读 · 0 评论 -
Axios封装和Vuex模块化
axios封装我之前是这样写法,如果有params,query参数字段的话字符串拼接。但看网上的有人说不建议放在Vue原型import axios from 'axios'Vue.prototype.$ajax= axios // 原型this.$ajax.get('api/getNewsList').then((response)=>{ this.newsList...原创 2019-03-27 22:48:40 · 1150 阅读 · 0 评论 -
Vue 高级使用 组件动态导入 Render
创建项目vue create super-vue组件导入公用组件一般都会写在components中import HelloWorld from "@/components/HelloWorld.vue";这样导入如果组件多了,就会每次都这样傻瓜般导入优化global.jsimport Vue from 'vue'function changeStr(str){ ...原创 2019-10-09 15:14:15 · 1642 阅读 · 2 评论 -
Vue 父子组件传值
一般props down 和 events up父传子1.先给父组件中绑定自定义属性2.在子组件中使用props接收父组件传递的数据3.可以在子组件中任意使用<nav-bar title="新闻详情"></nav-bar><template> <div class="cms-s-header"> <h5 @cl原创 2019-02-13 10:58:15 · 97 阅读 · 0 评论 -
Vue 基础
列一个大纲吧,具体的在官网都能找到,只是整理一份自己通俗易懂的版本吧数据驱动视图常用指令:v-if:在DOM中生成或移除一个元素。惰性:如果一开始为假,什么都不做,条件第一次为真,才开始编译,会缓存;组件创建和销毁v-show:基于css样式,display:block/none,元素始终编译保留。频繁切换选用v-model:双向数据绑定v-for:基于数据重复渲染元素v-text:...原创 2019-02-13 17:08:43 · 120 阅读 · 0 评论 -
Vue 摘录官网
第一次从工作中接触Vue项目,公司学习氛围不错。一边看官网,一边记录注意点所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值app.todos.push({ text: ‘新项目’ }),你会发现列表todos最后添加了一个新项目只有当实例被创建时 data 中存在的属性才是响应式的,所以一开...原创 2019-02-22 14:20:29 · 199 阅读 · 0 评论 -
vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。借鉴redux过简单store// 如果在模块化构建系统中,请确保在开头调用了 Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state....原创 2019-02-27 12:02:00 · 104 阅读 · 0 评论 -
Vue 与 webpack手动配置
上篇webpack入门,将常用重要点过了一下,这篇是手动搭建vue中webpack相关指令整理npm init -ynpm i -D webpack webpack-clinpm i vue -Smkdir src cd src touch index.jstouch webpack.config.jsnpm i -D html-webpack-plugin // 编译出html...原创 2019-04-11 23:45:31 · 321 阅读 · 0 评论 -
Vue随笔摘录
1.setTimeout/setIntervala. 无法正确使用this指向 //箭头函数访问this实例因为箭头函数本身没有绑定this setTimeout(() => { console. log(this);}, 500) ; //使用变量访问this实例let self=this; },1000);b. setInterval路由跳转继续...原创 2019-04-21 22:59:03 · 172 阅读 · 0 评论 -
Vue $set $nextTick $delete
1.$set在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m...原创 2019-04-23 11:00:38 · 540 阅读 · 0 评论 -
Vue 源码解读 起步(二)
数据驱动new Vue()从入口代码开始分析,我们先来分析 new Vue 背后发生了哪些事情。我们都知道,new 关键字在 Javascript 语言中代表实例化是一个对象,而 Vue 实际上是一个类,类在 Javascript 中是用 Function 来实现的,来看一下源码,在src/core/instance/index.js 中function Vue (options) { ...原创 2019-05-05 12:35:58 · 789 阅读 · 0 评论 -
Vuex 购物车demo
以简单的视图,唤醒一下沉睡的记忆必须要经过mutation环节,更新视图原创 2019-05-09 00:28:15 · 309 阅读 · 0 评论 -
Vue 生命周期
beforeCreate:组件创建实例之前created:组件实例刚被创建,可以操作数据data,一般在这里初始渲染数据(methods中请求数据,例如axios,在此调用)beforeMount:挂载之前,模板未编译,即还是el ,{{ msg }}之类的mounted:模板编译beforeUpdate:数据旧的beforeUpdate:数据更新activated: keep-ali...原创 2019-02-12 18:03:23 · 164 阅读 · 0 评论 -
Vue.js 手写简单MVVM
前提是对Vue有一定的了解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...原创 2019-05-27 13:34:42 · 215 阅读 · 0 评论 -
Vue 源码分析 (一)
准备知识1、[].slice.call():将伪数组转换成真数组伪数组:length ,可下标获取 eg:$(“li”)验证 instanceof ArrayArray.prototype.slice.call() 效率好点,原型链少查找一层2、node.nodeType:得到节点类型,来做不同的方法处理document / Element / Attr Text3、Obj...原创 2019-06-16 17:30:37 · 267 阅读 · 0 评论 -
Vue3 proxy 实现简易的数据响应操作
// 对代理过的对象做缓存操作 const toProxy = new WeakMap(); // 存放代理后的对象 const toRaw = new WeakMap(); // 存放代理前的对象 function triger(){ console.log('触发视图更新'); } // 判断是否是对象 func...原创 2019-10-08 15:00:18 · 1160 阅读 · 0 评论 -
Vue3新特性 尝鲜 真香
官方还没有正式推出来,利用@vue/composition-api先预热一下初始化项目npm install -g @vue/clivue create vue3npm install @vue/composition-api --save// main.js 导入import VueComposition from '@vue/composition-api'Vue.use...原创 2019-09-29 17:22:36 · 3374 阅读 · 0 评论 -
vue服务端渲染nuxt.js 一文入门到放弃
官网 链接客户端渲染与服务器渲染客户端渲染在服务端Server放了一个HTML页面,客户端发送请求,服务端将页面给客户端,客户端在收到服务端响应的字符串后,然后浏览器从上到下依次解析,在解析过程中,如果发现ajax请求,则再次发起新的请求,拿到ajax响应结果后再模板引擎渲染。所以客户端渲染至少发送了两次请求。其中,第一次请求拿到的是页面,第二次请求拿到的是动态数据。总的来说,客户端渲染...原创 2019-09-28 11:14:01 · 931 阅读 · 0 评论