![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue2
文章平均质量分 73
vue2
乖女子@@@
这个作者很懒,什么都没留下…
展开
-
Vue_引入图片
在本地图片可以正常显示;打包之后图片也可以正常显示。在本地图片可以正常显示,但是打包后图片显示不出来![2]上传到cos,使用链接。打包后图片不能正常显示!原创 2022-08-04 18:44:12 · 305 阅读 · 0 评论 -
Vue_事件修饰符
语法:v-model.原创 2022-09-17 14:27:40 · 173 阅读 · 0 评论 -
key的作用是什么
通过源码可以看出若是元素不设置key值a.key===undefinedb.key===undefined造成a.key===b.key会很容易被认定为同一个节点;在使用虚拟dom更新真实dom的过程之中,会通过sameVnode方法判断新旧vnode节点是否相同,若是相同会对比其子节点与文本内容,找出最小差异进行更新;因为Vue会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。以上是目前的真实DOM,现在要在B元素后面插入一个F元素。...原创 2022-07-22 14:07:11 · 1141 阅读 · 0 评论 -
Vue_指令
也就是说若boolean值为false,v-if是直接将元素不加载在dom树上, v-show是将元素加载到dom树上,但是将其隐藏;v-if是创建或者销毁dom元素,v-show则是css的display样式显示隐藏切换;指令就是标签的自定义属性(一个指令就是标签的一个自定义属性);v-if有更高的切换消耗,v-show有更高的初始渲染消耗。4.注:事件方法定义在vue实例的mehods对象中;1.作用:渲染列表(渲染数组)v-else-if=‘布尔值’[3]根据一个字符串进行遍历。v-if=‘布尔值’原创 2022-09-17 14:46:52 · 236 阅读 · 0 评论 -
Vue_事件修饰符_native
【代码】Vue_事件修饰符_native。原创 2022-09-15 15:49:41 · 254 阅读 · 0 评论 -
原生input使用+v-model在input中使用
当选择微信支付,点击提交按钮时默认会向xxx地址发送一个请求,请求url为 xxx?pay=‘wxpay’在type为radio时。原创 2022-11-20 16:37:43 · 1229 阅读 · 0 评论 -
vue全家桶_vuex共享状态(数据)管理
注:虽然我们可以通过this.$store.state获取到vuex中的数据,但是一般建议使用getters获取(原因是因为getters。[2]使用mutations里面的方法同步修改数据。[3]使用actions异步修改state中的数据。vuex中getters本质就是vuex的计算属性。[2]使用getters获取仓库中的数据。[1]直接通过点语法修改仓库里面的数据。[1]直接通过点语法获取仓库中的数据。注:vuex中的数据是存储在。作用:获取state中的数据。获取state中的数据。原创 2022-09-15 15:30:29 · 510 阅读 · 1 评论 -
Vue_项目优化
1.路由懒加载技术若是我们使用普通的路由加载技术import 组件名 from '路经'在打包构建的过程中,会将 所有 组件的代码打包到一个js文件中,会使得js包变得非常大,影响页面的 首屏加载速度。而路由懒加载技术是将 不同路由对应的组件分割成不同的代码块, 当该路由被访问到时才加载相应的组件,这样就比较高效了!const 组件名= ()=>import('路经')-------陆续写入;...原创 2021-03-22 20:05:06 · 241 阅读 · 0 评论 -
vue全家桶_vue脚手架
如果没有导入到入口文件中,脚手架并不知道该文件地存在会导致文件被忽略(导入到其他已经导入到main.js的文件也可以–局部导入);原因:package-lock.json存放了以前下载过的包的地址;存放在node_modules中的包,导入时不需要写路径,直接写包名即可(原因:只要是存在在这个包中,vue能够自动识别);------(目前)使用hash路由----history路由需要后台进行一定的配置;------区别:history路由没有#;[1]assets:存放静态资源(图片,css等);原创 2022-10-15 08:53:35 · 429 阅读 · 0 评论 -
Vue笔记_02配置项
若是我们没有将数据定义在data函数里面,使用方法相同(仍然可以通过this访问到),但是当数据发生变化时,即使页面使用了也不会发生任何变化-原因是没有将数据进行双向绑定;data为一个函数,每一次调用函数,就会重新生成一个新的data对象,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。 当我们将数据定义在data函数中,当数据发生改变的时候,vue会通过get、set方法监听到,若是页面中使用了-会重新渲染页面;原创 2022-11-26 13:24:19 · 229 阅读 · 0 评论 -
Vue笔记_05Vue全家桶_请求(axios)
前提: 在src文件夹下创建一个utils文件夹,在utils文件夹下创建一个request.js 文件用于存储axios的配置信息。原创 2023-03-06 13:52:30 · 161 阅读 · 0 评论 -
css-link与@important的区别
https://blog.csdn.net/weixin_42441117/article/details/80705153属性 link属于html基本标签; @important属于css语规则; 加载内容 link除了可以加载样式外,还可以定义href,rel等链接属性; @important只能加载css样式表; 加载时机 link是加载页面的同时加载link @important是等待页面加载完毕再加载 权重link的权重更大; 兼容性原创 2021-04-02 16:39:57 · 227 阅读 · 0 评论 -
style标签上的scoped属性
在我们使用第三方插件(eg:vant)的时候,想要修改其中的样式时—>若是我们写在带有scoped的style中时,默认会在选择器上加一个属性,这样就修改不到子元素的身上(无法修改子组件的样式);答案是不需要的,因为在vue中在打包时会将所有的样式打包到一个css文件中;而在uni-app中会将每个页面打包到一个单独的wxss文件中,因此这样已经保证了该文件的样式不被其他文件干扰了;在使用uni-app时我们使用的是.vue文件进行代码编写的,style标签也存在coped属性。[1]解决1—使用穿透。原创 2022-10-22 20:31:26 · 5440 阅读 · 0 评论 -
Vue笔记_03组件_transition组件(Vue内置组件)
6个类[1]表示元素进入过程中所执行的样式(动画);[2]表示元素离开过程中所执行的样式(动画);[3]xxx-enter表示元素进入之前的样式[4]表示元素进入之后的样式[5]xxx-leave表示元素离开之前的样式[6]表示元素离开之后的样式若是配合帧动画使用-> 仅需[1]、[2]即可;若是配置过渡动画使用 -> 需要6个类搭配使用;本质:vue就是在监听组件的插入、更新、销毁,然后给其加上对应的类名。原创 2022-11-30 14:18:50 · 1511 阅读 · 1 评论 -
echarts_在项目中引入echarts
虽然此时显示的是横向柱状图,但是数据的排列顺序是从下往上排列,看起来与我们设置的数据顺序是相反的(因为设置爹第一个数据是衬衫,总觉得此时第一个应该是衬衫,但是实际衬衫在最下面)在柱状图中是分为x轴与y轴的,默认情况下x轴表示类目的y轴表示数量,但是若是我们需要 横向柱状图如下,那应该如何配置呢?全量引入指的是引入了echarts的核心模块、全部图表以及图表所能用到的组件。若想x轴与y轴对调,仅需将xAxis与yAxis的type属性值对调即可,如下。若是你的项目仅仅是使用1个或少数图表,建议使用按需引入。原创 2023-05-19 10:51:33 · 698 阅读 · 0 评论 -
Vue概论
M:model模型作用:负责数据存储。泛指后端进行的各种业务逻辑处理和数据操控,主要围绕数据库系统展开;V:view视图作用:用来展示数据的用户界面,主要由 HTML 和 CSS 来构建;视图模型作用:业务逻辑处理,将数据进行加工后交给试图进行展示。Vue的实例化对象就是MVVM模式中的VM层,模型通过它可以将数据绑定到页面上,视图可以通过它将数据映射到模型上;MVVM是数据驱动视图更新,三大框架都是使用MVVM的设计模式;原创 2022-09-17 15:47:02 · 113 阅读 · 0 评论 -
js逻辑_复制文本
如下图,点击复制会复制左边的链接;原创 2022-08-04 18:34:13 · 117 阅读 · 0 评论 -
业务逻辑_vue路由跳转时定位到页面顶部
仅需要在当前页面(page)合适的位置加入一下代码即可。2.在created函数中。1.在组件-前置守卫中。转载 2022-11-26 11:37:00 · 769 阅读 · 0 评论 -
Vue笔记_03组件_mavonEditor组件(基于vue)
如上图想做一个用户可以修改输入文本的字体大小的功能;实现-html使用插槽自定义一个工具栏下拉框原创 2022-12-02 21:12:44 · 1851 阅读 · 0 评论 -
css-在静态资源还没加载好的时候,显示一段静态文本
[1]在原生js中原理:使用window.onload入口函数; 因为window.onload是等待所有静态资源加载完才会执行; 所以我们先将所有的元素隐藏,当静态资源加载完毕在显示; 代码 <style> #app { display: none; } </style> </head> <body> <div id="text">静态资源加载中</原创 2021-04-18 11:08:52 · 136 阅读 · 0 评论 -
diff算法原理解析
使用js对象模拟的页面dom结构被称为虚拟DOM;原创 2022-07-20 15:28:18 · 476 阅读 · 0 评论 -
Vue笔记_03组件_vuedraggable实现拖拽(基于vue)
vue有一个vuedraggable组件可以实现拖拽效果。原创 2022-09-15 15:46:06 · 574 阅读 · 0 评论 -
Vue2踩坑_双向数据绑定失效踩坑-使用$set
在vue中,并不是任何时候数据都是双向绑定的,就比如上述修改多层嵌套数据时,数据的双向绑定就会失效;set为解决双向绑定失效而生!当前使用vue版本2.6.12。可以通过$set来解决!原创 2022-09-14 14:46:08 · 2407 阅读 · 0 评论 -
Vue2笔记_01创建vdom并挂载到dom元素上
render函数的作用是将 createElemet 函数创建的Node节点信息返回到Vue实例化对象的beforeMount生命周期函数中,让其将Node节点渲染在界面上(真实dom);我们会将整个dom结构传入createElement函数中,通过render函数生成虚拟dom然后渲染到真实dom中;createElement函数,用于创建节点信息,其内有三个参数。createElement的第一个参数为html标签的字符串;可以添加第三个参数为其添加子元素。原创 2022-09-17 18:18:30 · 2053 阅读 · 0 评论 -
Vue笔记_03配置项_data与methods
vue会将data对象与methods对象中的成员 平铺到 vue实例中,所以methods中的方法相当于vue实例化对象调用的,this指向vue实例化对象;data为一个函数,每一次调用函数,就会重新生成一个新的data对象,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。 当我们将数据定义在data函数中,当数据发生改变的时候,vue会通过get、set方法监听到,若是页面中使用了-会重新渲染页面;方法,这个方法的参数是一个回调函数,在dom数据更新完成之后被调用.原创 2022-11-26 21:08:08 · 1041 阅读 · 0 评论 -
Vue2笔记_03配置项_watch+Computed+filter
模板的使用非常便利,但是最初设计是用于简单数据,若是模板内部放入 复杂的逻辑关系会使得模板臃肿且难以维护,因此若是复杂的数据运算可以使用方法 或 计算属性;若是需要深度监听(当监听器监听的数据为引用类型时,有时候嵌套数据(属性之类的)被修改可能监听不到)watch其实就是 (this可以访问到的)某个值的 change事件;因为计算属性是不能传值的,但是若是想传值,可以return 一个方法出去。watch的依赖是单个的(相当于是某个值的change事件);过滤器是对接收的数据做一个统一的处理;原创 2022-09-17 21:32:58 · 410 阅读 · 0 评论 -
Vue笔记_04vue全家桶_路由
to:表示目标路由的链接。当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。其实我们可以在每个路由页面created钩子中去修改页面的标题,但是非常的麻烦,若是页面多的化,每个页面都要写created函数去修改;$router是VueRouter的一个实例,他包含了所有的路由,包括路由的跳转方法,钩子函数等,也包含一些子对象;只要是路由跳转,无论是编程式导航($route.push(‘路径’))或者是手动输入都会跳转到该回调函数中;原创 2022-09-18 16:17:58 · 422 阅读 · 0 评论 -
Vue笔记_04vue全家桶_路由模式_router_hash路由与history路由
单页面应用程序将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、CSS 和JavaScript。我通过vue-cli创建了一个使用history模式下的项目,使用命令 npm run serve运行,刷新页面,发现没有报404(没有后端进行配置)。在hash模式下:每一个url里面都会包含# ,# 就是 hash符号,在 hash 符号后的值称为 hash 值。在hash模式下是使用hash 来模拟一个完整的 URL,当 URL 改变时,原创 2022-10-17 11:05:53 · 289 阅读 · 1 评论