前端学习之Vue
文章平均质量分 53
crystal_iwwish
多读书 多看日出
展开
-
在虚拟DOM和Diff算法中为什么不建议使用index作为key值?
key是什么key是虚拟DOM的一个重要标识,在DIff算法中,key对我们的性能也有着至关重要到的作用,有key就可以优化Diff算法,提高渲染性能;key在页面更新的时候做了什么1、首先,当我们进行一个页面更新,比如说新添加了一行数据,此时我们会生成一个新的DOM树;2、通过key值,定位到两个DOM树节点所在位置;(1)如果两个DOM树内容比对,没发生变化,我们直接使用原来的真实DOM(2)如果新旧DOM树节点发生了变化就替换掉之前旧的虚拟DOM,生成新的真实DOM(3)如果没找到同样原创 2022-03-04 17:03:44 · 546 阅读 · 4 评论 -
Vue-Less的自动和手动引入
先准备样式变量文件style.less@fontColor: #27ba9b;手动引入在vue页面的style中使用<style scoped lang='less'>// 引入@import '~@/styles/variables.less';// 使用p { color: @sucColor;}</style>自动引入下载一个vue-cil插件vue add style-resources-loader安装完毕后会在vue.co.原创 2022-01-13 20:16:28 · 300 阅读 · 0 评论 -
Vuex-持久化
在开发的过程中,像用户信息(名字,头像,token)需要vuex中存储且需要本地存储,持久化:1. 数据存到vuex(内存)2.数据同时存到本地(硬盘localStorage)这里我们用vuex的一个插件来持久化存储vuex安装vuex-persistedstate 插件vuex中准备user模块(user模块中存的用户信息是所需要持久化存储的,根据自己需求而变化)=》store/modules/user.js将插件配置到vuex的plugins选项中,配置user模块进行状态持久化修改s.原创 2022-01-13 16:12:59 · 291 阅读 · 0 评论 -
Vue的调试工具(Chrome 浏览器)配置
在Chrome浏览器右上角点击这个按钮:点击更多工具下的->扩展程序开启开发者模式,并将下载好的安装包,解压并加载进来Vue.js devtools 详细信息如下原创 2021-12-29 21:01:47 · 964 阅读 · 0 评论 -
Vue-注册全局组件的两种方法
第一种:在main.js中直接注册// 引入import PageTools from '@/components/PageTools'// 注册为全局组件Vue.component('PageTools', PageTools)缺点:如果我们需要注册的全局组件非常多,我们需要一个一个引入,然后分别调用Vue.component方法,main.js文件会变的很大,不好维护。第二种:使用插件的形式注册在统一注册的入口文件 中// 引入import PageTools from './Pa原创 2021-12-22 09:22:24 · 21305 阅读 · 0 评论 -
vuex-token的持久化
vuex中处理tokenstate中定义一个tokenactions请求获得token值,但是actions不能直接修改state中token的值,通过模块化调用,使用mutation中的函数来改变token的值mutation定义改变token和删除token的两个函数持久化存储token的值可以在本地存储一份在对token初始化的时候,可以从本地获取一下,优先使用本地的tokensetToken的时候,在本地也存一下removeToken的时候,本地也删除tokenimport原创 2021-12-16 22:34:35 · 520 阅读 · 0 评论 -
Vue-ref引用
什么是ref引用ref 用来辅助开发者在不依赖于 jQuery 的情况下,获取 DOM 元素或组件的引用,默认情况下,组件的 $refs 指向一个空对象。 使用 ref 引用 DOM 元素的方法:this.$refs就可以的到对应的Dom元素页面显示: 使用 ref 引用组件实例用法和上述引用 DOM 元素一样...原创 2021-12-01 00:25:04 · 377 阅读 · 0 评论 -
Vue-生命周期
一、生命周期 & 生命周期函数生命周期(Life Cycle)是指一个组件从创建 -> 运行 -> 销毁的整个阶段,强调的是一个时间段。生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行,强调的是时间点。注意:重点的生命周期函数created 是第二个生命周期函数,可以访问到data数据和methods数据,常用在调用methods中的函数发起ajax请求mounted 在实际开发中,要想操作当前组件的DOM元素,必须在mounted原创 2021-12-01 00:15:19 · 179 阅读 · 0 评论 -
Vue-vuex
一、什么是vuex?Vuex 是 vue 项目中实现大范围数据共享的技术方案。作用:能够方便、高效地实现组件之间的数据共享二、安装与配置①安装:npm i [email protected]②封装store模块:导入 Vue 和 Vuex 依赖包 import Vue from 'vue' import Vuex from 'vuex'把 Vuex 安装为 Vue 的插件 Vue.use(Vuex)创建 store 的实例对象 const store = new Vuex.Sto原创 2021-12-01 00:03:31 · 772 阅读 · 0 评论 -
Vue登录路由守卫
假设,admin 密码123456 就可以跳转到主页路由的安装与配置:详情跳转源代码:路由器配置页面import Vue from 'vue'import VueRouter from 'vue-router'import Mylogin from '../components/MyLogin.vue'Vue.use(VueRouter)const router = new VueRouter({ // 路由规则的数组 routes routes: [ { pat.原创 2021-11-28 10:32:51 · 1246 阅读 · 0 评论 -
Vue实现按钮和文本框的切换
案例:▲注意点解析:为什么使用 this.$nextTick( )?组件的 $nextTick(cb) 方法,会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是:等组件的DOM 更新完成之后,再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。因为vue是异步的,所以说执行this.flag=false 指令时,页面还没有渲染,我们要等页面渲染后才能进行 获取Dom元素并且聚焦为什么使用箭头函数?箭头函数没有自己的this,它的this就是箭原创 2021-11-27 22:22:14 · 1448 阅读 · 1 评论 -
Vue-路由
什么是路由?路由(英文:router)就是对应关系。在 SPA (SPA 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯一的一个页面内完成。)项目中,不同功能之间的切换,要依赖于前端路由(Hash 地址与组件之间的对应关系)来完成。Hash地址: http://www.xxxx.com/api/getbooks?id=1#home 这是一个网页地址,从#开始往后叫做Hash地址前端路由的工作方式① 用户点击了页面上的路由链接② 导致了 URL 地址栏中的 H原创 2021-11-27 21:11:26 · 1320 阅读 · 0 评论 -
Vue-自定义指令
自定义指令的分类vue 中的自定义指令分为两类,分别是:私有自定义指令全局自定义指令私有自定义指令在每个 vue 组件中,可以在 directives 节点下声明私有自定义指令全局自定义指令全局共享的自定义指令需要通过“Vue.directive()”进行声明语法:Vue.directive('自定义指令的名字', {自定义指令的选项}})使用方法:需求: 把App根组件改成红色全局自定义指令写在main.js中:页面显示效果:这种写法,只能定义一个颜色值,所以我们可原创 2021-11-26 10:04:22 · 282 阅读 · 0 评论 -
Vue-组件之间的数据共享
在项目开发中,组件之间的最常见的关系分为如下两种:① 父子关系② 兄弟关系父子组件之间的数据共享父子组件之间的数据共享又分为:① 父 -> 子共享数据② 子 -> 父共享数据原创 2021-11-26 09:40:00 · 1891 阅读 · 1 评论 -
Vue-动态组件和插槽
一、动态组件动态组件指的是动态切换组件的显示与隐藏。如何实现动态组件渲染vue 提供了一个内置的 组件,专门用来实现动态组件的渲染。使用方法:当我们使用默认这种写法时,我们会发现,如果在right进行了操作,再切换到left,再次切换到right时,right上的操作不会缓存下来我们就通过以下方式,解决这一问题:使用 keep-alive 保持状态keep-alive默认缓存所有组件,我们可以通过include属性,来自己选择缓存哪些部分include:只有名称匹配的组件会被缓存原创 2021-11-25 17:25:34 · 2293 阅读 · 1 评论 -
Vue-组件
组件知识点什么是组件化开发: 据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护。.vue文件就是Vue组件vue 组件的三个组成部分:template -> 组件的模板结构(必写)script -> 组件的 JavaScript 行为(可选)style -> 组件的样式(可选)三个组成部分1.template注意:1.template 是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DOM 元素2.templ原创 2021-11-22 21:40:27 · 1260 阅读 · 2 评论 -
Vue-watch侦听器和计算属性
watch侦听器watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。使用方法: const vm=new Vue({ el:"#app", data:{ username:'zs' }, watch:{ // 定义侦听器第一种:函数格式的监听器,监视谁就用谁定义监听器的名字 username(newName){ console.log(newName) } // 定义侦原创 2021-11-22 17:13:57 · 794 阅读 · 0 评论 -
Vue-过滤器
过滤器(Filters) 是 vue 为开发者提供的功能,常用于文本的格式化。过滤器可以用在两个地方:插值表达式和 v-bind 属性绑定使用方法:Vue.filter(“过滤器名字,过滤器的function函数”)<div id="app"> <!-- | 叫做管道服务 --> <!-- <p>{{message | 过滤器}}</p> --> <p>{{message | capt}}<原创 2021-11-21 20:36:22 · 85 阅读 · 0 评论 -
Vue-的基本使用和指令
基本使用步骤① 导入 vue.js 的 script 脚本文件② 创建 vm 实例对象(vue 实例对象)③ 通过el选项,在页面中声明一个将要被 vue 所控制的 DOM 区域④ 声明对应的el元素原创 2021-11-20 15:42:21 · 2118 阅读 · 1 评论