- 博客(38)
- 收藏
- 关注
RSS订阅原创 webpack系列之优化策略
1、打包速度优化1.1、速度监控插件—speedMeasureWebpackPluginspeed-measure-webpack-plugin是一款能检测Loader和Plugin耗时的插件，具体的用法就不再阐述了，可以去https://www.npmjs.com/package/speed-measure-webpack-plugin这看看1.2、减小webpack搜索文件范围1.2.1、Loader中的配置我们通常使用Loader去加载webpack不能识别的文件，例如.css .vue文件
2020-05-19 23:48:24
702
原创 浅谈Webpack工作机制
开始阶段1、从命令行输出命令之后，先去node_modules下的.bin找到webpack相关的执行文件.cmd（查看源码我们可以直到在webpack中的packags.json中定义了bin字段，用于指定脚本执行的文件）这一步将得到命令行输入的参数对象2、根据上一步得到的参数，构建全局唯一的compiler对象，实例化此对象3、为compiler对象加载插件配置（插件在此执行，xxx-plugin.apply(compiler)，compiler实例化对象是参数），加载完成之后，启动编译com
2020-05-11 00:06:57
482
原创 webpack系列之loader
loader是什么？webpack默认只支持解析打包.js文件和.json文件，当我们在项目中使用其他资源时，会失败的，所以为了能够解析多种类型资源，webpack提出了为资源设置loader的概念loader的使用：webpack.config.js项目中module。exports={ ..... module:{ rules:[ //rules是一个数组，一个项目可以放置多个loader { test:'/\.css$/', //正则匹配 .css文件时使
2020-05-09 00:00:08
337
原创 Vuex的基本使用
Vuex是基于vue的一个组件状态管理工具，它管理着vue实例上的所有组件状态，组件间的 相互通信，可以通过vuex来实现，而不用靠父子组件通信了。 通常我们要想两个组件之间通信，一般有两种方式。子组件传输数据到父组件----通过this.emit()调用父组件的方法后，传参给父组件。this.emit()调用父组件的方法后，传参给父组件。 this.emit()调用父组件的方法...
2019-09-03 10:41:02
150
原创 Vue建立的工程中组件中复用组件
在Vue建立的工程中通常是以组件为单位，进行模块开发的，比如音乐组件，图片组件等。 现在有一个需求是在音乐界面实现，音乐图片的轮播图，在图片界面实现图片的轮播图。 那么我们可以将轮播图这一个组件剥离开，设定成一个单独的组件，在音乐组件使用轮播组件，图片组件中也使用轮播组件。1、 先建立轮播组件：.lunbotu.vue<template><!-- 轮播...
2019-08-13 23:04:23
455
原创 Vue-router 编写路由跳转的两种方式
vue-router是一个基于vue的路由管理工具，这是官网https://router.vuejs.org/zh/guide/essentials/navigation.html这篇就不过多介绍vue-router了，https://blog.csdn.net/qq_41889956/article/details/95197292这是我的vue-router的基本使用介绍。我们都知...
2019-08-11 22:10:30
1406
原创 Vue中data的this指向问题
最近在做自己的项目时遇到一个问题：export default { data(){ return{ id:this.$route.params.id, musicMessage:[], musiclist:{ title:null, ...
2019-08-11 16:44:21
16896
4
原创 ES6语法之promise
promise是ES6推出的一个新的对象，专门为了解决回调地狱的问题的。 回调函数：作为函数参数的函数，在函数执行完毕之后再执行，有同步回调和异步回调两种，同步回调：主函数等待回调函数执行完毕之后再执行，异步回调：主函数无需等到回调函数完成可继续执行，此时的回调函数被放置任务队列中。 我们都知道JS是单线程运行的，当遇到异步的任务时，它会将异步任务放置到队列中去，不会执...
2019-08-04 14:33:48
360
原创 Vue项目上使用MUI
MUI是一款轻量级的APPUI样式框架，官网地址：http://dev.dcloud.net.cn/mui/，Github：https://github.com/dcloudio/mui，它跟Bootstrap一样，即拿即用。但是需要注意的是，它在npm下是不支持安装的，所以要想在项目中使用它，我们就需要在Gihub上下载，之后将它的dist文件夹下的文件放在项目的第三方引用包文件夹下：....
2019-07-26 15:32:32
4886
1
原创 Vue项目下使用mint-ui
Mint-UI是一款基于Vue的移动UI组件库，在Vue的项目中可以使用它自定义的组件来实现需求。不过遗憾的是，这个UI框架已经一年多没有更新了，官网也挂了，不过好在腾讯云上还有相关的开发文档https://cloud.tencent.com/developer/section/14899791、安装 Miny-UI是在Vue项目中使用的，在webpack下安装： cnpm ...
2019-07-26 11:49:26
260
原创 webpack的babel设置
众所周知webpack打包能够处理一些高级的ES语法，比如我们使用了ES6中的import，那么我们只需要打包这个.js文件，然后运行就行了，但是这么做有一个缺点，不能够解析更高级的语法，只能解析ES6低级的语法，例如class static语法糖是不会被解析的。 我们可以在webpack中使用Babel来解决这个问题。1、babel是什么？babel是一个JavaScript的...
2019-07-18 14:56:55
267
原创 webpack---解决url文件加载的问题
现在有这么一个需求，就是在css中要给一个div设置一个背景图片，我们使用了style-loader和css-loader加载器，成功加载了css，那么在css中设置的div{background:url('./背景.png')}能否也被css-loader加载出来呢？？ 答案是不能，因为css-loader只能匹配.css的文件，所以我们就需要用到url-loader，1、url-lo...
2019-07-17 20:49:23
241
原创 使用webpack实现css文件的加载
我们都知道webpack'是一个依赖管理工具，使用webpack构建的项目，依赖都被管理得好好的，我们已经知道.js的文件可以使用webpack打包，或者使用webpack-dev-server自动打包进行管理，那么.css样式文件该怎么管理呢？？ 我们可以让.js文件引用.css文件，这样就能实现一次请求而获得所需要的资源了，我们可以创建一个main.js文件，使用import 'in...
2019-07-17 16:22:03
724
原创 html-webpack-plugin插件实现在内存中生成index.html
我们使用webpack-dev-server能够实现自动打包编译，生成的bundle.js在内存中，不被用户看到，还要设置script的src标签为 /bundle.js 才能实现自动打包编译。那么我们能否不用自动配置script的src属性呢？ 使用webpack的插件，html-webpack-plugin能够实现在内存中创建index.html，并且不用设置script标签，这个插...
2019-07-17 15:03:52
1652
原创 webpack-dev-server自动打包编译的使用
webpack-dev-server是什么？ webpack-dev-server是基于webpack的一项本地环境搭建工具，它会默认创建一个server来实现你需要的功能。webpack-dev-server能做什么？ webpack-dev-server能解决跨域问题，实现自动打包编译文件，解放双手！webpack-dev-server怎么用？？ 1、安装 ...
2019-07-16 19:26:07
654
转载 Vue学习日记之watch methods computed之间的区别
我们都知道在Vue中，有三个属性是能够自定义function的，一个是watch、一个是methods、一个是computed，但是着三者之间有什么区别呢？在什么情况下使用呢？ `computed`属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用； `methods`方法表示一个具体的操作，主要书写业务逻辑； `watch`一个对象，键是需...
2019-07-13 19:19:35
96
原创 Vue学习日记之计算属性
在Vue中存在着普通属性和计算属性，普通属性指的就是那些在data中定义的，直接使用的属性。 而计算属性指的是： 由computed:{...}定义的 它是一个函数，必须显式的return 像普通属性一样去使用 当function中的data值发生改变时，计算属性才会调用function，此时的计算属性值已经缓存下来 只是引用计算属性，但是da...
2019-07-13 19:09:23
117
原创 Vue学习日记之watch的使用
当我们在vue实例中需要监听data变化就需要用到watch了。举个例子，当我们需要监听在输入框的值，使输入框的旧值和新值都显示出来，就需要watch了。watch:{'data中的值':function fn(newval,oldval){....}}当监听的data值发生变化之后触发回调函数，这个回调函数有两个参数，newval----新的值，oldval----旧的值。&...
2019-07-13 17:33:01
111
原创 Vue学习日记之vue-router
1、Vue-router的基本使用 创建一个vue-router对象routerObj 在这个对象中配置对象，使用routes创建一组路由规则，{path:"url",component:组件名} 编写匹配该url后要展示的组件对象，这个组件对象必须是一个全局对象，无需注册 在Vue实例中添加router对象，形式为：router:'routerObj' ...
2019-07-13 16:50:21
262
原创 JS基本：浅拷贝和深拷贝
/* * 基本类型保存在栈内存，引用类型保存在堆内存，堆比栈大（适合存放大数据），栈比堆速度快（适合查找） * * 基本类型：undefined null Number String Boolean * 引用类型:Object * * 基本类型赋值：a=3;b=a;b=4;console.log(a,b) //3,4 * 引用类型赋值：在赋值时，只是将数据的地址赋...
2019-07-10 16:52:22
74
原创 Vue学习日记之获取DOM节点
我们可以使用ref来实现获取DOM节点 我们在需要获取的DOM节点上添加属性，ref='id'。 使用this.$refs.id来获取DOM对象 <div id="app"> <h3 ref="myh3">这是h3的内容</h3> <input type="button" value="点击" @click="...
2019-07-05 18:09:18
198
原创 Vue学习日记之组件基础
1、组件的概念 组件是Vue中一个非常重要的概念，相当的重要，每个组件实现特定的功能。 组件可以看作是可复用的Vue实例。2、组件的注册 在Vue中，组件分为全局组件和局部组件，和filter过滤器一样。 全局组件作用于全局 局部组件作用于局部，具体的来说是在该vue实例下的div中使用 2.1、全局组件的注册 在Vue中使用Vue.comp...
2019-07-05 00:09:32
127
原创 Vue小项目之品牌管理案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue.js测试</title> <script src="lib/vue-2.4.0.js"></script> <lin...
2019-06-23 23:33:52
344
原创 Vue学习日记之vue实例生命周期
在vue实例开始创建、运行到销毁的过程，就是vue的生命周期 vue生命周期中发生（存在）的事件（这些事件可以用函数来表示），我们称之为生命周期钩子。 即：生命周期钩子=生命周期函数=生命周期事件。 我们看vue官网中存在着这么一张图片，详细的描述了vue的生命周期1、开始阶段：new Vue({})---------------------开始创建vu...
2019-06-13 12:03:05
988
4
原创 Vue学习日记之自定义指令
我们都知道在Vue中存在了很多个指令，如v-bind、v-for等，实现了一些特定的功能，此时头疼的事情来了，如果这些指令里没有我们需要的功能，那么我们只能通过自己来编写原生JS获取目标节点来实现，但是在Vue中不提倡我们这样做，那我们该怎么办呢？Vue给我们提供了一个很有意思的功能，自己编写指令来实现自己需要的功能。1、全局指令 同全局过滤器一样，我们使用全局Vue来定义全局指...
2019-06-10 14:37:19
149
原创 Vue学习日记之自定义按键修饰符
1、Vue中的按键修饰符在Vue中存在着修饰符，而按键修饰符又是其中的一种，在Vue的官方文档中有9种按键修饰符。.enter----回车按下 .tab----tab键按下 .delete(捕获“删除”和“退格”键) .esc-----ESC键按下 .space---空格键按下 .up------上 .down----下 .left----左 .right---右举个例...
2019-06-05 17:07:35
422
原创 Vue学习日记之过滤器
过滤器是什么？相信稍微有点编程基础的人都知道，过滤器是指对某些数据或内容，经过一段处理之后再输出显示。 同样的再Vue中也存在着过滤器。在Vue中过滤器分为两种类型，一种为公有过滤器，另一种为私有过滤器，过滤器只能在两个地方使用，一种是插值表达式{{}}，一种是v-bind式中，使用管道符"|"与输入的数据分割。1、公有过滤器 公有过滤器指的是，它由Vue定义，可...
2019-06-05 13:51:27
121
原创 Vue学习日记之v-if和v-show的使用
v-if和v-show使用效果都是一样的，根据传入的值，隐藏或显示内容。 不同的是v-if可以搭配v-else使用，当传入v-if的值为true时，v-if显示，否则v-else显示。看个例子<div id="app"> <input type="button" :value="toggle" @click="add"> <p v-if...
2019-06-03 02:04:57
262
原创 Vue学习日记之v-for指令的学习
在vue中我们可以使用一个指令来迭代数组、对象和数字。这个指令就是强大的v-for使用v-for最重要的是要搭配“(item,key)in list”的特殊语法，list是需要迭代的对象，item是迭代的匀数组元素别名（你也可以理解为迭代的每一项元素），在data中定义，在普通数组和对象数组中，key是索引。再配合插值表达式来输出结果。 1 迭代普通数组废话不多说，直接...
2019-06-02 20:48:15
573
原创 Vue学习日记之class样式设置
我们一般使用样式的时候，有三种方法。外联样式：建立一个外部的CSS样式表，通过link标签进行引入。 内联样式：在html中的标签style中编写。 行内样式：在标签的style属性中编写。我们都知道，这样编写的样式是无法运用在表达式上和对象上的。在Vue中，我们可以将样式名作为变量使用，也就是可以将它应用到表达式和对象中。1 外/内部样式1.1 作为数组进行引用...
2019-05-31 16:47:51
411
原创 Vue学习日记之v-model的使用
我们之前有学习过v-bind指令，这个指令是将html元素的属性绑定到vue实例中，通过这个我们可以实现将data中的属性添加到html元素中显示，例如： <div id="app" > <input v-bind:value="msg" type="text"> </div><script> var ...
2019-05-31 14:22:50
175
原创 Vue学习日记之事件修饰符
在实际的编程中，我们常常会实现某些常用的功能，并为此编写函数，但是在vue中，定义了一系列的事件修饰符，来让我们不需要编写额外的代码，实现特定的功能。 事件修饰符由.开头的指令后缀 实现某一功能 在html元素中使用 常常搭配v-on等基本指令来实现相关的功能常见的事件修饰符有：.stop---------阻止事件的冒泡 .prevent-----阻止默认行为，例如&...
2019-05-30 12:52:11
92
原创 Vue学习日记之基本指令v-on
众所周知在JavaScript中要实现，用户和网站进行交互的行为，大部分是要通过事件来实现的。回忆一下，在原生的JavaScript中存在着DOM0级事件处理程序和DOM2级事件处理程序。 DOM0级事件处理程序，首先要获取发生此事件的对象，再对事件进行处理，例如：<!--DOM0级事件处理程序--><div> <button ty...
2019-04-27 21:15:40
166
原创 Vue学习日记之三条文本指令
1、文本暴露问题 在Vue实例中我们通过{{message}}向页面传输数据，但是有个问题是，在网速差的情况下，会暴露信息给用户，当网页加载完毕之后才会出现我们想要的信息。它不仅影响了用户体验，还暴露了我们的程序，是一种安全隐患。2、解决办法 我们有两种方法解决，一种是我们使用Vue的指令v-clocak可以解决，另一种是使用v-text指令2.2.1 v-clo...
2019-04-14 21:27:03
172
原创 Vue学习日记之指令概述
1、什么是指令呢？指令是在vue中，以v-开头的作用于HTML元素的命令，它们在HTML元素中使用，完成了某一些动作或者是功能，表现除了不一样的功能，配合我们的vue实例，将达到惊人的效果和实用性。我们可以将指令看成是HTML元素的特殊属性（特性）。2、指令类型 在vue中指令又分为已定义指令和自定义指令。 已定义指令是vue中已经定义好的指令，拿来就能用，例如：v-tex...
2019-04-14 20:00:27
84
原创 Vue学习日记之MVVM与vue实例
1、MVVM简述 首先我们要简单了解，MVVM的概念，关于MVVM，它是一个前端的框架概念，是从后端的MVC的一个变种，要注意到MVVM是由Model+View+ViewModel组成，MVC是由Model+View+Controll组成，这两者的M不同，MVVM中的M是前端的数据，MVC中的M是数据处理层，直接与数据库交接。要想得到更多的MVVM概念可参看我的MVVM博客https://...
2019-04-14 16:02:32
225
原创 Vue学习日记之MVC与MVVM
1、为何要了解MVC与MVVM模式 首先，MVC是后端的分层处理概念，M指的是Model数据处理层，V指的是view视图层，C指的是controll业务逻辑处理层，MVC的出现使得一个项目的开发变得更加简便和清晰，降低了代码之间的耦合程度，项目之间的分功也更加的明确，这时你可能要问了，我们是在学习vue，而且我们是前端工程师，为什么还要了解MVC呢？ 其实，了解MVC有助于我们学习MV...
2019-03-31 16:55:54
467
原创 Vue框架学习日记之vue概述
1、vue是什么？ 首先我们来看一下官网的介绍，https://cn.vuejs.org/v2/guide/index.html#Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以...
2019-03-02 14:53:50
189
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人