[置顶] 31.性能优化
摘要： 首页加载很慢的原因： 1. 由于vendor.js和app.css较大，VUE等主流的单页面框架都是js渲染html body的，所以必须等到vendor.js和app.css加载完成后完整的界面才会显示。 2. 单页面首次会把所有界面和接口都加载出来，会有多次的请求和响应，数据不能马上加载，二者相 阅读全文
posted @ 2023-07-06 16:13 cjl2019 阅读(21) 评论(0) 推荐(0) 编辑
[置顶] 26.父组件接口慢导致子组件渲染不成功？
摘要： 方案：可以用watch监听meta，在监听里面调用接口。这样就保证父组件传过来的值一定能接收到，无论接口的快慢。 步骤一：父组件 <template> <div> <zi-jian :meta='meta'></zijian> //绑定参数:meta </div> </template> <scri 阅读全文
posted @ 2023-07-06 15:51 cjl2019 阅读(64) 评论(0) 推荐(0) 编辑
[置顶] 11.数组：Array
摘要： 1. 数组的5种遍历： （1）forEach()--返回永远是undefind: let total=null; let arr=[10,20,30]; let result=arr.forEach(item=>{ total+=item; return item+5; }) console.log 阅读全文
posted @ 2023-07-06 15:10 cjl2019 阅读(17) 评论(0) 推荐(0) 编辑
[置顶] 8.事件：Event
摘要： 1.常用事件 //语法：on事件名='函数名' 或 @事件名='函数名' <div ondblclick="myChar">双击</div> //@dblclick="myChar" <div onmouseover="myChar">鼠标被移到某个元素上</div> <input type="te 阅读全文
posted @ 2022-08-24 19:22 cjl2019 阅读(15) 评论(0) 推荐(0) 编辑
[置顶] 7.获取元素：DOM
摘要： 1.获取元素 <script type="text/javascript"> //1.id选择器 var re=document.getElementById('id1'); //2.class选择器 var re=document.getElementsByClassName('class1'); 阅读全文
posted @ 2022-08-24 19:10 cjl2019 阅读(4) 评论(0) 推荐(0) 编辑
[置顶] 6.浏览器对象：BOM
摘要： 1.window对象：（是浏览器窗口对文档提供的一个现实的容器，代表打开的浏览器窗口。调用方法是window.属性 或 window.方法，也可以省略window） （1）属性 window.innerWidth; //返回窗口文档显示区的宽度 （输出：1920） window.innerHeigh 阅读全文
posted @ 2022-08-24 19:05 cjl2019 阅读(10) 评论(0) 推荐(0) 编辑
[置顶] 6.表格
摘要： （1）标签： · caption标签：是表的说明· colgroup标签：是组合列，必须放在caption之后，thead之前· tr标签--行、th--标题、td--单元格 （2）属性：· cellpadding属性--内边距、cellspacing属性--外边距· colspan属性--合并列、 阅读全文
posted @ 2022-08-23 19:42 cjl2019 阅读(31) 评论(0) 推荐(0) 编辑
[置顶] 5.列表
摘要： 1.无序列表 · type属性：none--无标记、disc--实心圆、circle--空心圆、square--实心方块· list-style-position：设置列表项标志的位置 outside默认，inside标志在列表内· list-style-image： 将图像设置为列表项标志 lis 阅读全文
posted @ 2022-08-23 19:38 cjl2019 阅读(49) 评论(0) 推荐(0) 编辑
[置顶] 9.数据:vuex
摘要： 步骤一：输入npm install vuex --save 步骤二：main.js import store from './store/store' //引入 new Vue({ el: "#app", router, components: { App }, template: "<App/>" 阅读全文
posted @ 2021-03-16 23:00 cjl2019 阅读(46) 评论(0) 推荐(0) 编辑
[置顶] 5.iconfont制作图标
摘要： 1.直接使用ElementUI内置图标库 <template> <i class="el-icon-search"></i> //常规 <el-button icon="el-icon-search"></el-button> //按钮 <el-input suffix-icon="el-icon- 阅读全文
posted @ 2021-03-16 22:45 cjl2019 阅读(67) 评论(0) 推荐(0) 编辑
[置顶] 8.路由:vue-router
摘要： 1.安装路由插件 步骤一：输入npm i vue-router -S 步骤二：main.js import Vue from 'vue'; import App from "./App"; import router from "./router"; //引入src/router/index.js 阅读全文
posted @ 2021-03-16 21:46 cjl2019 阅读(46) 评论(0) 推荐(0) 编辑
[置顶] 7.组件:component
摘要： 1.父子传值（props） //1.父组件（冒号传值） <template> <div> <zi-jian :msg1="msg"></zi-jian> </div> </template> <script> import ZiJian from './ZiJian' export default{ 阅读全文
posted @ 2021-03-16 21:40 cjl2019 阅读(66) 评论(0) 推荐(0) 编辑
[置顶] 2.Vue定义&优点
摘要： 1.vue简介 2.vue的数据驱动--MVVM模式 M：model数据模型，负责数据存储；V：view视图，负责页面的显示；VM：view model，负责业务处理。对数据进行加工，之后交给视图； 3.vue的优点 4.代码风格 1）组件名要为多个单词： · 这样做可以避免跟现有的及未来的html 阅读全文
posted @ 2021-03-16 20:48 cjl2019 阅读(43) 评论(0) 推荐(0) 编辑
[置顶] 6.盒模型：margin/padding/border/box-sizing
摘要： (1) margin/padding：外边距/内边距 · margin-top/padding-top · margin-right/padding-right · margin-bottom/padding-bottom · margin-left/padding-left margin:* 同时 阅读全文
posted @ 2019-10-15 11:36 cjl2019 阅读(127) 评论(0) 推荐(0) 编辑
[置顶] 2.常见插件及使用
摘要： 1.安装sass预处理器 步骤一：git bash here中输入：npm install -g sass 步骤二：如果报错可能是因为版本不对，可以进行如下操作： npm uninstall --save sass-loader /* 卸载sass-loader */ npm i -D sass-l 阅读全文
posted @ 2019-10-10 17:10 cjl2019 阅读(488) 评论(0) 推荐(0) 编辑
[置顶] 1.基础工具
摘要： 1.sublime 步骤一：sublime下载：（百度网盘） 步骤二：插件下载：快捷键ctr+shift+p -> 输入install package -> 输入要用的插件名（如open in browser）-> 点击下载； 步骤三：对插件的快捷键设置：首选项 -> 按键绑定用户 -> 输入{"k 阅读全文
posted @ 2019-10-09 10:34 cjl2019 阅读(107) 评论(0) 推荐(0) 编辑
2023年7月6日
2.sass
摘要： 1. 变量：$ //1.常规 $myColor:red; .first{ color:$myColor; } //2.局部作用域 .second{ $myColor:red; color:$myColor; } //3.全局作用域 .third{ $myColor:red !global; colo 阅读全文
posted @ 2023-07-06 16:46 cjl2019 阅读(13) 评论(0) 推荐(0) 编辑
1.ES6
摘要： 1.let ①let不存在预解析。--即使用前一定要定义。 ②let声明的变量不允许在相同作用域内重复声明 ③ES6引入块级作用域。--即let在块内部中定义，只能在块内部使用 2.const ①const不存在预解析。--即使用前一定要定义。 ②const不能重复声明。且声明后必须赋值。 ③如果声 阅读全文
posted @ 2023-07-06 16:45 cjl2019 阅读(9) 评论(0) 推荐(0) 编辑
13.y轴加百分号
摘要： yAxis:{ name:'单位：百分比', //y轴单位 // min: 0, // minInterval: 1, max:100, interval:25, axisLabel: { fontSize: 12, fontFamily: "Bebas", color: "#BDD8FB", fo 阅读全文
posted @ 2023-07-06 16:35 cjl2019 阅读(41) 评论(0) 推荐(0) 编辑
12.x轴加滚动条
摘要： chartOption: { dataZoom: [ { type: "slider", //给x轴设置滚动条 show: true, //false直接隐藏图形 xAxisIndex: [0], bottom: 0, height: 10, showDetail: false, startValu 阅读全文
posted @ 2023-07-06 16:35 cjl2019 阅读(31) 评论(0) 推荐(0) 编辑
11.x轴超长隐藏，鼠标移上去显示全部
摘要： 注意：要安装jQuery（看 -- vue项目实战中 -- 常见插件及使用） //步骤一：x轴添加triggerEvent:true 和 xAxis隐藏过长的文字 xAxis: { type: "category", triggerEvent: true, //添加triggerEvent:true 阅读全文
posted @ 2023-07-06 16:34 cjl2019 阅读(67) 评论(0) 推荐(0) 编辑
10.x轴字符串换行
摘要： xAxis: { type: "category", axisLine: { lineStyle: { color: "#BDD8FB", fontSize: 12 } }, axisLabel: { color: "#BDD8FB", fontSize: 12, formatter:functio 阅读全文
posted @ 2023-07-06 16:31 cjl2019 阅读(24) 评论(0) 推荐(0) 编辑
9.tooltip格式化
摘要： //1.当params是一维数组时 formatter: params => { return ( `${params.seriesName}<br/>` + `<span style="display:inline-block;margin-right:5px;border-radius:10px 阅读全文
posted @ 2023-07-06 16:31 cjl2019 阅读(72) 评论(0) 推荐(0) 编辑
8.legend格式化
摘要： <script> const getname = ["时长异常", "时长正常", "无时长"]; //初始化getname const getNum = [0, 0, 0]; //初始化getNum export default{ data(){ return{ chartOption:{ leg 阅读全文
posted @ 2023-07-06 16:30 cjl2019 阅读(20) 评论(0) 推荐(0) 编辑
7.水波球
摘要： 下载插件：npm install echarts-liquidfill --save 引入插件：import 'echarts-liquidfill/src/liquidFill.js'; <template> <div> <div ref="chart1" class="chart"></div> 阅读全文
posted @ 2023-07-06 16:29 cjl2019 阅读(33) 评论(0) 推荐(0) 编辑
6.雷达图
摘要： <template> <div> <div ref="chart1" class="chart"></div> </div> </template> <script> import * as echarts from "echarts"; export default { data() { retu 阅读全文
posted @ 2023-07-06 16:28 cjl2019 阅读(93) 评论(0) 推荐(0) 编辑
下一页