Vue.js

创建一个message.vue组件 <template> <div class="wrap" v-if="showWrap" :class="showContent ?'fadein':'fadeout'"> <i :class="iconState ?'success':'wrong'"></i> {{text}} </div> </template> <style scoped> .wrap{ position: fixed; left: 50%; top:50%; background: rgba(0,0,0,.6); padding: 10px; border-radius: 5px; transform: translate(-50%,-50%); color:#fff; font-size: 0.1rem; text-align: center; } .fadein { animation: animate_in 0.5s; } .fadeout { animation: animate_out 0.5s; opacity: 0; } @keyframes animate_in { 0% { opacity: 0; } 100%{ opacity: 1; } } @keyframes animate_out { 0% { opacity: 1; } 100%{

前言 无论在任何的语言或框架中，我们都提倡代码的复用性。对于Vue来说也是如此，相同的代码逻辑会被封装成组件，除了复用之外，更重要的是统一管理提高开发效率。我真就接手过一个项目，多个页面都会用到的列表，没有去封装列表组件，只要有一点改动，每个页面都得加上。很肯定的说，没有用组件化开发的Vue项目是没有灵魂的。所以如何封装一个优雅且复用性高的组件成为我们必需的技能。 Tab自定义组件 首先来看一个Tab组件的实现，看看它存在什么问题，哪里可以改进？ 效果 组件 <template> <div class="tabs"> <div class="tab-item" :class="{'tab--active':item===activeName}" v-for="(item,index) in tabs" :key="index" @click="tabChange(item)"> {{item}} </div> </div> </template> <script> export default { props:{ tabs:{ type: Array, default: ()=> [] }, activeName:{ type: String, default: '' } }, methods:{ tabChange(item){ this.$emit('tabChange'

Vue-Quill-Editor图片插入自定义 前言： 因为在项目中前端采用了Vue来实现，正好用到了富文本编辑器这一块，于是，经过技术上的选择，决定使用Vue-Quill-Editor。 使用的过程相对简单，但是图片插入时，保留的是base64二进制形式，会导致数据库字段太长，存储不易。 所以再三斟酌，决定使用Element-UI的Upload插件来进行图片的上传。 代码： <template> <div class="bg"> <!-- 图片上传组件辅助--> <el-upload class="avatar-uploader" :action="serverUrl" :headers="header" :show-file-list="false" :on-success="uploadSuccess" :on-error="uploadError" :before-upload="beforeUpload"> </el-upload> <quill-editor class="editor" v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change=

WEB前端知识总结 文杰 快过年啦，高级web、java有意向看机会的私信我哈~ ​关注他 492 人赞了该文章 前言 一直想着整理一下关于前端的知识体系和资料，工作忙了些，挤挤总会有的， 资料很多，就看你能不能耐下心坚持去学了，要多学多敲多想，祝你进步~ 学习之前首先要大概了解什么是HTML ,CSS , JS： 一句话概括：HTML 是骨骼， CSS是皮肤， JS只是夹在中间的神经组织！ 细说的话： HTML 是由多种骨头(标签)组成的骨架。 HTML5 是更多的新骨头(标签),同时去掉了以前觉得不好用的骨头. CSS 是皮肤。 CSS3 是更美的皮肤 JS 控制单个动作。(抬手,张嘴,放下手,抬腿,转头,握拳等) jQuery 是把一组常用动作编排成了一个招式。 写给想成为前端工程师的同学们 基础学习 代码有多难？——写给网页设计师的代码书 你想要的17张高清技能图谱都在这儿 为什么学前端 w3cschool HTML教程 初学者学习文档 [菜鸟教程] 梦之都HTML教程 HTML 30分钟入门教程 HTML教程适合初学者 [荐] 零基础的网站开发初学者应如何系统地学习？ 视频学习 慕课网 [荐] HTML+CSS基础课程 智能社 极客学院 StuQ css学习之优酷首页实战 css学习之新浪首页实战 智能社JS教学 哈佛大学公开课：构建动态网站 前端入门 书籍推荐

↑点击上方 “神仙朱” 一起研究Vue源码吧 专注 Vue 源码分享，为了方便大家理解，分为了白话版和 源码版，白话版让大家可以轻松理解工作原理，源码版让大家更清楚内部操作和 Vue的美，来，一起学习吧嘿！ 今天是除夕啦，大家新年快乐！ 身体健康 ！2019多多开花，耶，嗨起来！ 言归正传！ 我相信应该大家应该都使用过 Directive 指令，有时为了能够直接操作DOM，而指令中最重要的莫过于是 钩子函数了，指令一共有五个钩子函数，他们不会在不同的阶段触发，文档也已经说明 当然了，其实你只要了解它是什么时候触发的，就完全可以用在项目。但是我们是不会满足于此的，我要知道他是怎么触发的，怎么调用到我设置的钩子的 今天，我们就来简单说一下这几个钩子都是 怎么被调用 的 你能相信我写 Directive 花了一个星期啊，不是有多难，而是我不知道怎么下手写啊，根本不知道怎么描述会简单好了解，吐血 钩子如何调用 首先，Vue 在绑定了指令的DOM 创建之后，插入页面之前，对一些DOM 本身的事件或者属性等进行处理。 其中，就包含对本DOM的所有指令进行处理 怎么处理呢？每一个钩子函数都不一样，所以我们会分不同钩子说明 首先，处理时，Vue 要判断哪些指令是新的还是旧的 所以需要比较 旧节点上的指令 和 新节点上的指令 比如 新指令比旧指令 多了一个指令 ，如下 // 新指令 newDir

写文章不容易，点个赞呗兄弟 专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧 研究基于 Vue版本 【2.5.17】 如果你觉得排版难看，请点击 下面链接 或者 拉到 下面 关注公众号 也可以吧 【Vue原理】月老Computed - 白话版 今天我们用白话文解读 computed 的工作原理，轻松快速理解 computed 内部工作原理。因为如果你不懂原理，有时候做项目，碰到奇怪的问题，真的不知道怎么回事 要理解 computed 的工作原理，只需要理解下面三个问题 1、computed 也是响应式的 2、computed 如何控制缓存 3、依赖的 data 改变了，computed 如何更新 开始我们今天的讲解，希望你认真看完会有收获 "必须有收获谢谢，不然我不白写了吗兄弟" 在这里，我先告诉你，computed 其实是一个 月老，专门牵线 <br> <br> computed 也是响应式的 什么是响应式，不知道的童鞋请参考我以前的文章 【Vue原理】响应式原理 - 白话版 简单地说 你给 computed 设置的 get 和 set 函数，会跟 Object.defineProperty 关联起来 所以 Vue 能捕捉到 读取computed 和 赋值computed 的操作 读取computed 时

↑点击上方 “神仙朱” 一起研究Vue源码吧 专注 Vue 源码分享，为了方便大家理解，分为了白话版和 源码版，白话版让大家可以轻松理解工作原理，源码版让大家更清楚内部操作和 Vue的美，喜欢我就关注我，好吧兄弟，不会让你失望的 今天我们用白话文解读 computed 的工作原理， 轻松快速理解 computed 内部工作原理。因为如果你不懂原理，有时候做项目，碰到奇怪的问题，真的不知道怎么回事 要理解 computed 的工作原理，只需要理解下面三个问题 1、computed 也是响应式的 2、computed 如何控制缓存 3、 依赖的 data 改变了，computed 如何更新 开始我们今天的讲解，希望你认真看完会有收获 "必须有收获谢谢，不然我不白写了吗兄弟" 在这里，我先告诉你，computed 其实是一个 月老 ，专门牵线 computed 也是响应式的 什么是响应式，不知道的童鞋请参考我以前的文章 【Vue原理】响应式原理 - 白话版 简单地说 你给 computed 设置的 get 和 set 函数，会跟 Object.defineProperty 关联起来 所以 Vue 能捕捉到 读取computed 和 赋值computed 的操作 读取computed 时，会执行你设置的 get 函数，但是并没有这么简单，因为还有一层缓存的操作 赋值 computed 时

参考 https://cn.vuejs.org/v2/guide/events.html#事件修饰符 一般的按键事件是加载input上的 <input type="text" @keydown="keyUp($event)"> 但是目前需要在div上监听，搞了好久没能实现 下面这种无法生效，加上各种事件修饰符也不会生效 <div class="main" @keyUp="keyUp" > 目前只能在body上添加监听器 document.body.onkeydown = this.keyDown 使用ref设置的键盘监听无法生效，但是点击事件可以监听到。。。 效果使用键盘控制飞机移动 <template> <div class="main" ref="main"> <img src="../assets/plane.svg" ref="plane" class="plane"> </div> </template> <script> import Ball from '../util/Ball' import Bullet from '../util/Bullet' import Plane from '../util/Plane' export default { name: "game-card", data() { return { balls: [], bullets: [

作为开发人员，我们一直在寻找让我们的代码更快更好的方法。但在此之前，编写高性能代码需要做三件事： 了解语言及其工作原理 基于用例进行设计 调试!修复!重复 记住这一点 任何傻瓜都可以编写计算机可以理解的代码，优秀的程序员编写人类可以理解的代码。- 丁·福勒 我们来看看如何使 JavaScript代码运行得更快。 延迟 延迟算法将计算延迟到需要执行时才执行，然后生成结果。 const someFn = () => { doSomeOperation() return () => { doExpensiveOperation() } } const t = someArray.filter((x) => checkSomeCondition(x)).map((x) => someFn(x)) // 现在，如果有需要在执行 t.map((x) => t()) 最快的代码是未执行的代码，所以尽量延迟执行。 JavaScript 使用原型继承，JS 中所有对象都是Object的实例。 MDN说： 尝试访问对象的属性时，不仅会在对象上搜索该属性，还会在对象的原型，原型的原型等上搜索该属性，直到找到匹配属性名或原型链的末端。 对于每个属性，JavaScript引擎都必须遍历整个对象链，直到找到匹配项。 如果使用不当，这会占用大量资源，并影响应用程序的性能。 所以不要这样： const name

1.v-on 监听DOM事件，并在触发时运行一些javascript代码 v-on：简写@ v-on还可以接收一个需要调用的方法名称 所有的方法都需要放到methods对象里面，再进行调用 内联处理器中的方式 除了直接绑定到一个方法，也可以在内联javascript语句中调用方法 < button v-on:click= "say('helli xiaobai !')">xiaobai </ button> methods: { say: function( e){ console.log(e) } } .stop阻止事件冒泡 .prevent阻止默认事件 .capture时间捕获(从上到下) .self只在元素自身回调 .once只触发一次 按键别名 .enter (“回车”键) .tab (“TAB”键) .delete (捕获“删除”和“退格”键) .esc (“ESC”键) .space (“空格”键) .up (向上方向键) .down (向下方向键) .left (向左方向键) .right (向右方向键) Vue也提供了自定义按键别名的方法 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112 组合按键不能单独触发事件，要与非组合按键一起才能触发事件 .ctrl .alt .shift .meta <!-- "回车"键 和