vue
键盘捕手
这个作者很懒,什么都没留下…
展开
-
递归组件2
父组件<template> <div class="list-detail"> <list :list="list" class="niubi"></list> </div></template><script>import List from './components/List'export default { name: 'Parent', components: {原创 2021-02-02 17:50:45 · 145 阅读 · 0 评论 -
vue 递归组件
子组件<template> <ul class="tree"> <li v-for="(item,index) in treedata" :key="index"> <div :class="'ui-draggable'+item.level" @click="expand()" > {{item.text}} </div> <div v-if="原创 2021-02-02 14:22:44 · 147 阅读 · 0 评论 -
强制 Vue 重新渲染组件
有时候,依赖vue响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据。或者,我们可能只想抛开当前的DOM,重新开始。那么,如何让vue以正确的方式重新呈现组件呢?强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。 当我们需要重新渲染组件时,只需更key的值,Vue 就会重新渲染组件。这是一个非常简单的解决方案。当然,你可能会对其他方式会更感兴趣:简单粗暴的方式:重新加载整个页面 不妥的方式:使用v-if 较好的方法:使用Vue的内置forceUpda...原创 2021-01-06 10:05:18 · 232 阅读 · 0 评论 -
Vue keep-alive实践总结
<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。<keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和<transition>相似,<keep-alive>是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。prop:include: 字符串或正则表达式。只有匹配的组件会被缓存。 exclude: 字符串或正则表达式。任何匹配...转载 2020-12-07 15:44:29 · 119 阅读 · 0 评论 -
elementUI 和vue 还有axios +java的完整示例, 代码敲了很久, 累死了, 以后用就直接复制了 ,很值吧!!!
<!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title>导入</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body><div id="myUp.原创 2020-11-12 20:24:37 · 116 阅读 · 0 评论 -
对象 get和set方法
1、用途用户定义的对象定义 getter 和 setter 以支持新增的属性。示例:obj创建一个伪属性latest,它会返回log数组的最后一个元素。var obj = { log: ['example','test'], get latest() { if (this.log.length == 0) return undefined; return this.log[this.log.length - 1]; }}console.log(obj.lat原创 2020-11-04 15:46:06 · 683 阅读 · 0 评论 -
Vue引发的getter和setter
Vue引发的getter和setter看着文档研究了一下vue的双向数据绑定,打印出Vue实例下的data对象里的属性时,发现了一个有趣的事情:它的每个属性都有两个相对应的get和set方法,我觉的这是多此一举的,于是去网上查了查Vue双向绑定的实现原理,才发现它和Angular.js双向绑定的实现原理完全不同,Angular是用的数据脏检测,当Model发生变化,会检测所有视图是否绑定了相关数据,再更改视图。而Vue使用的发布订阅模式,是点对点的绑定数据。Vue的数据绑定只有两个步骤...原创 2020-11-04 14:09:42 · 2330 阅读 · 0 评论 -
.sync修饰符
第一步:先用一句话解释.sync修饰符可以实现子组件与父组件的双向绑定,并且可以实现子组件同步修改父组件的值。第二步:具体解释一般情况下,想要实现父子组件间值的传递,通常使用的是props和自定义事件$emit。其中,父组件通过props将值传给子组件,子组件再通过$emit将值传给父组件,父组件通过事件j监听获取子组件传过来的值。如果想要简化这里的代码,可以使用.sync修饰符,实际上就是一个语法糖。第三步:举一个例子来说明Father.vue<templ...原创 2020-11-03 15:16:01 · 18101 阅读 · 3 评论 -
ES6-Proxy与数据劫持(12)
随着前端界的空前繁荣,各种框架横空出世,包括各类mvvm框架百家争鸣,比如Anglar、Vue、React等等,它们最大的优点就是可以实现数据绑定,再也不需要手动进行DOM操作了,它们实现的原理也基本上是脏检查或数据劫持。我们先以Vue框架出发,探索其中数据劫持的奥秘。Vue 2.0的版本所使用的数据劫持,说白了就是通过Object.defineProperty()来劫持对象属性的setter和getter操作,在数据变动时做你想要做的事情,举个栗子:var data = { name:'原创 2020-10-19 22:37:10 · 478 阅读 · 0 评论 -
Vue的slot-scope的场景的个人理解
转https://segmentfault.com/a/1190000015884505?utm_source=tag-newest这篇文章不是单纯把文档的话和api拿来翻译和演示,而是谈谈我对于slot-scope的使用场景的个人理解,如果理解错误,欢迎讨论!Vue的插槽slot,分为3种匿名插槽 具名插槽 作用域插槽前两种很好理解,无论就是子组件里定义一个slot占位符,父组件调用时,在slot对应的位置填充模板就好了。作用域插槽的慨念,文档却只有一句简单的描述有的时候你希望提转载 2020-10-15 13:59:18 · 339 阅读 · 1 评论 -
为 Vue 的惰性加载加一个进度条
为 Vue 的惰性加载加一个进度条原创前端先锋前端先锋昨天 17:57阅读数 8本文被收录于专区大前端进入专区参与更多专题讨论技术领域干货、就业指导、尽在华为云HERO高校联盟知识峰会!>>>//每日前端夜话第412篇//正文共:1800字//预计阅读时间:8 分钟简介通常用 Vue.js 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 CSS 文件)都会被一起加载。在处理大文件...原创 2020-10-10 15:45:24 · 290 阅读 · 0 评论 -
vue .native $listeners 和 $attrs总结
.native 用于自定义子组件上面绑定事件,简而言之,就是在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加’. native’事件是无法触 发的。$listeners :当组件的根元素不具备一些DOM事件,但是根元素内部元素具备相对应的DOM事件,那么可以使用$listeners获取父组件传递进来的所有事件函数,再通过v-on="xxxx"绑定到相对应的内部元素上即可。===============================================父组原创 2020-10-10 15:27:45 · 199 阅读 · 1 评论 -
vue中的$listeners属性作用
一、当组件的根元素不具备一些DOM事件,但是根元素内部元素具备相对应的DOM事件,那么可以使用$listeners获取父组件传递进来的所有事件函数,再通过v-on="xxxx"绑定到相对应的内部元素上即可。 注意:使用.native修饰符的事件,不会体现在$listeners属性上。<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="G原创 2020-10-10 11:43:31 · 5296 阅读 · 0 评论 -
在vue中通过使用$attrs实现组件之间的数据传递
组件之间传递数据的方式有很多种,之所以有这么多种方式,是为了满足在不同场景不同条件下的使用。一般有三种方式: 通过props的方式向子组件传递(父子组件) vuex进行状态管理 非父子组件的通信传递Vue Event Bus,使用Vue的实例,实现事件的监听和发布,实现组件之间的传递 本文介绍的是使用$attrs的方式。这是$attrs的官网apihttps://cn.vuejs.org/v2/api/#vm-attrs这个api是在2.4版本中...转载 2020-10-10 09:53:34 · 512 阅读 · 0 评论 -
改变对象属性$set,和原始写法 引用场景:点击展开,再次点击关闭,或者 点击选中,再次点击取消选中
<template> <div class="hello"> <h1>{{ msg }}</h1> <h2 @click="$router.push('/second')">Ecosystem</h2> <p v-for="e in arr" :key="e.index"><spa...原创 2020-04-24 13:55:13 · 169 阅读 · 0 评论 -
vue组件独享守卫钩子函数参数详解(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)
一样的和前面路由钩子类似的步骤首先在demo下面的components下面新建一个test.vue组件test组件代码<template> <div class="test_box"> <p @click="go">测试组件内部守卫的作用,点击跳到HelloWorld</p> </div></temp...转载 2020-03-19 16:41:10 · 807 阅读 · 0 评论 -
axios的传参方式
https://www.cnblogs.com/liangweiping/p/11533162.html1、params方式axios({ url: '/users', method: 'get', params: {id: '11111',name: '22222' }})请求地址:/users?id=11111&name=22222...原创 2020-01-16 15:07:41 · 254 阅读 · 0 评论 -
vue 实现剪裁图片并上传服务器
效果图预览链接点击预览需求[x] 预览:根据选择图像大小自适应填充左侧裁剪区域 [x] 裁剪:移动裁剪框右侧预览区域可实时预览 [x] 上传&清空:点击确认上传裁剪图片,点击取消按钮清空图像 [ ] 裁剪框可调节大小实现步骤methods:funName() - 对应源码中methods中的funName方法data:dataName -...原创 2019-11-19 14:06:32 · 903 阅读 · 0 评论 -
vue插槽,内容分发
今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做了一个项目,然后通过项目中的一些案例进行总结。今天我们来说说 Vue 中的内容分发<slot>,首先 Vue 实现了一套内容分发的 API,这套 API 是基于当前的 Web Com...原创 2019-10-25 14:23:00 · 694 阅读 · 0 评论 -
watch computed使用
<template> <div class="hello"> <p>FullName: {{fullName}}</p> <!-- <p>Fullname:{{fullName0}}</p> --> <p>FirstName: <input type="text...原创 2019-10-25 14:10:48 · 124 阅读 · 0 评论 -
vuequilleditor编辑器的使用,字体无法对齐的问题
转:https://cloud.tencent.com/developer/article/1365594从这里进入官网. 能找到这个NB的编辑器是因为公司项目需要一个可视化的cms编辑器,类似微信公众号编辑文章。可以插入各种卡片,模块,问题,图片等等。然后插入的内容还需要能删除,拖拽等等。所以采用vue开发,兼容vue并兼容拖拽的文本编辑器并不多,所以在github上一番搜索找到了quill...原创 2019-10-17 15:11:12 · 2708 阅读 · 1 评论 -
vue better-scroll插件
github上面搜索 better-scroll安装better-scroll : npm i better-scroll --save使用条件:1、html结构<div class="wrapper"> <ul class="content"> <li>...</li> <li>...<...原创 2019-05-12 22:19:04 · 315 阅读 · 0 评论 -
vuex的使用
npm install vuex --save可以在mian.js入口文件直接中引入,如果vuex处理的比较复杂化数据,最好在src目录下新建一个store文件引入,新建index.js文件在mian.js里面引入import store from './store/index.js'方法一(封装state,mutations):store的index.js写下面代码...原创 2019-05-14 12:50:33 · 119 阅读 · 0 评论 -
仿写去哪儿网app--遇到的问题及说明总结
1. 移动端开发中的1px边框问题,由于在不同屏幕上,可能会使得1px实际在移动端显示不是1px,怎么解决?2. 移动端click点击事件,会延迟300ms,怎么解决?解决:引入第三方包,解决移动端click事件延迟300ms;npm install fastclick --save;在main.js中写如下代码import fastClick from 'fas...转载 2019-05-14 19:47:21 · 773 阅读 · 0 评论 -
vue keep-alive的使用
每一次页面切换(路由切换的时候)ajax都会请求一次数据,造成资源的浪费,性能低下。我们可以使用keep-alive来解决这个问题。<template> <div id="app"> <keep-alive exclude="Detail"><!-- 使用exclude去掉不需要被缓存的组件页面--> <route...原创 2019-05-14 16:15:21 · 108 阅读 · 0 评论 -
vue背景图和img图片github线上预览加载不出来解决办法
改变路径配置将绝对路径改为相对路径目标文件:项目目录 > config文件夹 > index.jsassetsPublicPath:'/' 改为:assetsPublicPath:'./' (加一个点变为相对路径)配置背景图片路径打包后的css文件夹内app.css文件访问static/img/’图片名’路径错误访问不到图片,在build文件内utils...原创 2019-06-02 20:27:30 · 1132 阅读 · 0 评论 -
vue引入标题ico图标方法,以及标题跑马灯
1 先有一个需要图片,png 、jpg ...格式都可以2 把图片转换成 .con 格式的图标,http://www.bitbug.net/使用比特虫转换 ,目标尺寸:16*16 或者 32*32都行3 转换后的图标命名为favicon.ico ,放在项目根目录,与 index.html 文件同级4 在index.html 文件的<head></head>...转载 2019-06-04 10:07:05 · 1195 阅读 · 0 评论 -
vue管理系统笔记
1.lintfix npm run lintfix 自动修复代码规范2.在packjage.json中"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open",//加上--open 自动打开浏览器 "start": "npm...原创 2019-06-04 20:25:14 · 110 阅读 · 0 评论 -
vue路由加懒加载的方式
1、当一个vue项目很大的时候,对于一些“暂时”用不到的组件,我们可以不进行加载,等到用到次组件时再加载。这样可以优化spa应用首次加载白屏情况,也给用户更好的体验。这样就是vue路由懒加载。2、常用的懒加载方式有两种:即使用ES中的import和vue异步组件2.1 未使用懒加载import HelloWorld from '@/components/HelloWorld...转载 2019-07-16 17:25:04 · 107 阅读 · 0 评论 -
vue图片懒加载
介绍: vue-lazyload主要应用于图片延迟加载。包含如下的特点:小巧轻便,功能强大,易于使用可以用于加载任何图像类型支持Vue 1.0和Vue 2.0理解图片延迟加载:当某个网页中呈现的图片较多时,由于网络等原因,访问该网页时,所有的图片不会立马全部进行显示出来,会出现一定的网络延迟加载的现象,影响用户体验;但我们可以vue-lazyload插件来实现在图片加载的过程中,先显...转载 2019-07-16 17:30:28 · 96 阅读 · 0 评论 -
vue项目用sha256、md5、base64加密密码
无论你开发什么样的项目,你可能都会要开发登录、注册、修改密码、忘记密码这些功能,少数项目除外!!要实现这些功能,对于保护用户或者管理员账号密码,这是我们程序员肯定要做的事情。要是用户密码不加密,用明文方式传给后台,是不是有点耍流氓了!!!所以为了保证密码的不可见性,我们还是加密吧!下面我简单介绍一下三种加密方法,也是我最常用的三种方法。1.MD5: 1)、基本介绍 ...原创 2019-09-16 15:21:52 · 427 阅读 · 0 评论 -
验证码功能前后端实现以及使用createObjectURL下载内容以及生成图片
参考文章:使用vue.js axios 下载功能?参考:ajax请求二进制流图片并渲染到html中img标签使用CreateObjectURL实现下载文件以及渲染图片HTML5 进阶系列:文件上传下载java生成验证码createObjectURL的api文档说明需求需求:需要完成图片验证码功能,前端技术栈vue+axios,后端主要是springboot+mybatis.因为使用前端...转载 2019-09-30 10:03:11 · 532 阅读 · 0 评论 -
单页应用和多页应用
每一次页面跳转的时候,后台服务器都会给返回一个新的html文档,这种类型的网站也就是多页网站,也叫做多页应用。多页应用为什么多页应用的首屏时间快?首屏时间叫做页面首个屏幕的内容展现的时间,当我们访问页面的时候,服务器返回一个html,页面就会展示出来,这个过程只经历了一个HTTP请求,所以页面展示的速度非常快。为什么搜索引擎优化效果好(SEO)?搜索引擎在做网页排名的时候,...转载 2019-05-14 12:04:09 · 149 阅读 · 0 评论