vue
文章平均质量分 75
All rivers run in to the sea
学无止境 ,无论什么时候都不要把自己当一回事,要把自己做的事情当一回事。要经得住诱惑,耐得住寂寞。
气定则心定 心定则事圆 遇到事情不要惊慌 一定要沉得住气 得意时能坦然坦荡 失意时也能泰然处之.
不疯魔 不成活 威不足则多怒,信不足则多言,智不足则多虑
展开
-
vue面试问到的题及解决办法
准备网站所需的重置样式代码,以及一些公用样式代码。 导入方式 html导入 vue main.js全局导入数据懒加载 体验基于组合API的@vueuse/core工具库1.使用Vue封装过组件吗?有哪些?讲一下他们是怎么实现的**比如侧边导航组件、项目中常用的 echarts图表的封装(比如 折线图、柱状图等) 封装组件需要考虑复用性:预留插槽slot, 多次调用如果 子组件视图结构不一样那么就要 在 子组件template预留好 插槽(单个 插槽、具名插槽,作用域插槽)考虑到数据原创 2022-07-04 22:36:55 · 448 阅读 · 0 评论 -
说一下v-model的理解双向绑定 vue响应式原理
参考: 1. vue2 里的响应式其实有点像是一个半完全体,对于对象上新增的属性无能为力,对于数组则需要拦截他的原型方法来实现响应式. 2. 这个时候Vue提供了一个来实现新增的属性也拥有响应式的效果.问题:但是很多时候需要小心翼翼的去判断到底什么情况下需要用 $set,什么时候可以直接触发响应式。在 Vue3 中,这些都将成为过去。proxy 到底会给 Vue3 带来怎么样的便利。例子1.1.3 vue2 响应式原理例1.利用input实现数据双向绑定实现原理:对象类型:通过Objeac原创 2022-06-28 14:39:14 · 454 阅读 · 1 评论 -
svg学习 路由跳转方式以及传(获取)参 路由获取参数 懒加载
懒加载如何处理 打包出来的项目(首屏)加载过慢的问题SPA应用: 单页应用程序, 所有的功能, 都在一个页面中, 如果第一次将所有的路由资源, 组件都加载了, 就会很慢!加载过慢 => 一次性加载了过多的资源, 一次性加载了过大的资源比如:图片压缩: 使用 webp 格式的图片, 提升首页加载的速度CDN加速: 配置CDN加速, 加快资源的加载效率 (花钱)开启 gzip 压缩 (一般默认服务器开启的, 如果没开, 确实可能会很慢, 可以让后台开一下)…就是我们先设置图片的data-set属性(原创 2022-06-27 20:18:47 · 783 阅读 · 0 评论 -
全局混入mixins 阅读代码时未看到数据从哪里来?全局混入(新建组件文件(复用)导入全局注册))
注意:优先级、函数 、数据变量、1.混入也可以进行全局注册。使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。使用恰当时,这可以用来为自定义选项注入处理逻辑。2.请谨慎使用全局混入,因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下,只应当应用于自定义选项,推荐将其作为插件发布,以避免重复应用混入。**理解:Mixins:则是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。混入 (mixins)原创 2022-06-26 10:38:19 · 381 阅读 · 0 评论 -
vue如何实现整体注册组件局部/局部注册组件
**搭配webpack来批量注册组件 **新建src/components/index.js引入main.js2.vue如何实现整体注册组件(快速导入加手动)1. 其中components也封装了公共其他组件引入 src/components/index.js 中使用Vue.use()来注册组件 实现的原理: 1-需要传入一个参数:对象||函数 2-对象中提供了一个install函数 3-install函数有一个参数接受的是Vue2.全局入口在main.js, 在new Vue之上注原创 2022-06-25 20:14:21 · 898 阅读 · 0 评论 -
路由钩子函数 组件方法 (utils)
路由钩子函数分为三种:1:全局钩子: 2:单个路由里面的钩子: 3:组件路由:原创 2022-06-20 00:19:31 · 398 阅读 · 0 评论 -
常用的包:
基于 (图片地址 / 网页地址) 生成二维码首先,需要安装生成二维码的插件qrcode的用法是dom为一个canvas的dom对象, info为转化二维码的信息a. 准备弹层b. 注册点击事件c. 将canvas标签放到dialog的弹层中d. 在点击图片时,显示弹层,并将图片地址转化成二维码二 生成打印Excelgit版本控制git --version #查看git安装版本$ npm config set registry https://registry.npm.taobao.原创 2022-06-07 17:36:26 · 276 阅读 · 0 评论 -
(自定义指令) 按需导出 默认导出 公共模板组件 --->导入使用 Vue 路由模块中$route 和$router 的区别? --->路由扩展
import '@/drectives'// 导入自定义指令// import { color, Imgerror } from '@/drectives'import * as directives from '@/drectives'// console.log(directives) // 默认 按需 都可以拿到//for (const k in directives) {// Vue.directive(k, directives[k])//}Object.keys(.原创 2022-05-29 21:33:08 · 355 阅读 · 0 评论 -
vue3 ---> setup() 用法 响应式API - reactive 响应式API - ref
setup() 介绍参考官方文档使用 setup 函数时,它将接收两个参数:propscontext//让我们更深入地研究如何使用每个参数Propssetup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样,setup 函数中的 props 是响应式的,当传入新的 prop 时,它将被更新。Context传递给 setup 函数的第二个参数是 context。context 是一个普通 JavaScript 对象,暴露了其它可能在 setup 中有用的值:访问组件的原创 2022-05-27 21:33:03 · 968 阅读 · 0 评论 -
Vue 过滤器 侦听器 计算属性
过滤器过滤器计算属性createdwatch侦听器components原创 2022-05-05 20:49:49 · 353 阅读 · 0 评论 -
elementUI 组件库及使用流程
原创 2022-05-16 20:49:33 · 875 阅读 · 0 评论 -
vue图片微观宏观 基础复习 响应式缺点 v-model 全局组件全局指令
全局组件局部组件:导入的这个MyCom组件,只能在当前组件中使用import MyCom from './MyCom'export default { components: { MyCom } }全局组件:import MyCom from './Mycom'// Vue.component(组件名,组件)Vue.component('MyCom', MyCom)全局指令局部指令export default { directives: { focus: {原创 2022-05-15 20:28:11 · 99 阅读 · 0 评论 -
elementUI参考学习 vue运行问题 以及组件style样式设置的区别
组件样式 scoped 和 /deep/ 加scoped 后不会修改其他组件的 加/deep/ 后就可以修改组件内部的 加!important 强制优先级最高覆盖样式 */<style scoped>/* 加scoped 后不会修改其他组件的 加/deep/ 后就可以修改组件内部的 加!important 强制优先级最高覆盖样式 *//deep/.el-pager li.active { background-color原创 2022-05-14 19:20:20 · 583 阅读 · 0 评论 -
uvex快速入门 Vue.js 应用程序开发的状态管理模式 + 库
参考视频vue参考文档VueX 大型项目 管理公共数据的工具作用: 独立与组件系统之外的,状态管理工具,采用集中式存储管理所有的组件状态,解决多组件数据通信(跨组件通信 A组件修改数据其他组件都能收到), 数据变化是可预测的 响应式主要内容三个: state 保存公共数据 (类似于data) mutations 修改数据 actions 异步请求次要的 : getters 计算属性 (类似于com原创 2022-05-12 21:14:33 · 1324 阅读 · 0 评论 -
vue路由模板 history和hash模式对比:
参考一// 导入路由插件import VueRouter from 'vue-router'import Vue from 'vue'// 使用插件 - 重要Vue.use(VueRouter)// 导入组件import Page1 from './Page1.vue'import Page2 from './Page2.vue'import Page3 from './Page3.vue'// 创建路由规则const router = new VueRouter({ r原创 2022-05-11 20:50:26 · 292 阅读 · 0 评论 -
vue路由
路由目标页面不刷新,地址栏变化,页面内容变化。原理hashchange事件当地址栏中的hash值变化时,这个事件就会触发SPA:单页面应用程序优点:页面没有刷新,用户体验不会跳转页面,也不能加载重复的内容缺点:第一次打开页面会慢:因为加载了所有的资源对seo不友好。在移动端用的比较多。vue+vueRouter实现单页应用。vueRouter基本使用步骤1.实例化VueRouter对象主要是配置路由规则2.在vue实例中引用VueRouter3.配置路由出口ro原创 2022-05-11 20:43:51 · 371 阅读 · 0 评论 -
四个阶段 八个钩子函数 父子组件中的先后顺序 激活失活 10个钩子函数
什么是组件生命周期一个组件从 创建 到 销毁 的整个过程就是生命周期生命周期函数(钩子函数) 四个阶段 (一个阶段两个钩子函数) 八个钩子vue 框架内置函数,随着组件的生命周期,自动 按次序 执行**作用:**特定的时间点,执行某些特定的操作场景: 组件创建完毕后,可以在created 生命周期函数中发起Ajax 请求,从而初始化 data 数据生命周期函数(钩子函数) 四个阶段:● 初始化 => 创建组件 => beforeCreate cr原创 2022-05-09 21:45:28 · 476 阅读 · 0 评论 -
props校验 动态组件 keep-alive组件-- 指定缓存 激活失活 插槽
动态组件<template>//动态显示组件使用 vue内置//动态绑定is ,他的值就是组件名字 <components :is="xxx" > </components></template>components:{}原创 2022-05-09 21:41:23 · 519 阅读 · 0 评论 -
v-show和v-if的区别 display:none和visible: hidden的区别
星空旅行者曦橙紫皮 2:53:23v-show 本质就是通过设置 css 中的 display 设置为 none,控制隐藏v-if 是动态的向 DOM 树内添加或者删除 DOM 元素星空旅行者曦橙紫皮 2:53:42display:none是不为隐藏的对象保留其物理空间,俗称看不见也摸不着;visible: hidden是为隐藏的对象保留其物理空间的,俗称看不见但摸得着。...原创 2022-05-09 00:40:16 · 1230 阅读 · 0 评论 -
二.vue组件进阶(重点) 钩子函数 路由以及ajax应用
组件 vue生命周期 钩子函数原创 2022-05-08 21:11:52 · 596 阅读 · 0 评论 -
一.vue组件
三大件eldatamethods基本使用步骤引入vue.js实例化一个Vue对象 三大件写视图 模板 div id =“app”组件组件是可复用的 Vue 实例, 封装标签, 样式和JS代码组件化开发 :一个页面(.vue)可能有一个或多个组件(.vue)组成完整的页面功能● 封装的思想,把页面上 可重用的部分 封装为 组件,从而方便项目的 开发 和 维护● 每一个组件都是封闭的。它有自己的template, script,style● 组件之间可以相互原创 2022-05-04 23:41:11 · 270 阅读 · 0 评论 -
vue从初始安装到基础语法
vue调试工具 -devtoolsChrome阅览器设置打开扩展点左上角,到插件商城搜索vue直接安装到谷歌就可以了vue是一个渐进式的JavaScript框架库: 封装的属性或方法 (例axios.js, jquery.js), 框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)渐进式: 逐渐按需添加, 想用什么就用什么, 不必全都使用**vue特点:渐进式数据驱动视图组件系统 **** 工程化开发方式 在webpack环境开发vue ,这是最推荐,企业常用方式**原创 2022-05-03 20:37:04 · 218 阅读 · 0 评论