- 博客(265)
- 资源 (37)
- 收藏
- 关注
RSS订阅原创 Echarts快速上手
Echarts快速上手五个步骤1.引入echarts.js文件2.准备一个呈现图表的盒子3.初始化echarts实例对象4.准备配置项5.将配置项设置给echarts实例对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc
2021-02-06 00:04:56
133
原创 store文件夹的目录结构
store文件夹的目录结构我们之前的store下的index文件很杂乱，不仅有store对象还有模块的对象，我们可以将其抽离开来state不用抽离共有状态还是放到index里mutations抽离import {INCREMENT, DECREMENT} from "./mutations-types"export default { //方法,默认就有一个参数是state [INCREMENT](state) { state.counter++ }, [DECREM
2021-01-27 16:29:19
1297
原创 modules使用详解
modules使用详解首先在唯一的store对象里注册modulesmodules: { a:moduleA}然后创建modulesconst moduleA = { state: { name: 'A' }, mutations: { updateName(state) { state.name = 'qwer' } }, getters: { fullName(state) { return state.nam
2021-01-26 20:43:30
1744
原创 actions的使用详解
actions的使用详解为何要有actions环节我们之前学了vuex状态管理，组件可以引用state，但是不能直接修改state,比如发送操作到actions，在此执行异步操作，然后再提交mutation来修改state.如果没有异步操作可以直接提交到mutation跳过actions步骤。在mutation这里devtools插件可以用来监控state状态改变记录。如果有异步操作不通过actions直接到mutations就会无法捕捉。所以mutaions中的方法必须是同步方法，不能有异步操作
2021-01-26 18:58:33
3918
1
原创 Mutation的响应规则/Mutation的类型常量
Mutation的响应规则（数据的响应式原理）当我们在state里添加属性时，都会被添加到响应式系统中，响应式系统会监听属性的变化，当属性发生变化时，会通知所有页面中用到该属性的地方，让界面发生刷新后添加的属性由于之前没有在store里初始化，我们就无法监听该属性，界面不能刷新。我们如何让新增属性也变成响应式呢之前在数组地方我们学过了vue.set方法，该方法不仅能在数组里使用，这里也可以。 updateInfo(state) { //state.info.name='qcl'
2021-01-25 21:11:39
386
原创 Mutations理解
Mutations理解Mutations状态跟新mutations: { //方法,默认就有一个参数是state increment(state) { state.counter++ }, decrement(state) { state.counter-- }},上边的increment和decrement就是字符串的事件类型后边的紧跟函数就是回调函数,默认state为第一个参数Mutations参数传递addCount(count) { t
2021-01-25 18:57:27
406
原创 state单一状态树的理解/getters理解使用
state单一状态树的理解将所有需要管理的信息放到一个store里管理getters使用详解可以理解为计算属性。假如我们state里保存的还有其他复杂状态//共享状态state: { counter: 100, student:[ {id:110,name:'why',age:18}, {id:112,name:'why2',age:28}, {id:113,name:'why3',age:38}, {id:114,name:'why4',age:48
2021-01-25 17:41:58
562
原创 Vuex概念和作用解析
Vuex概念和作用解析所谓状态可以理解为变量，变量里保存了状态，我们多个组件需要共享一个状态，那么这个状态到底放到哪里合适呢？我们肯定抽离出来为一个单独对象，这就是状态管理管理什么状态呢比如：多界面的登录状态，用户信息，购物车里商品，收藏物品等单页面状态管理<template> <div id="app"> <h2>{{message}}</h2> <h2>{{counter}}</h2>
2021-01-19 20:11:25
143
1
原创 Promise的all方法
Promise的all方法假设有一个需求需要两个网络请求，只得到一个网络请求是无法继续往下的。这时候就需要all方法来判断两个请求是否全部成功<script> Promise.all([ new Promise((resolve, reject) => { setTimeout(() => { resolve('result1') }, 2000) }), new Promise((resolve, reject
2021-01-18 23:02:22
539
原创 Promise的链式调用，简写方式
Promise的链式调用，简写方式<script> /** * 需求： * 网络请求得到数据aaa，假设自己有十行代码处理，将处理后的aaa111传入 * 继续进行代码处理，得到aaa222，再进行处理 * */ new Promise((resolve) => { setTimeout(() => { resolve('aaa') }, 1000) }).then(res => { //1.自
2021-01-18 22:25:25
394
原创 Promise三种状态和另外处理方式
Promise三种状态和另外处理方式另外一种写法new Promise((resolve, reject)=>{ setTimeout(()=>{ resolve() reject() },1000)}).then(data=>{ console.log(data);},err=>{ console.log(err);})省略.catch,直接将其作为then的第二个参数。...
2021-01-18 20:59:52
262
原创 Promise介绍和基本使用
Promise介绍和基本使用<script> //1.使用setTimeout setTimeout(() => { console.log('hello Promise'); setTimeout(() => { console.log('hello Js'); setTimeout(() => { console.log('hello Vue'); }, 1000) }, 1000)
2021-01-18 19:53:48
121
原创 文件路径别名问题
文件路径别名问题vue-cli3里需要在根目录下配置vue.config.js文件module.exports = { //先写一个configureWebpack 表示你准备配置webpackConfig configureWebpack: { //配置路径相关的时候用resolve 可以解决路径相关的问题 resolve: { //别名ps：.vue等相关的其实已经写了，这里只需要写我们自己需要的 alias: { //默认有@ 他指
2021-01-17 20:46:31
151
原创 tabbar的组件封装
tabbar的组件封装对于组件的抽离，我们可以进行分析，整个下部分选项卡，肯定是可复用的，不同地方都要使用，我们将TabBar抽离成一个组件。接下来，那么我们选项卡数目是否固定呢，内容是否固定呢，答案肯定是不，我们选项卡不能写死，也抽离出来每一个单独的，每一个选项为一个单独的item那我如何确定它在TabBar里边有多少个item呢，那就使用插槽，预留出一个位置，开发者实际需要几个item就使用几个。每个item其是又是图片和文字组成，我们也不能直接写死，留下具名插槽，分别对应文字和图片。我们
2021-01-17 00:07:46
213
原创 vue-router与keep-alive
vue-router与keep-alivekeep-alive是vue内置的一个组件，可以使被包含地组件保留状态，或避免重新渲染。router-vue是vue-router里注册地组件，我们之前学了它是一个占位符，如果 被包裹在keep-alive里边，所有路径匹配到地视图组件都会被缓存我们知道vue生命周期，里边有很多的回调函数，当到不同的阶段会执行对应的回调函数。那一个vue实例何时开始和结束呢，我们在Home.vue里自定义该回调函数/*创建组件时会进行回调的*/created() {
2021-01-12 00:14:58
2351
3
原创 vue-router全局导航守卫
vue-router全局导航守卫常见的生命周期函数/*创建组件时会进行回调的*/created() {},/*将template挂载到整个dom上时进行回调的*/mounted() {},/*当界面进行刷新时进行回调的*/updated() {}发现一个问题就是我们使用编程式导航时，如果多次点击同一个路由，会发生报错。1.编程式导航和声明式导航区别]具体可以去官网：https://router.vuejs.org/zh/guide/essentials/navigation.h
2021-01-11 20:48:06
305
原创 vue-router-路由嵌套使用/参数传递
vue-router-路由嵌套使用{ path: '/home', name: 'Home', component: Home, children:[ { path:'news', component:()=>import(/* webpackChunkName: "news"*/ '../components/HomeNews.vue') }, { path:'message', component:()=&g
2021-01-08 18:07:47
421
1
原创 vue-router打包文件解析/路由懒加载
vue-router打包文件解析这些文件app.js当前应用开发的所有业务代码 都会打包到此vendors.js第三方的这些框架之类的东西about.js就是路由懒加载打包的文件但是我们有很多页面，就有很多业务逻辑，默认打包到一个js文件里，会导致app.js越来越大，我们希望的是一个路由打包一个js文件，如果打包在一起我们请求js资源会十分卡顿，分开之后，我们需要什么页面，就请求什么js,这就是懒加载。路由懒加载路由懒加载的方式{ path: '/about', nam
2021-01-06 19:30:18
349
原创 动态路由
动态路由比如我们有时进入一个路由，不同人进入，可能路由需要不同，这个时候就需要动态路由，路由不固定。 增加一个User.vue<template> <div> <h2>我是用户界面</h2> <p>用户相关信息</p> </div></template><script> export default { name: "user" }<
2021-01-05 19:18:24
120
原创 通过代码跳转路由
通过代码跳转路由<template> <div id="app"> <div id="nav"> <!-- <router-link to="/" >Home</router-link> | <router-link to="/about" >About</router-link>--> <button @click="homeClick">首
2021-01-05 16:15:06
130
原创 vue-router配置
vue-router配置//导入vueimport Vue from 'vue'//配置路由相关信息信息import VueRouter from 'vue-router'import Home from '../views/Home.vue'//1.通过Vue.use（插件）,安装插件Vue.use(VueRouter)//2.创建VueRouter对象const routes = [ { path: '/', name: 'Home', component
2021-01-04 20:14:47
137
原创 url的hash和HTML5的history
url的hash和HTML5的historylocation.hash通过该方法来修改url，不会刷新浏览器，通过前端路由即可访问到对应页面。history模式pushState()history.pushState()三个参数，第一个是个对象，第二个是title,第三个是url.history.back()方法，返回栈顶的url，相当于左箭头，右箭头就是将url压入栈结构。replaceState()该方法和上边方法参数一样。该方法是替换网址，而不是存入栈里，不会有历史记
2021-01-03 16:56:12
115
原创 前端渲染和后端渲染
什么是路由和其中映射关系什么是路由呢路由就是通过互联的网络把信息从原地址传输到目的地址的活动映射表就是，地址和电脑之间的映射关系后端路由阶段（服务端渲染）之前web开发都是采用jsp/php等语言开发网页，并没有使用js，我们请求一个网址，将url发送到服务器，服务器会利用jsp技术，将页面渲染完毕，发送给你浏览器，在后端就完成了渲染每一个url都会有一个对应的jsp网页，不同请求，返回不同的页面这样其实在服务器已经形成一中映射关系，一个url对应一个页面。后端处理URL和页面之间
2021-01-02 21:51:00
238
原创 箭头函数的基本使用/this指向
箭头函数的基本使用<script> //1.参数问题 //1.1放入两个参数 const fun1 = (num1, num2) => { return num1 + num2 } //1.2放入一个参数，可以省略参数的括号 const power = num => { return num * num } //2.函数 //2.1函数代码块有多行代码 const test = () => { console.l
2021-01-02 19:35:10
163
1
原创 vue-cli3配置查看和修改
vue-cli3配置查看和修改方式一：启动配置服务器vue ui导入插件依赖vue-template-compiler和vue版本必须对应实际的版本是在node_modules里vue的dist文件夹下vue.esm.js版本，发行版本项目配置webpack配置修改。启动运行时编译就是之前说的compiler和only版本任务在ui界面启动项目，由数据分析方式二：在node_modules里寻找之前的配置文件配置文件都在，只是隐藏起来了方
2021-01-01 17:26:10
389
原创 vue CLI3创建项目
vue CLI3创建项目vue creat 项目名（不要大写）报错说版本过旧，删除C:\Users\用户名下的.vuerc即可步骤上边的默认配置，下边手动配置手动界面，上下键移动，空格选中，这里去掉eslint只选择babel是否将关于babel，eslint的配置放置到一个单独配置文件，还是将其放入package.json是否将刚在创建的配置保存为自定义配置，下次创建直接选择如果要删除默自定义的配置，还是去删除.vuerc文件里的相关配置移除了
2021-01-01 16:37:18
152
1
原创 runtime-compiler和runtime-only区别
runtime-compiler和runtime-only区别runtime-compiler里的main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'Vue.config.
2020-12-31 21:59:45
188
原创 vuecli-CLI2目录结构解析
vuecli-CLI2目录结构解析先看package.json"name": "vuecli2test","version": "1.0.0","description": "test vue cli2","author": "lcq <[email protected]>","private": true,"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev
2020-12-30 20:37:17
408
3
原创 vuecli-脚手架介绍和安装
vuecli-脚手架介绍和安装安装Vue脚手架3首先查看vue脚手架版本vue -V查看vue版本npm list vue安装npm install @vue/[email protected] -g拉取vue2模板npm install @vue/cli-init -g用vue-cli2创建项目vue init webpack 文件夹名字直接回车默认是文件夹的名字，也可以自定义项目名项目描述作者，可以去c盘用户下自己用户名.gitconfig文件里修改之前
2020-12-30 18:57:30
125
原创 webpack配置Plugin/配置文件分离
webpack配置Plugin配置版权信息（自带）导入webpack模块在webpack.config.js里/*导入webpack*/const webpack = require('webpack');在model.exports里配置/*配置插件*/plugins:[ new webpack.BannerPlugin('最总版权归lcq所有'),]打包index.html文件（HtmlWebpackPlugin）安装插件npm install html-webpac
2020-12-30 00:30:15
258
原创 webpack配置vue（由浅入深，循序渐进）
webpack配置vuenpm时加上-dev,是开发时依赖，运行时依赖就直接–save不加-dev.npm install [email protected] --save–save可以简写-S,一个横杠加大写S然后在mian.js里引入//使用vue进行开发import Vue from 'vue'const app = new Vue({ el: '#app', data: { message: 'hello webpack' }});然后执行npm run buil
2020-12-28 23:47:14
1904
1
原创 webpack-es6转es5的babel
webpack-es6转es5的babelnpm install --save-dev [email protected] [email protected] [email protected]我们在开发过程中使用到es6语法，但是考虑到兼容性问题，需要将es6语法转为es5配置webpack.config.js/*配置es6转es5*/{ test:/\.js$/, /*排除以下文件夹转换*/ exclude:/(node_modules|bower_comp
2020-12-27 23:23:55
148
1
原创 webpack图片处理
webpack图片处理如果在css文件中，背景设置成图片，我们直接通过之前步骤配置css,然后就会报错，图片又需要对应的loader进行配置。直接在css中运用图片，以及添加了依赖。url-loader配置第一步安装url-loadernpm install [email protected] --save-dev第二部在webpack.config.js的rules添加{ test: /\.(png|jpg|gif|jpeg)$/, use: [{ loader:'url-l
2020-12-27 22:53:26
163
原创 loader/ webpack中使用css文件配置(style/css/less)
loaderwebpack中使用css文件配置如果需要使用css文件，同时又不想将每一个css文件都依次加入html,我们只想要一个入口main.js放入html，首先要在main.js里引入所需的css文件/*依赖css文件*/require('./css/normal.css')有依赖才会去寻找对应的css文件，才会去使用对应的loader如果不指定版本，就会安装最新的。css-loader的安装解析css文件，使用import加载，并且返回css代码npm instal
2020-12-27 19:15:41
409
原创 webpack.config.js配置/package.json配置文件
webpack.config.js配置在项目所在目录创建一个webpack.config.js配置文件/*导入path模块*/const path = require('path');module.exports = { /*入口*/ entry: './src/main.js', /*出口*/ output: { /*绝对路径，动态获取,第一个参数获取当前文件所在路径，我们要放到dist文件夹下*/ path: path.resolve(__dirname,'di
2020-12-27 16:05:51
278
原创 webpack基本使用过程
前端模块化webpack基本使用过程首先通过node安装不用细说了。首先我们有计算属性的mathUtils.jsfunction add(num1,num2) { return num1+num2;}function mul(num1,num2) { return num1*num2;}module.exports = { add, mul}个人信息info.sexport const name = 'lqj';export const age = 18;ex
2020-12-26 23:18:21
88
原创 es模块化导入和导出
es模块化导入和导出导出let name = '小明';let age = 18;let flag = true;function sum(num1, num2) { return num1 + num2;}if (flag) { console.log(sum(20, 30));}/*1.导出方式一*/export { flag, sum}/*导出方式二*/export let num1 = 1000;export let height = 1.88;/
2020-12-26 19:37:04
171
原创 插槽的基本使用（slot）
插槽的基本使用（slot）组件的插槽：组件的插槽也是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>slot基本使用</title></head><body><div id="app"> <cpn
2020-12-25 21:39:54
1754
1
原创 父子组件的访问方式
父子组件的访问方式父访问子方式一：$children<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>$children</title></head><body><div id="app"> <cpn></cpn> <cpn></cpn>
2020-12-25 18:28:38
123
原创 父子通信结合双向绑定(拆分双向绑定向父组件发送数据)
父子通信结合双向绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <cpn :cnum1="num1" :cnum2="num2"></cpn></div><te
2020-12-24 22:12:55
174
单元测试实践实验报告模板lcq.doc
2020-11-24
修改版-3.1性能测试工具Jmeter的使用（一）.docx
2020-11-24
软件测试复习题目.doc
2020-11-24
vue基础及高级.docx
2020-10-04
vue脚手架的项目与json-server结合.docx
2020-10-04
计算机网络的实验报告
2020-06-11
课程设计之薪水总文档
2020-06-11
JavaEE6.0_API_帮助文档.chm
2020-02-08
信息系统设计与分析yqj备考资料.doc
2020-01-02
词法分析实验一报告.doc
2019-12-18
experiment3.asm
2019-12-10
logisim-evolution.jar
2019-12-05
二叉树建立，输出，找叶子节点路径
2018-11-22
常用的弹窗提示基于vue.js封装，用于非工程化项目
2022-05-17
audio 播放器 在vue-audio-better上增加图标名称和大小
2022-04-27
词法分析实验一.cpp
2019-12-04
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人