![](https://img-blog.csdnimg.cn/20200625103815319.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 84
vue笔记
m0rta1
优秀的判断力来自经验,但经验来自于错误的判断。涉及领域: Java后端开发/前端开发/PHP/Python/WEB安全/逆向+PWN/云计算
展开
-
SpringBoot 导出Excel表格,并实现前端Vue+Axios下载文件不跳转页面
SpringBoot 导出Excel表格,并实现前端Vue+Axios下载文件不跳转页面原创 2021-01-08 00:17:21 · 2187 阅读 · 0 评论 -
Vue 使用 particles.js 实现粒子界面效果以及报错 particlesJS is not defined 解决
一、效果展示:二、官方地址https://marcbruederlin.github.io/particles.js/https://www.jb51.net/article/123594.htm (中文开发文档)三、Vue cli 引入npm i particles.js四、代码编写 template<template> <div id="particles"></div></template> scrip原创 2020-12-29 12:08:36 · 3768 阅读 · 6 评论 -
vue-cli 输入命令vue ui 没效果 解决办法
输入命令行vue ui,终端会报启动信息,这本来很正常。可是呢,今天不知道啥回事,输入vue ui,终端没反应我查看了vue的帮助信息,发现根本没有 ‘vue ui’ 这一命令行。运行vue -V之后发现自己的vue版本不知道咋的变成了2.9。。。。。于是重新安装vue-cli最新版(版本号必须3x以上)就行了。先卸载原来的vue cli : npm uninstall vue-cli -g再运行 :npm install -g @vue/cli运行vue -V 看版本 (版本大于3即可)原创 2020-07-04 19:52:03 · 1793 阅读 · 0 评论 -
computed (计算属性) 和 methods (方法) :
computed (计算属性) 和 methods (方法) 的区别:我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。也...原创 2020-03-18 18:06:59 · 470 阅读 · 0 评论 -
Promise常用API的使用和分析
1.实例方法: <script> //Promise常用API-实例方法 // console.dir(Promise); function foo() { return new Promise(function(resolve, reject) { setTimeout(fun...原创 2020-04-07 23:47:44 · 389 阅读 · 0 评论 -
基于Promise处理ajax请求
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...原创 2020-04-06 23:02:38 · 728 阅读 · 0 评论 -
Promise的基本使用方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume...原创 2020-04-06 16:59:54 · 171 阅读 · 0 评论 -
Vue:keep-alive标签的使用
keep-alive:应用场景:有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。如果未使用keep-alive组件,则在页面回退时仍然会重新渲染页面,触发created钩子,使用体验不好。 在以下场景中使用keep-alive组件会显著提高用户体验,菜单存在多级...原创 2020-04-08 22:21:13 · 504 阅读 · 0 评论 -
Vue 商城购物车 细节处理优化版 :组件化开发综合案例 (详细代码分析在底部)
需求:案例展示:代码展示:HTML部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...原创 2020-04-03 00:14:23 · 426 阅读 · 0 评论 -
Vue:作用域插槽的使用方法
基本语法:代码案例:(解析在注释中)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2020-03-29 21:22:10 · 995 阅读 · 1 评论 -
Vue:具名插槽的使用方法和案例分析以及延伸关于template在vue实例中的作用
语法:* :slot的值如果是“header”则会匹配到左边的有相同名字的标签并进行填充。案例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head>...原创 2020-03-29 00:04:19 · 729 阅读 · 0 评论 -
Vue:插槽的基本使用方法以及案例分析
1.组件插槽的作用2.插槽使用方法:slot的作用:预留一个插槽用于传递数据 小细节:如果slot里面有值,且父级模板中也有值, slot里面的值会被覆盖案例:(分析看注释)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na...原创 2020-03-28 23:24:12 · 486 阅读 · 0 评论 -
Vue:兄弟组件之间的交互
案例:(点击TOM ,则JERRY会加2,相反点击JERRY,则TOM会加1)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...原创 2020-03-28 22:14:35 · 322 阅读 · 0 评论 -
Vue: 子组件修改父组件数据以及子组件带参数修改父组件数据的方法 ( props)
前言:props属性的特点:(单向数据流) 业务中会经常遇到两种需要改变props的情况,一种是父组件传递初始值进来,子组件将它作为初始值保存起来,在自己的作用域下可以随意使用和修改。这种情况可以在组件data中再声明一个数据,引用父组件的prop。$emit: $emit 触发当前实例上的事件,也可以简单的理解为触发父组件上的事件(向上冒泡)具体$emit参考官方文档:https://...原创 2020-03-28 16:44:59 · 3142 阅读 · 0 评论 -
Vue:props属性值类型使用方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./js/v...原创 2020-03-28 15:34:27 · 2065 阅读 · 0 评论 -
Vue:组件数据交互中的props的命名规则
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <di...原创 2020-03-28 11:13:11 · 1601 阅读 · 0 评论 -
Vue:父子组件间的数据交互
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./js/v...原创 2020-03-28 11:04:39 · 279 阅读 · 0 评论 -
Vue 图书管理案例:包含过滤器,自定义指令,计算属性,侦听器,生命周期知识点
**必要知识点:**=> 箭头函数:函数里面的this指向父级作用域this.books.some(function(item){})//里面的this指向windowthis.books.some((item)=>{})//指向父级作用域2.filter返回的是数组类型3.forEach,filter,some 的区别和使用场景:来说明图书管理遍历为何用some...原创 2020-03-22 18:29:05 · 497 阅读 · 0 评论 -
vue自定义指令update 和 componentUpdated及bind 和 inserted区别
适用需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令2. 钩子函数参数除了 el 之外,其它参数都应该是只读的,切勿进行修改动态指令参数v-mydirective:[argument]=“value”argument可以是动态变化的,并且在钩子里面实时更新的4.钩子区别update 和 componentUpdated共同点:组件更新都会调用,update在...转载 2020-03-18 17:33:55 · 14146 阅读 · 0 评论