头部背景图片
小畅童鞋的学习笔记 |
小畅童鞋的学习笔记 |

自定义构建Echarts问题描述

2019-06-15

今天我们来学习一下Echarts,本文主要是总结自定义构建Echarts遇到的问题,跟着我一起来学习吧~

1.使用命令行,创建自己的工程:
1
2
mkdir myProject
cd myProject
2.在 myProject 目录下使用命令行,初始化工程的 npm 环境并安装 echarts(这里前提是您已经安装了 npm):
1
2
npm init
npm install echarts --save

Image1.png

Echarts的学习与使用

2019-06-08

今天我们来学习一下Echarts,ECharts是一个纯JavaScript图表库,底层依赖于轻量级的Canvas类库ZRender,基于BSD开原协议,是一款非常优秀的可视化前端框架,本文基于Vue CLI脚手架,来实现Echarts的引用,跟着我一起来学习吧~

一.引入一个简单的图表

首先npm安装Echarts
1
npm install echarts --save
接下来打开public->src->main.js来引入echarts
1
2
import myCharts from './comm/js/myCharts.js'
Vue.use(myCharts)

flex布局排布

2019-05-25

作为前端必备知识点,flex为我们页面布局提供了灵活性,今天我们来学一下flex布局吧~

一、Flex布局是什么?

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局,行内元素也可以使用Flex布局, Webkit内核的浏览器,必须加上-webkit前缀。

1
2
3
.box{    
display: -webkit-flex; /* Safari */    
display: flex;}注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

二、Flex布局基本概念

采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
Image1.png

  • 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
  • 主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;
  • 交叉轴的开始位置叫做cross start,结束位置叫做cross end。
  • 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

VScode快捷键及常用插件

2019-05-21
VScode快捷键:

https://blog.csdn.net/hypon2016/article/details/80831266

VScode快捷键:
  • Auto Close Tag :自动闭合 HTML/XML 标签
  • Auto Rename Tag :自动重命名成对的 HTML/XML 标签
  • Babel ES6/ES7 : 添加 ES6/ES7 语法的颜色提醒
  • Canvas Snippets :Canvas 代码片段提示
  • Bracket Pair Colorizer :多层括号颜色匹配
  • CSS peek :可直接在 HTML 中查看 class、id 对应的 CSS 样式,并可以直接跳转
  • Document This : JSDoc comments for both TypeScript and JavaScript
  • filesize :编辑器左下角显示文件大小
  • git history、gitlens : git 使用必备,能够图形化显示 git 历史、编辑人物等
  • HTML CSS support : HTML、CSS 快捷操作
  • HTML Snippets : HTML 代码片段
  • Htmltagwrap : 选中代码快速增加 html 标签 - alt + w
  • Image Preview : 代码中直接显示图片缩略图
  • Import Cost :显示 import、require 引用的包的大小

如何禁止chrome浏览器http自动转成https【转】

2019-05-21

转载自:https://www.cnblogs.com/zhanglianghhh/p/9706852.html

Chrome浏览器阻止跨域配置:

–disable-web-security –user-data-dir=C:\ChromeDebug

自动跳转原因

将HTTP请求自动转为HTTPS请求是浏览器的默认策略。当浏览器访问过某个HTTPS的网站后,再访问该网站时,一切HTTP请求会自动转为HTTPS请求。
HTTP转为HTTPS的主要原因是为了安全。

Chrome 浏览器

1. 地址栏中输入 chrome://net-internals/#hsts
2. 在 Delete domain security policies 中输入项目的域名,并 Delete 删除
3. 可以在 Query domain 测试是否删除成功

这里如果还是不行, 请清除浏览器缓存!
参考文章 :如何关闭浏览器的HSTS功能

Safari 浏览器

1. 完全关闭 Safari
2. 删除 ~/Library/Cookies/HSTS.plist 这个文件
3. 重新打开 Safari 即可
4. 极少数情况下,需要重启系统

Opera 浏览器

和 Chrome 方法一样Firefox 浏览器

1. 关闭所有已打开的页面
2. 清空历史记录和缓存
3. 地址栏输入 about:permissions
4. 搜索项目域名,并点击 Forget About This Site

Vue.js学习笔记Day5-5.08

2019-05-08

Vue.js学习笔记Day5-5.08

今日主要学习内容:

  • 复习父子组件传值问题;
  • watch、computed和methods之间的对比;
  • nrm的安装使用;
  • Webpack的概念;
  • 使用vue实例的render方法渲染组件;
  • 在普通页面中使用render函数渲染组件;
  • export default 和 export 使用方式;
  • 在vue组件页面中,集成vue-router路由模块;
  • 组件中css作用域问题(scoped属性)

开始Vue框架的学习吧~

Vue.js学习笔记Day4-5.06

2019-05-06

Vue.js学习笔记Day4-5.06

今日主要学习内容:

  • 使父组件向子组件传值;
  • 子组件向父组件传值;
  • 评论列表案例;
  • 使用 this.$refs 来获取元素和组件;
  • 什么是路由;
  • 设置路由高亮;
  • 设置路由高亮设置路由切换动效;
  • 在路由规则中定义参数;
  • 使用 children 属性实现路由嵌套;
  • 命名视图实现经典布局;

开始Vue框架的学习吧~

Vue.js学习笔记Day3-4.29

2019-04-29

Vue.js学习笔记Day3-4.29

今日主要学习内容:

  • 使用Vue-resource实现品牌的增删查功能;
  • Vue中的动画;
    1. 使用过渡类名实现动画
    2. 使用第三方 CSS 动画库
    3. 使用动画钩子函数
    4. v-for 的列表过渡
  • 使用定义Vue组件;
    1. 什么是组件
    2. 组件化和模块化的不同
    3. 全局组件定义的三种方式
    4. 组件中展示数据和响应事件
    5. 使用components属性定义局部子组件
    6. 两种切换组件方法

开始和我一起Vue框架的学习吧~

Vue.js学习笔记Day2-4.24

2019-04-24

Vue.js学习笔记Day2-4.24

今日主要学习内容:

  • 品牌列表案例;
  • 全局过滤器和私有过滤器;
  • 自定义按键修饰符;
  • 自定义指令;
  • Vue实例的生命周期;
  • vue-resource 实现 get, post, jsonp请求;
  • 配置本地数据库和数据接口API;

开始Vue框架的学习吧~

Vue.js学习笔记Day1-4.22

2019-04-22

Vue.js学习笔记Day1-4.22

今日主要学习内容:

  • 三大主流框架的区别;
  • 框架和库的区别;
  • MVC和MVVM的区别;
  • Vue的基本代码结构、插值表达式、v-cloakv-textv-htmlv-bindv-on
  • 走马灯效果制作;
  • 事件修饰符(.stop.prevent.capture.self.once);
  • v-model和实现表单元素的双向数据绑定;
  • Vue中使用样式;
  • v-for指令和key属性;
  • v-ifv-show的使用和特点

今天开始和我一起Vue框架的学习吧~

Lililich's Blog