![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 56
“落幕”
一个坚持学习,坚持成长,坚持分享的人,即使再不聪明,也一定会成为优秀的人!
展开
-
Vue (第三节 响应式原理)
Vue 响应式原理目录Vue 响应式原理前言一、数据驱动1.数据驱动2.响应式核心原理vue2响应式原理vue3响应式原理Vue3 的proxy和Vue2 的Object.defineProperty的对比3.观察者模式:二、模拟Vue响应式原理Observer完善defineReactive方法CompilerDep类前言Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接,不过理解其工原创 2021-06-04 10:21:06 · 240 阅读 · 4 评论 -
Vue 动态组件 & 异步组件(is 、keep-alive、异步组件、处理懒加载)
动态组件 & 异步组件动态组件 is+keep-alivevue可以通过is来动态切换组件。<component v-bind:is="currentTabComponent?currentTabComponent1:currentTabComponent2 "></component><button @click="currentTabComponent"> 切换 </button>import currentTabComponent1原创 2021-05-24 17:28:20 · 521 阅读 · 3 评论 -
后台项目权限设计-RBAC
传统权限从下面的图片可以知道传统的权限是通过对每个用户进行权限分配设置的,但是这种方式已经不适合目前企业的高效管控权限的发展需求,因为每个人都要单独去设置权限RBAC基于此,RBAC的权限模型就应运而生了,RBAC(Role-Based Access control) ,也就是基于角色的权限分配解决方案,相对于传统案,RBAC提供了中间层Role(角色),其权限模式如下RBAC实现了用户和权限点的分离,想对某个用户设置权限,只需要对该用户设置相应的角色即可,而该角色就拥有了对应的权限,这样一来,原创 2021-05-20 10:55:20 · 350 阅读 · 0 评论 -
后台项目实现多语言切换
初始化多语言包本功能使用国际化 i18n 方案。通过 vue-i18n而实现。首先安装国际化的包 npm i vue-i18n第二步 ,需要单独一个多语言的实例化文件import Vue from 'vue' // 引入Vueimport VueI18n from 'vue-i18n' // 引入国际化的包import Cookie from 'js-cookie' // 引入cookie包import elementEN from 'element-ui/lib/locale/lan原创 2021-05-20 10:26:43 · 1569 阅读 · 1 评论 -
element动态主题的设置
element动态主题的设置我们想要实现在页面中实时的切换颜色,此时页面的主题可以跟着设置的颜色进行变化简单说明一下它的原理: element-ui 2.0 版本之后所有的样式都是基于 SCSS 编写的,所有的颜色都是基于几个基础颜色变量来设置的,所以就不难实现动态换肤了,只要找到那几个颜色变量修改它就可以了。 首先我们需要拿到通过 package.json 拿到 element-ui 的版本号,根据该版本号去请求相应的样式。拿到样式之后将样色,通过正则匹配和替换,将颜色变量替换成你需要的,之后动态原创 2021-05-20 10:20:27 · 979 阅读 · 2 评论 -
后台项目实现页面全屏功能
全屏插件的引用全屏功能可以借助一个插件来实现首先我们来安装全屏插件npm i screenfull然后封装一个全屏显示的插件<template> <!-- 放置一个图标 --> <div> <!-- 放置一个svg的图标 --> <svg-icon icon-class="fullscreen" style="color:#fff; width: 20px; height: 20px" @click="...原创 2021-05-20 10:16:36 · 455 阅读 · 0 评论 -
vue-element-admin后台项目的导入和导出的实现
vue-element-admin导入组件封装模板和样式首先封装一个类似的组件,首先需要注意的是,类似功能,vue-element-admin已经提供了,我们只需要改造即可excel导入功能需要使用npm包xlsx,所以需要安装xlsx插件 npm i xlsx将vue-element-admin提供的导入功能新建一个组件,位置: src/components/UploadExcelimport CommonTools from './CommonTools'import UploadEx原创 2021-05-19 19:55:15 · 2199 阅读 · 8 评论 -
Vue 过滤器 filters
Vue 过滤器 filtersVue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示://使用 前面的是变量后面的是过滤器,最终的结果是将前面的变量加工后展示出来{{ message | capitalize }}//在 `v-bind` 中使用<div v-bind:id="rawId | formatId"原创 2021-05-11 14:21:40 · 172 阅读 · 0 评论 -
自定义指令
Vue自定义指令简介Vue的自定义指令在注册的时候是不需要加"v-“的,但是在使用时需要加上"v-”可以使用Vue.directive(‘dir_name’,{})来注册全局指令,实例:// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})el:指令所绑定的元素,可以用来直原创 2021-05-08 18:38:54 · 111 阅读 · 0 评论 -
this.$router和this.$route的区别
this.$router :全局路由对象,任何页面都可以通过此方法 调用 push(), go()等方法。一般用于路由跳转。例如:this.$router.push(路由)//跳转this.$route :表示当前正在用于跳转的路由器对象。可用来接收当前路由,显示其name、path、query、params等属性。例如:this.$route.name//当前路由的名字区别:1.this.router是全局∗∗路由对象∗∗任何页面都可以调用2.this.router 是全局 **原创 2021-05-06 10:41:15 · 2801 阅读 · 0 评论 -
Vuex学习(1)
VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化当有一些公共的数据需要影响到多个组件的时候就需要用到vuex了。使用Vuex管理数据的好处:能够在 vuex 中集中管理共享的数据,便于开发和后期进行维护能够高效的实现组件之间的数据共享,提高开发效率存储在 vuex 中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新传统的组件传值都是通过porps和$e原创 2021-03-29 17:41:51 · 66 阅读 · 0 评论 -
Vue单文件组件传值router-link
组件的传值不同于我们之前的?传值,他需要用到vue规定的传值方法我们在index.js文件中定义的路由规则中,多了一项name值这起到了我们的连接作用index.jsconst routes = [ { path: "/list/:id", name: "List", component: List, }, ]List.vue<router :to="{name:'List',params:{id:1}"> 这样实现传值1.6.7.原创 2021-03-18 19:58:51 · 145 阅读 · 0 评论 -
Vue打包最简单的方法(vue脚手架)
使用步骤:第一步安装vue-clinpm i -g @vue/cli可以在PowerShell中安装也可以在vscode中安装。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xQKv85VZ-1616068342537)(file:///C:\Users\Administrator\Documents\Tencent Files\2048474970\Image\C2C\Y@0C_UDS7I8S7FE2R6`XKGO.png)]安装完成后第二步:创建vue项目原创 2021-03-18 19:52:52 · 736 阅读 · 0 评论 -
webpack打包工具简单使用
webpack–打包工具1.6.1 打包工具最本质的打包第一步:安装特定版本旧版本:npm install -save-dev webpack -D 后面加上-D是表示开发时使用,上线后就不再使用。如果使用webpack4+版本还需要安装一个webpack-cli的插件npm install --save-dev webpack-cli -D整体安装:npm i webpack webpack-cli -D第二部:配置模式为开发模式module.exports = { m原创 2021-03-18 19:50:17 · 293 阅读 · 0 评论 -
Vue路由
1.5 Vue路由1.5.1 router-link标签的使用。<router-link to="写routers中定义的组件名称"></router-link> 是Vue-router.js中的组件类似于a标签 to就相当于href1.5.2 $mount代替el:"" // 将当前 vue 实例挂载到 app dom 上,代替了el:"#app"let app = new Vue({ router, }).$mount("#app");原创 2021-03-18 19:48:48 · 44 阅读 · 0 评论 -
Vue的基础组件
1.4 Vue基础组件1.4.1组件注册语法: Vue.component("自定义组件的名称", {这个括号内可以写实例里面的内容,例如data(值必须是一个函数)、methods、computed、watch等但是不可以写el。1、props可以定义一些数据、接收一些数据他的值可以是字符串、数字、对象、数组等,也可以是数据类型。2、template:的值是我们自定义组件所需要的代替的html代码。})1.4.2对于props的命名问题:在props命名的时候可以使用驼峰的方式进行原创 2021-03-18 19:46:49 · 560 阅读 · 0 评论 -
Vue面试题持续更新......
1.Vue的特点是什么?1、国人开发的一个轻量级框架。2、双向数据绑定,在数据方面更为简单3、试图、数据、结构分离,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作4、组件化、方便封装和服用5、虚拟dom:dom操作时非常消耗性能的,不再使用原生的dom操作节点,极大的解放了dom操作2.Vue中父子组件时如何传值的?1、子组件通过事件调用向父组件传值在子组件中,利用 $emit 触发 父组件传递过来的方法的时候,可以将子组件的数据当做参数传递给父组件2、父组件向子组件传值第原创 2021-03-18 19:44:30 · 368 阅读 · 0 评论