哈哈哈宝-CSDN博客

原创 Vue.js知识点思维导图

Vue.js知识点思维导图Vue.js知识点思维导图Vue基础思维导图Vue进阶思维导图Vue.js知识点思维导图笔者通过对Vue.js官方文档的学习以及工作中的使用，对Vue知识点进行了整理，分为基础部分和进阶部分，后续待笔者水平提高之后再来整理“深入部分”。面向光芒万丈Vue的向日葵????Vue基础思维导图附件：Vue生命周期图Vue进阶思维导图...

2020-06-16 21:40:52 917

原创判断IE浏览器版本（IE10+）

判断IE浏览器版本（IE10+）项目不支持低版本的IE，在登录的时候通过判断浏览器版本，寄语人性化的提示，具体实现如下可以写在在公共函数文件里，到时候直接 import { IEVersion } from ‘xxxx’ 就可以使用了。export function IEVersion () { // 取得浏览器的userAgent字符串 var userAgent = naviga...

2019-11-19 14:00:42 1009

echarts 玫瑰图比例太小显示优化1.效果图2.实现思路3.代码选择了 echarts 做大数据统计，但是由于统计数据的差异太大，数据特别小的时候，使用玫瑰图展示会造成看不清楚扇区的问题，用户体验着实不好！如果使用普通饼图就不会有这种情况发生，但会让项目看着很单调！我从网上找解决方法，关于这个问题的解答实在太少了，一直都没找到，终于，今天想到了合适的方法并解决这个bug！：）具体如下。1....

2019-08-09 16:31:01 7851 2

原创在vue-cli项目中使用ztree，并实现ztree的模糊搜索高亮

vue-cli项目中使用zTree，并实现zTree的模糊搜索高亮文本1.效果图2.创建项目 ztree-search3. 引入zTree4.代码实现5.参考资料网上许多关于zTree模糊搜索高亮文本的都是jq写的，但是笔者有点强迫症很想用vue来实现，不想在vue的项目中写jq代码，所以自己参考别的高手的方法做了修改，具体如下。1.效果图2.创建项目 ztree-search 关于使用...

2019-05-20 12:17:17 3281 7

原创 webpack4+学习笔记：9. CSS样式处理之清除多余样式及自动追加css属性前缀

CSS样式处理之清除多余样式及自动追加css属性前缀1. 清除多余样式（1）安装 purifycss-webpack purify-css golb 插件npm install purifycss-webpack purify-css glob -D查看 package.json 文件（2）webpack.config.js 配置① 我们先看配置前在 css.css 文件中添加多余...

2019-01-21 17:45:22 1459

原创 webpack4+学习笔记：8. CSS样式抽离之 mini-css-extract-plugin 插件

CSS样式抽离之 mini-css-extract-plugin 插件mini-css-extract-plugin 插件是 webpack4+ 版本的，可以直接安装使用。这里只能把所有样式包括css、less都打包到一个css文件 common.css中，然后再 link 进页面。1. 插件安装npm install mini-css-extract-plugin -D查看 packa...

2019-01-21 16:54:17 22024 5

原创 webpack4+学习笔记：7. CSS样式抽离之 extract-text-webpack-plugin 插件

CSS样式抽离之 extract-text-webpack-plugin 插件分析：使用 extract-text-webpack-plugin 插件可以实现样式以css文件的形式 link 到 html 页面中。这里有两种形式，一是 css 和 less 抽离到同一个 css 文件里，二是分开抽离，分别把 css 和 less 放在两个 css 文件中 link 到页面。这里区别于前一节的样...

2019-01-21 16:27:54 2324

原创 webpack4+学习笔记：6. 安装加载器导入CSS样式

安装加载器导入CSS样式加载器style-loader css-loaderless less-loaderstylus stylus-loadernode-sass sass-loader1. 安装这里我就只安装部分加载器，可以根据自己项目的需求自行安装//终端运行安装npm install style-loader css-loader less less-loader -D...

2019-01-21 14:46:41 531

原创 webpack4+学习笔记：5. 热更新与 copy-webpack-plugin 插件

热更新与 copy-webpack-plugin 插件一、热更新修改js代码时禁止整个页面强制刷新1. webpack.config.js 配置let CopyWebpackPlugin = require("copy-webpack-plugin");devServer: { hot: true}plugins: [ new webpack.HotModuleReplac...

2019-01-21 11:48:51 3443

原创 webpack4+学习笔记：4. html-webpack-plugin 插件与 clean-webpack-plugin 插件

html-webpack-plugin 插件与 clean-webpack-plugin 插件一、 html-webpack-plugin 插件作用：将 html 打包到 dist 下可以产生自动引入生产的js1. 安装//终端输入npm install html-webpack-plugin -D查看 package.json 显示已安装成功（2）webpack.config...

2019-01-21 11:15:10 1994

原创 webpack4+学习笔记：3. webpack 手动配置打包之 webpack.config.js 与 webpack-dev-server

webpack 手动配置打包之 webpack.config.js 与 webpack-dev-server1. 在项目的根目录下新建文件 webpack.config.js 文件2. webpack.config.js 配置有以下几种类型（1）单页面入口① index.js 入口页面console.log("Wellcome to webpack4+");② webpack.co...

2019-01-21 10:32:21 2878

原创 webpack4+学习笔记：2. webpack 安装步骤

webpack 安装步骤使用要先安装nodeJs，读者可以自己去nodeJs官网安装，我这里直接从安装 webpack 开始1. 建一个项目我的项目结构如下：section-one 自己取项目名称–dist 文件夹放以后打包好的文件–src 文件夹放自己的代码文件----src-css----src-images----src-js----src-index.html 入...

2019-01-20 18:06:34 343 1

原创 webpack4+学习笔记：1.前言——自学感受

前言自学感受webpack 的学习视频网上真的是应有尽有，但是有一点很重要！！！这是我在学习的过程中遇到的最大的坑！！！要选择最新的 webpack （目前是webpack 4+）版本相对应的视频学习！还有一点！当前的webpack是4+版本，要求装的nodeJs最低是6+版本//查看自己nodeJs版本可以在命令窗口中输入node -v不然你会遇到很多webpack版本和插件版...

2019-01-20 17:30:12 193

原创 vue学习笔记： 8.计算属性-----computed

计算属性-----computed在 computed 中可以定义一些属性,这些属性叫做【计算属性】,计算属性的本质是一个方法, 只不过,我们在使用这些计算属性的时候,只把它们的名称,直接当作属性来使用;并不会把计算属性当作方法去调用.注意:计算属性,在引用的时候,一定不要加 () 去调用,直接把它当作普通属性使用就好了只要计算属性的 function 内部,所用到的任何 data 中...

2019-01-16 18:07:09 123

原创 vue学习笔记：7.4.路由-命名视图实现经典布局

路由-命名视图实现经典布局效果图引入包<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>CSS<style>

2019-01-16 17:06:58 167 3

原创 vue学习笔记：7.3.路由的嵌套

路由的嵌套在路由配置时定义 children 数组，存储子路由引入包<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>代码块<

2019-01-16 16:59:50 118

原创 vue学习笔记：7.2.路由规则中定义参数-query传参与params传参

query传参与params传参1.query传参- - - -this.$route.query&lt;div id="app"&gt; &lt;!-- 如果在路由中,使用查询字符串,给路由传递参数,则不需要修改路由规则的 path 属性 --&gt; &lt;router-link to="/login?id=10&amp;name=z

2019-01-16 16:55:27 353

原创 vue学习笔记：7.1.路由的基本使用

路由的基本使用步骤：1.安装 vue-router 路由模块（引入包）vue.jsvue-router.js&lt;script src="https://unpkg.com/vue/dist/vue.js"&gt;&lt;/script&gt;&lt;script src="https://unpkg.com/vue-router/dist/vue-router

2019-01-16 16:49:28 134

原创 vue学习笔记：6.4.组件案例-评论列表

组件案例-评论列表这里使用的 bootstrap 做布局效果图如下：HTML<div id="app">  <cmt-box @func="locadComments"></cmt-box> <ul class="list-group&qu

2019-01-16 10:27:12 818

原创 vue学习笔记：6.3.父组件与子组件间的传值

父组件与子组件间的传值1.父组件向子组件传值——使用 props传值（1）子组件在 props 中定义属性（parentmsg）接收父组件（msg）的值。（2）父组件在引用子组件的时候，通过属性绑定（v-bind:parentmsg=“msg”）的形式，把需要传递给子组件的数据，以绑定的形式，传递到子组件内部以供使用。<div id="app"> <!-- &lt...

2019-01-16 10:15:25 111

原创 vue学习笔记：6.2.组件的切换方式

组件的切换方式1.使用flag=true/false控制&lt;div id="app"&gt; &lt;div&gt; &lt;input type="button" value="登录" @click="flag=true"&gt;

2019-01-16 09:27:41 104

原创 vue学习笔记：6.1.组件的创建方式

组件的创建方式1.使用 Vue.extend 创建全局组件，Vue.component(“组件名称”, 创建出来的组件模板对象) 给组件注册<div id="app">  <my-com1></my-com1></div>...

2019-01-15 18:06:31 102

原创 vue学习笔记：5.vue-resource的使用

vue-resource的使用详细可查看vue-resource的API，着重看这部分下载vue-resource请点击这里就只做一个例子&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;zh-cn&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta

2019-01-14 17:49:49 96

原创 vue学习笔记：4.vue过渡动画

vue过渡动画1.自定义动画样式（1）CSS样式&lt;style&gt; /* v-enter 【这是一个时间点】是进入之前，元素的起始状态，此时还没有开始进入 */ /* v-leave-to 【这是一个时间点】是动画离开之后，离开的终止状态，此时，元素，动画，已经结束了 */ .v-enter, .v-leave-to{ opacity: 0; trans...

2019-01-14 17:39:21 135

原创 vue学习笔记：3.自定义指令

1.自定义指令——全局指令使用 Vue.directive() 定义全局指令其中：参数1：指令的名称，注意，在定义的时候，指令的前面不需要加 v- 前缀；参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段执行相关的操作。2.自定义指令——私有指令使用directives: {}定义私有指令Html<!-- 注意： Vue中所有的指令，在调用的时候，...

2019-01-09 12:44:27 171

原创 vue学习笔记：2.vue过滤器

vue过滤器1. 过滤器的语法定义： Vue.filter(‘过滤器名称’, function() {});注意：过滤器中的 function ，第一个参数，已经被规定死了，永远都是过滤器管道符前面传递过来的数据2. 过滤器调用时的格式：{{ name | 过滤器名称 }}3.全局过滤器和私有过滤器：-过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，这...

2019-01-09 11:57:35 291

原创 vue学习笔记：1.vue实现简单的跑马灯效果

一个简单的跑马灯效果启发，可以依次扩展更多效果思想分析：利用定时器控制截取字符串长度动态循环显示Html&amp;amp;amp;lt;div id=&amp;amp;quot;app&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;input type=&amp;amp;quot;button&amp;amp;quot; value=&a

2019-01-09 11:34:06 494

原创 vue实现导出excel

vue实现导出excel思想：从后台接口接受到要导出的文件流，然后前端对文件流做处理。这里使用了iView里面的Button组件。不多说，上代码。Html&amp;lt;Button class=&quot;san-import&quot; type=&quot;primary&quot; icon=&quot;ios-paper-outline&quot; @click=&a

2019-01-05 15:57:22 985

weixin_44101052的博客