![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue.js
Homyee King
这个作者很懒,什么都没留下…
展开
-
vue2 render函数 eslint解析jsx错误
需要在.eslintrc parseOptions里 配置parser 为’babel-eslint’参考 https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-errorPS:babel-eslint 的作用 :You only need to use babel-eslint if you are using types (Flow) or experimental features no原创 2021-01-14 11:47:43 · 1377 阅读 · 0 评论 -
安装styleguide
直接看官网https://vue-styleguidist.github.io/用了cli 直接vue add xxxx不是的话 就老老实实npm安装配置项含义module.exports = { // set your styleguidist configuration here title: 'Default Style Guide', components: 'src/components/**/[A-Z]*.vue', defaultExample: fa原创 2021-01-14 11:44:02 · 413 阅读 · 0 评论 -
Error: Cannot find module ‘vue-loader-v16/package.json‘
原因: npm版本太低 建议更新全局npm版本npm install npm@latest -g参考:Error: Cannot find module ‘vue-loader-v16/package.json’原创 2020-10-15 10:04:22 · 2608 阅读 · 0 评论 -
vue $emit,子组件传出多个参数,如何在父组件中在接收所有参数的同时添加自定义参数
方法一子组件传出单个参数时:// 子组件this.$emit('test',this.param)// 父组件@test='test($event,userDefined)'方法二子组件传出多个参数时:// 子组件this.$emit('test',this.param1,this.param2, this.param3)// 父组件 arguments 是以数组的形式传入@test='test(arguments,userDefined)'...转载 2020-09-27 15:42:21 · 1414 阅读 · 0 评论 -
轻松实现给vue单页面绑定快捷键
我想给整个页面添加一个键盘事件,也就是快捷键,于是我在当前页面根元素上绑定了keyup事件,ps:div 的 事件不像表单,我们需要在标签上添加tableIndex = "0"这个属性但是每次还是得点一下页面才有用,那大大削弱了快捷键的作用,最后找来找去,终于找到了答案。因为vue是很少直接操作dom的,所以我在写vue的时候,很少往原生dom事件那里去碰,但是,原生就是基础,基础还是...原创 2020-05-07 22:37:41 · 1321 阅读 · 0 评论 -
一分钟解决this.$refs.xxx 取值为undefined问题
问题场景是这样,我们设定一个组件的ref = ‘a’,根据生命周期,我们是可以在mounted中访问的,但是console.log(this.$refs.a)是undefined,而我们this.$refs打印出来,这个a是存在的,这是为什么呢?可能你还没有注意到,Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果...原创 2020-05-07 22:29:29 · 4997 阅读 · 0 评论 -
Vue中必须掌握的的虚拟Dom(精炼版)
最近回看自己写的Vue中必须掌握的的虚拟Dom,感觉有点啰嗦,于是特作此篇,提炼出重点,方便回看。为什么要采用虚拟dom?因为vue是数据驱动的,数据改变就要引发视图更新,但如果操作真实的dom,对内存消耗较大,于是我们用js对象来模拟真实的dom节点,通过操作虚拟dom,来实现对真实dom 的改变。虚拟dom如何工作?首先,vue中存在一个VNode类,通过它可以实例化各种类型的节点,包...原创 2020-04-27 11:31:05 · 155 阅读 · 0 评论 -
轻松了解Vue的数据监听
我们使用过vue都知道,vue的数据是双向绑定的,Vue 数据双向绑定主要是指:数据变化更新视图,视图变化更新数据。典型的例子就是v-model。其中,View 变化更新 Data ,可以通过事件监听的方式来实现,所以 Vue 的数据双向绑定的工作主要是如何根据 Data 变化更新 View。于是乎:问vue实现双向绑定,拢共分几步?分四步:第一步实现事件监听Observe:通过Obje...原创 2020-04-15 22:44:21 · 1095 阅读 · 0 评论 -
十分钟掌握vue的生命周期
官方生命周期图压场图中多少说的不够具体,我们一个一个用代码的形式来理解。生命周期组件状态最佳实践beforeCreate实例初始化之后,this指向创建的实例,不能访问到data、computed、watch、methods上的方法和数据常用于初始化非响应式变量created实例创建完成,可访问data、computed、watch、methods上的方法和...原创 2020-04-13 17:56:14 · 214 阅读 · 0 评论 -
Vue中必须掌握的的虚拟Dom
Vue是数据驱动的,一旦数据改变,我们就要更新视图,但是操作真实的DOM是很消耗性能的,那么我们如何处理呢?答案就是用虚拟DOM虚拟DOM就是用JS对象来模拟dom节点<div class="vdom" id="id">I'm the content</div> { tag:"div",//标签名 attrs:{//属性 ...原创 2020-04-13 13:46:18 · 167 阅读 · 0 评论 -
一篇文章带你了解不可思议的react diff
前言在认识react diff之前,首先要了解一个概念,virtual dom ,虚拟DOM结构,它是一种编程概念,在这个概念里, UI 以一种理想化的,或者说“虚拟的”表现形式被保存于内存中,并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫做协调。而react diff 就是VD的加速器,帮助界面更好地渲染出来。React 中最值得称道的部分莫过于 Virtua...原创 2020-04-02 20:11:23 · 230 阅读 · 0 评论 -
H-Chat: 输入框中添加图标
虽然有好多现成的轮子,但我还是想记录一下这个通过自己尝试得出来的需求:一个搜索框,添加placeholder:搜索图标和‘搜索’这两个字实现1. 这个搜索两个字好加,直接placeholder里写就行,但是写完我又想让这两个字居中显示,然后我搜索了一下,有placeholder-class这个属性,然后我就写了一个类实现居中,绑定到这个属性上果然可以。2. 之后想加图标,因为我这个项目已...原创 2020-02-13 20:23:00 · 156 阅读 · 0 评论 -
H-Chat: socket.io实现私聊,群聊,添加好友
工具客户端: vue-socket.io服务端:socket.io安装分别npm 安装,配置代码看相应文档,文档很详细思路1. 私聊每个用户登录成功后则将自己的用户名或ID总之是一个唯一的变量,作为socket的名字,下面以id举例,毕竟各个场景下 id基本上都是唯一的,这样每个用户登录后都会得到指定的socket。//client 登录成功后this.$socket.emit(...原创 2020-02-13 20:14:12 · 1532 阅读 · 0 评论 -
vue+node+express 部署到服务器
参考博客,觉得我废话太多,一定要看,写的简洁明了前言这个问题可能对有些人来说不是事,而且网上有很多关于部署的博客,但是对于那种状态下的我都毫无帮助,直到今天,这个困扰我一个月零十天的问题,解决了。。。 所以,我必须写这篇博客,来帮助那些极少数和我相似问题的人!像我们这些自学派,基本上就是看文档,看视频,而且看视频的时候,难免一些新的东西了解不够透彻,只是跟着视频作者的代码风格进行使用,但是...原创 2019-10-28 15:42:33 · 2578 阅读 · 1 评论 -
过渡&动画
一、过渡Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库,如 Animate.cs...原创 2019-04-13 10:59:28 · 217 阅读 · 0 评论 -
vue-cli 引入Bootstrap(遇到的坑,以及解决办法)
查看网上许多教程,都是一样的,可能他们安装的时候没有碰到问题,我在按照网上教程操作完后,还是不行,本人英语还可以,于是我就尝试看了看报的错,提示有几个格式需要找loader处理一下,如果你也遇到和我一样的问题就看下面吧原创 2019-06-06 14:26:09 · 3936 阅读 · 2 评论 -
vue-cli 组件的使用
安装项目http://www.cnblogs.com/pearl07/p/6247389.html正文https://www.cnblogs.com/pearl07/p/6252116.html1,项目目录结构(路由是后来建的,将在下一篇使用路由,此处可忽略)。2,首先完善main.js。3,在components下 ,新建一个first.vue组件,并实现基本功能(模板、sc...转载 2019-07-03 15:36:39 · 307 阅读 · 0 评论 -
JWT的认识以及使用
互联网用户认证一般就是,用户向服务端发送用户名和密码,服务端通过验证后存入session,并向用户返回session_id,写入用户的cookie,而后用户的每次请求都会通过cookie返回一个session_id, 服务器通过这个ID进行身份认证。问题 :这种模式的问题在于,扩展性(scaling)不好。单机当然没有问题,如果是服务器集群,或者是跨域的服务导向架构,就要求 session 数据...转载 2019-08-26 20:57:40 · 232 阅读 · 0 评论 -
前端用户登录机制
session用户状态存服务端缺点:1)由于session 维护在服务器,登录的人一多就服务器压力很大2)单机ok fine;多机信息同步不方便3)session+cookie 存在 csrf 风险(当然有解决方案)token用户信息加密后传给前端,每次请求带上token 大名鼎鼎的 jwtjson web token令牌一旦发送出去,登录信息服务端无法强行作废JWT首先这...原创 2019-08-31 13:53:45 · 2581 阅读 · 0 评论 -
vuecli中引入图片
如果使用vuecli开发那么在build文件夹下的tuils.js中找到ExtractTextPlugin这个插件,添加publicPath:"../../"即可原创 2019-09-02 12:21:21 · 509 阅读 · 0 评论 -
vuecli 路由组件宽高的问题----scoped引发的惨案
今天写组件的时候,背景图总是铺不满页面,设置了好几遍宽高百分百都没用,后来就没管,还好让我找出了毛病我们知道vuecli最初的页面是渲染的App.vue这个默认组件,我们自定义的组件都得引入到这个大组件中,所以这个大组件定义的样式一般是全局使用的,即 App.vue <style></style> 标签中是不用加scoped的,加上scoped之后,组件的样式只能应用...原创 2019-09-02 17:52:10 · 183 阅读 · 0 评论 -
解决element el-input添加键盘事件
el-form组件默认不支持回车提交,需要做如下修改实现方式在el-form添加 @submit.native.prevent ,然后在el-input中绑定键盘事件<el-form @submit.native.prevent> <el-form-item> <el-input ...原创 2019-09-02 20:51:45 · 3951 阅读 · 0 评论 -
vue中使用 vue-socket.io
源码github地址 : https://github.com/metinseylan/vue-socket.io安装,配置跟随文档走。主要讲一下在组件中如何使用:1.事件的注册与监听如果你想在组件中监听socket事件,你需要在.vue组件中添加 sockets对象,里面的每一个函数都会监听事件,这取决于对象的键值。export default { sockets: {...原创 2019-09-06 22:52:06 · 1524 阅读 · 1 评论 -
Vue.js 混入
定义:混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。----(from 官方文档)选项合并: 当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。比如,数据对象在内部会进行递归合并,在和组件的数据发生冲突时以组件数据优先。注意点:(1)就是 混入对象中 ...原创 2019-04-11 16:27:26 · 287 阅读 · 0 评论