Vue基础知识及实战精华
这部分专栏中记录的一部分是Vue中比较突出的基础知识部分以及实战过程中比较让人惊讶的实战写法。
一只没有感情的小杀手
我不告诉你略略略~
展开
-
vue基础知识(五)——Promise基础详解
今天是大概标题水水水水111111111111111190原创 2020-06-14 22:56:03 · 1728 阅读 · 0 评论 -
vue框架——详解vue的diff算法原理
我的目标是写一个非常详细的关于diff的干货,所以本文有点长。也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角。先来了解几个点...1. 当数据发生变化时,vue是怎么更新节点的?要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排,有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢?diff算法能够帮助我们。我们先根据真实DOM生成一颗virtual DOM,当...转载 2020-05-29 17:27:06 · 1166 阅读 · 0 评论 -
vue基础知识(四)——组件插槽 (具名插槽 && 作用域插槽)
33333333333333原创 2020-05-26 18:03:56 · 322 阅读 · 0 评论 -
vue基础知识(三)——属性绑定 && 样式绑定
谢谢谢谢谢谢原创 2020-05-26 17:03:38 · 349 阅读 · 1 评论 -
vue实战精华(五)——【Element-UI】中将中文切换成英文
想不到我也会有今天,在和一个法国人对接的时候,那边的需求是网页字体全英文+法文,就是不能出现中文呗~但是呢,Element-UI中的组件有些默认就是中文的,不能像改样式那样只能切换中英文了。像这个表格中下面的两个词,要改成这样子 ——>网上解决办法千奇百怪,说一个我觉得相对来说比较容易地好了;我用的是vue-cli3的脚手架,在main.js中配置好Elenemt-UI好之...原创 2020-05-07 12:26:37 · 2493 阅读 · 0 评论 -
vue实战精华(四)——ElenemtUI中菜单的双重for循环渲染
1.需求后台管理系统左侧部分的菜单,从后台获取数据再渲染到页面结构上。2.代码这个写法有两种,第一种写法是: <el-menu> <el-submenu :index="item.id + '' " v-for="(item,index) in menuList" :key="index"> <!--这个index属性只接收字符串...原创 2020-04-15 15:15:51 · 1112 阅读 · 0 评论 -
vue基础知识(十三)——ES6模块化的基本语法
ES6模块化的基本语法1. 默认导出 与 默认导入默认导出语法 export default 默认导出的成员默认导入语法 import 接收名称 from ‘模块标识符’// 当前文件模块为 m1.js// 定义私有成员 a 和 clet a = 10let c = 20// 外界访问不到变量 d ,因为它没有被暴露出去let d = 30function show(...原创 2020-04-13 17:01:45 · 330 阅读 · 0 评论 -
vue基础知识(十二)——前端工程化
1.模块化相关规范1.1 模块化概述传统开发模式的主要问题命名冲突文件依赖通过模块化解决上述问题模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块模块化开发的好处:方便代码的重用,从而提升开发效率,并且方便后期的维护1.2 浏览器端模块化规范1. AMDRequire.js(http://www....原创 2020-04-13 16:43:21 · 236 阅读 · 0 评论 -
vue基础知识(十五)——Vue脚手架
1.Vue脚手架的基本用法Vue 脚手架用于快速生成 Vue 项目基础架构,其官网地址为:https://cli.vuejs.org/zh/基于图形化界面方式创建vue项目会比交互式命令行方式更简便。新建时,其他选项都默认即可,在 Git 部分写上初始提交信息:点击"下一步"之后,会显示询问是否进行一些相关的配置,这里我们可以选择"手动配置",也可以选择"默认配置",如果之前已经设置...原创 2020-04-13 15:57:07 · 216 阅读 · 0 评论 -
vue基础知识(十四)——webpack
1.当前Web开发面临的困境文件依赖关系错综复杂静态资源请求效率低模块化支持不友好浏览器对高级Javascript特性兼容程度较低ets…2.webpack 概述webpack是一个流行的前端项目构建工具(打包工具),可以解决当前web开发中所面临的困境。webpack提供了友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能,从而让程序员把工作的重心放到...原创 2020-04-13 14:55:18 · 256 阅读 · 0 评论 -
vue基础知识(十一)——Vue-router
爱情QQ群原创 2020-04-12 21:42:36 · 205 阅读 · 0 评论 -
vue基础知识(十)——fetch、axios、async/await
一. fetch概述1.基本特性更加简单的数据获取方式,功能更强大、更灵活,可以看做是xhr的升级版 基于Promise实现2.语法结构fetch(url).then(fn2) .then(fn3) ... .catch(fn)3.fetch的基本用法通过调用fetch的API——data.text()来...原创 2020-04-10 11:50:50 · 864 阅读 · 0 评论 -
vue基础知识(九)——前后端交互的URL地址格式
1.URL地址格式传统形式的URL格式:schema://host:port/path?query#fragment (1) schema:协议。例如http、https、ftp等 (2) host:域名或者IP地址 (3) port:端口,http默认端口80,可以省略 (4) path:路径,例如 /abc/a/b/c (5...原创 2020-04-07 16:41:35 · 1765 阅读 · 0 评论 -
vue实战精华(二)——模版字符串 / 音频路径预加载
1.提出问题最近有一个新需求,第一,播放音频前先把它的音频路径src预加载;第二,点击播放按钮时实现连续播放,一首播完接着第二首播放。2.解决思路第一个需求里面有两种方法,一是在页面结构上写六个audio标签(它的id不同),然后让他们的路径循环,再逐个播放;二是写一个audio标签,让它渲染出六个audio并带上不同的src路径(这里考虑到如果是id的话,每个audio应是不同的!),通过...原创 2020-04-07 12:47:19 · 1021 阅读 · 0 评论 -
vue实战精华(一)——事件绑定的函数名delete无效
1.发现问题今天在敲小demo的时候,用sublime编译器中写vue,其中有一个功能是实现页面数据的删除操作。于是乎,我就@click='delete',把这个方法名随手写成delete了,在我根据要求写完,却发现没有实现删除啊,点击它不起作用。我就仔细检查了一下我的代码,重点是不执行它控制台也不报错啊,这可愁死我了。然后我在这个函数内业务逻辑的最前面和最后面都打印了console.log(...原创 2020-04-02 18:40:06 · 1307 阅读 · 2 评论 -
vue基础知识(八)——过滤器
过滤器过滤器的作用是什么?格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等自定义过滤器Vue.filter('过滤器名称',function(value){ // 过滤器的业务使用})过滤器的使用<div>{{ msg | upper }}</div><div>{{ msg | upper ...原创 2020-04-01 19:07:15 · 101 阅读 · 0 评论 -
vue基础知识(七)——侦听器
一.侦听器侦听器的应用场景数据变化时执行异步或开销较大的操作侦听器的用法侦听器watch和计算属性computed有点像,在下述中使用侦听器,当改变input框中的值时,div里面显示的值才会发生相应变化。注意:watch中方法名称要和data中属性名称一致!template中: <input type="text" v-model='firstNa...原创 2020-04-01 16:27:04 · 333 阅读 · 0 评论 -
vue基础知识(六)——表单
1. input文本框input中只需要直接使用v-model就可以了<input type="text" v-model="word">data中: word:'哈哈,是我丫'2. textareatextarea中使用和input类似,用v-model,不过文字内容不可以直接写在中间(vue中不被允许这样做!)<textarea v-model=...原创 2020-04-01 12:08:55 · 204 阅读 · 0 评论 -
vue基础知识(二)——事件修饰符
事件修饰符1.vue中提供了一些事件修饰符,其中比较典型的是.stop和.prevent修饰符.stop阻止冒泡(防止里面的类似点击事件同时触发了外面包裹的标签的点击事件)<a @click.stop="handle"></a>.prevent阻止默认行为(防止类似于a链接上在进行如点击事件时又执行默认跳转行为)<a @click.prevent=...原创 2020-04-01 10:37:03 · 181 阅读 · 0 评论 -
vue基础知识(一)——事件函数参数传递
事件绑定1.事件函数的调用方式直接绑定函数名称<button @click='say'></button>调用函数<button @click='say()'></button>2.事件函数参数传递如果我们绑定的事件函数需要传参的话,通常使用的是直接调用的say()方式。普通参数和事件对象<button @click='sa...原创 2020-04-01 10:09:01 · 3422 阅读 · 1 评论 -
vue项目——vue中使用animate.css
1.安装npm install animate.css --save2.引入使用2.1. 全局引入使用import animate from 'animate.css'Vue.use(animate)2.2.局部引入使用(比较推荐这种方式)<style lang="scss" scoped> @import '../../node_modules/animate...原创 2019-12-02 11:22:13 · 439 阅读 · 0 评论 -
vue项目——利用vue-cli3构建的项目打包上线
1.vue-cli3打包上线在项目完成得差不多得时候,就可以开始打包部署了。通常执行命令npm run build就可以完成打包,项目中生成一个dist文件夹。这个dist文件夹里面的东西就是我们前端的所有东西了。2.vue-cli3打包报错console.log()查阅资料发现,项目在编译打包上生产环境的时候是不能有console.log()信息打印输出的,但是我们在开发环境有时候调试代码...原创 2019-11-18 15:01:23 · 2226 阅读 · 0 评论 -
vue项目——双向数据绑定原理/Object.defineProperty()函数
1.Object.defineProperty()函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue双向数据绑定原理</title></head><body> <i...原创 2019-11-27 18:52:32 · 119 阅读 · 1 评论 -
vue项目——自定义全局消息框组件
1.发现问题在进行移动端适配的时候,为了在各个型号的设备上能够更好的提现结构排版,决定采用rem布局。采用rem布局的时候html的字体font-size是有一个标准的。我这边用的是750px的设计稿,就采用1rem = 100px。在使用的过程中会用到一些第三方UI组件,而第三方UI组件是以px单位为标准的。使用时发现:本来应该细长的提示语句变得很大!最后发现可能是因为这个...原创 2019-11-21 17:54:05 · 740 阅读 · 1 评论