![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 88
秃如其来的秃头
种一棵树最佳时间是十年前,其次是现在!
如果一直躲在舒适区,最终一定会进入恐慌区。
展开
-
前端项目搭建规范
前端项目搭建规范一. 代码规范1.1. 集成editorconfig配置EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。# http://editorconfig.orgroot = true[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8indent_style = space # 缩进风格(tab | space)indent_size = 2 # 缩进大小end_of_line =原创 2022-01-17 10:41:57 · 425 阅读 · 1 评论 -
Element-UI radio、radio-group、radio-button 单选框源码
Element-UI radio 单选框源码radio模板部分:<template> <label //label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。 class="el-radio" :class="[ border && radioSize ? 'el-radio--' +原创 2020-11-06 23:54:58 · 1339 阅读 · 0 评论 -
Element-UI Container 布局容器源码
Element-UI Container 布局容器源码用于布局的容器组件,方便快速搭建页面的基本结构:<el-container>:外层容器。当子元素中包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。<el-header>:顶栏容器。<el-aside>:侧边栏容器。<el-main>:主要区域容器。<el-footer>:底栏容器。以上组件采用了原创 2020-11-04 00:27:58 · 1075 阅读 · 1 评论 -
ElementUI源码学习 - Layout布局(row 、col)
ElementUI源码学习 - Layout布局(row 、col)row.js该组件不同于 button组件,是一个js文件,使用的是render方法export default { name: 'ElRow', //组件名字,作用在 button 组件中,已经说明了 componentName: 'ElRow', //这个在 col 组件中判断 是否为 col 的父组件,从而给 gutter 间隔 props: { tag: { //自定义元素标签, tag 在 render原创 2020-10-30 23:42:46 · 1838 阅读 · 0 评论 -
ElementUI源码学习 - Button
ElementUI源码学习 - Button.vue文件学习button.vue<template> <button class="el-button" @click="handleClick" //向父级传递事件 :disabled="buttonDisabled || loading" //当disabled 和 loading 状态下,都无法点击 :autofocus="autofocus" // 自动focus :type="n原创 2020-10-29 22:22:23 · 642 阅读 · 0 评论 -
Vue面试题总结
Vue面试题v-show 和v-if之间的区别v-show通过css display控制显示与隐藏v-if组件真正的渲染和销毁,而不是显示和隐藏频繁切换显示状态用v-show,否则用v-if为何 v-for中要用 key必须用key,而且不能是index和randomdiff算法中通过tag和key来判断,是否为sameNode减少渲染次数,提升渲染性能描述 V...原创 2020-05-04 18:01:43 · 145 阅读 · 0 评论 -
Vue 组件化 响应式 vdom 和 diff 模板编译 渲染过程 原理
Vue原理Vue响应式组件data的数据一旦变化,立刻触发视图的更新实现数据驱动视图的第一步核心 API-Object.defineProperty(Vue3.0启用Proxy,但是Proxy兼容性不好,且无法polyfill)Object.defineProperty(obj, prop, descriptor)obj:要定义属性的对象。prop:要定义...原创 2020-05-04 15:23:03 · 307 阅读 · 0 评论 -
`Vue `详细面试题
Vue详细面试题computed 和 watchcomputed 有缓存,data不变则不回重新计算set 不用加 returnwatch如何深度监听deep:truewatch监听引用类型,拿不到oldValv-for循环key视情况是否采用index,尽量避免对象Obj:(val,key,index)v-for与v-if尽量避免一起用(现在会报错)...原创 2020-05-03 13:33:55 · 129 阅读 · 0 评论 -
Vue风格指南(来自官方风格指南与vue-admin-element风格指南)
Vue风格指南组件名为多个单词组件名应该始终是多个单词的,根组件 App 以及 ``transition、component` 之类的 Vue 内置组件除外。这样做可以避免跟现有的以及未来的 HTML 元素相冲突,因为所有的 HTML 元素名称都是单个单词的。所有得Component文件都是以大写开头(PascalCase)但除了 index.vue例子:@/src/compon...原创 2020-04-21 12:50:42 · 352 阅读 · 0 评论 -
vue-element-admin 登录 / 注销 / 权限验证 篇
vue-element-admin登录 / 注销 / 权限验证 篇裤衩大佬:不同的权限对应着不同的路由,同时侧边栏也需根据不同的权限,异步生成。链接:https://juejin.im/post/591aa14f570c35006961acac下述所有的数据和操作都是通过vuex全局管理控制的。补充说明:刷新页面后 vuex的内容也会丢失,所以需要重复上述的那些操作登录:当用户填写完账...原创 2020-04-21 09:24:08 · 6084 阅读 · 10 评论 -
JS中金额转换以及格式化Vue过滤器
JS中金额转换以及格式化- 为数字加上单位:万或亿import Vue from 'vue'/** * 为数字加上单位:万或亿 * * 例如: * 1000.01 => 1000.01 * 10000 => 1万 * 99000 => 9.9万 * 566000 => 56.6万 ...原创 2020-01-13 09:18:17 · 1300 阅读 · 0 评论 -
vue 过滤器 首字母大写
{{text.replace(/\b[a-zA-Z]\b/g),item=>{ return item.charAt(0).toUpperCase() + item.substring(1)}}str.replace(regexp|substr, newSubStr|function)regexp (pattern)一个RegExp 对象或者其字面量。该正则所匹配的内容会被第二...原创 2020-01-07 21:39:31 · 1848 阅读 · 0 评论 -
nuxt vue element 前端 使用国际化 i18n
nuxt element使用国际化在nuxt官网中就有如何使用国际化得nuxt 国际化1、插值表达式{{ $t('footer.about') }}2、label:label=" $t('Home.Machineselection') "3、message表单校验 message: this.$t("modify-pwd.enternewPwd"),4、placehold...原创 2019-12-29 16:53:46 · 1435 阅读 · 0 评论 -
vue element常见坑
1、vue 如何获取拉回数据后图片的高度?<img :src="userInfo.profilePicture" alt class="img-picture" v-if="userInfo.profilePicture" ref="myImg" @load="imageFn"> imageFn() { console.l...原创 2019-12-20 17:01:07 · 489 阅读 · 0 评论 -
vue滚动屏幕使其菜单栏隐藏和显示
vue滚动屏幕使其菜单栏隐藏和显示<template> <div> <router-link tag="div" to="/" class="header-abs" v-show="showAbs"> <div class="iconfont header-abs-back">...原创 2019-12-19 17:53:08 · 1261 阅读 · 0 评论 -
Vue2.0+ElementUI表格+Pagination实现的表格分页
Vue2.0+ElementUI+Pagination实现的表格分页首先 el-table 和 el-pagination 是不同的组件的,所以不存在什么联系表格<div class="myclass"> <el-table v-if="isActive" /************************重点就在于这里****...原创 2019-12-06 17:18:50 · 536 阅读 · 0 评论 -
vue 组件设计:实现Form, Formltem, Input及其原理实现
vue 组件设计:实现Form, Formltem, Input需要思考的几个问题?Input是自定义组件,它是怎么实现双向绑定的?Formltem是怎么知道执行校验的,它是怎么知道Input状态的?它是怎么获得对应数据模型的?Form是怎么进行全局校验的?它用什么办法把数据模型和校验规则传递给内部组件?实现 input实现自定义组件双向绑定功能v-model 是语法糖,实现自...原创 2019-11-26 23:44:10 · 839 阅读 · 0 评论 -
vue项目如何打包问题遇到得坑及其总结
vue项目如何打包问题遇到得坑及其总结如何打包基于Vue-Cli,通过npm run build来进行打包的操作如何部署将打包出来的资源,基于Vue-Cli的一般是dist目录下有static目录和index.html文件,可以直接将这两个文件扔到服务端但有时候,我们会直接将dist文件扔到服务端出现的问题打包到服务器后,出现资源引用路径的问题打包到服务器后,出现空白页...原创 2019-11-25 11:47:11 · 1503 阅读 · 0 评论 -
input格式化输入框内容后光标位置错位问题及其解决办法
input格式化输入框内容后定位错位问题最近公司有一个 汇率换算的小项目 用的 nuxt 服务端渲染,UI用的是饿了么的UI框架,总共 7 个输入框,数据是根据一个输入框中的值进行双向绑定换算的,这些都不是重点。需求是用户实时输入的时候 input输入框中的值是实时改变的,但是在实时改变的时候,由于数据是千分位格式化了的,当输入的时候,数据就会格式,导致光标会错位,从而导致输入错误出现这个...原创 2019-11-24 00:48:19 · 6931 阅读 · 0 评论 -
nuxt 利用Vuex控制状态 切换城市以及切换城市之后跳转首页遇到的坑
nuxt 利用Vuex控制状态 切换城市以及切换城市之后跳转首页遇到的坑在 切换城市的VUE 组件中 handleSelect: function(item) { const xzdCity = item.value this.$store.commit('xzCity/changeCity',xzdCity) this.$router.pu...原创 2019-11-23 20:41:13 · 532 阅读 · 8 评论 -
使用Nuxt.js和Vue-i18n重定向到同一页面但切换语言URL
使用Nuxt.js和Vue-i18n重定向到同一页面但切换语言URL公司最近提出一个需求,就是当用户切换语言的时候,在路由中需要将其选中的语言加入到路由中例如网址:localhost/about应该通过该方法(通过按特定按钮)重定向到:localhost/bg/aboutNuxt文档中所建议的,用于使用Vue-i18n进行本地化https://nuxtjs.org/examples/i...原创 2019-11-18 15:02:20 · 1707 阅读 · 0 评论 -
MongoDB:shutting down with code:100
MongoDB:shutting down with code:1002019-11-13T14:25:25.616+0800 I CONTROL [main] Automatically disabling TLS 1.0, to force-enable TLS 1.0 specify --sslDisabledProtocols 'none'2019-11-13T14:25:25.9...原创 2019-11-13 14:41:38 · 636 阅读 · 0 评论 -
Vue2.x ElementUI登录表单中加入验证码倒计时功能
Vue2.x ElementUI登录表单中加入验证码倒计时功能部分Vue代码如下:<el-form ref="loginForm" :model="loginForm" status-icon :rules="rules" class="login-form"> <el-form-item label="" prop="code" class="pr"> ...原创 2019-11-13 14:20:27 · 2079 阅读 · 6 评论 -
Vue computed method watch 之间的区别
Vue computed method watch 之间的区别computed区别于method的两个核心computed是属性调用,而methods是函数调用computed带有缓存功能,而methods不是<!--HTML部分--><div id="app"> <h1>{{message}}</h1> &l...原创 2019-11-09 21:30:49 · 163 阅读 · 0 评论 -
Vue-router params 与 query 的区别及其参数的注意点
Vue-router params 与 query 的区别及其参数的注意点router-link传参<router-link :to="{name:'user',params:{userid:123}}">User</router-link>params 与 query 的区别query (查询) 相当于 ajax 中的 get 请求/router1?...原创 2019-11-08 11:11:26 · 337 阅读 · 0 评论 -
Vue生命周期
Vue生命周期生命周期的应用场景和函数式组件创建阶段beforeCreate : 初始化事件和生命周期 数据观测、属性、侦听器配置等create : 模板编译到renderbeforeMount ====== > rendermounted : 异步请求、操作DOM、定时器等更新阶段beforeUpdate : 依赖数据改变或 $forceUpdate ...原创 2019-10-28 21:01:54 · 366 阅读 · 0 评论 -
Vue
使用JQ 和 使用框架的区别数据和视图得分离,解耦(开放封闭原则 )以数据驱动视图,只关心数据变化,DOM 操作被封装对MVVM的理解及三大要素MVCVue 的三要素响应式:vue 如何监听到data 得每个属性变化?模板引擎:vue 的模板如何被解析,指令如何处理渲染:vue的模板如何被渲染成html?以及渲染过程Vue中怎么实现响应式什么是响应式修改da...原创 2019-10-28 20:49:35 · 102 阅读 · 0 评论