- 博客(68)
- 资源 (37)
- 收藏
- 关注
RSS订阅原创 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
204
原创 vuecli-CLI2目录结构解析
vuecli-CLI2目录结构解析先看package.json"name": "vuecli2test","version": "1.0.0","description": "test vue cli2","author": "lcq <2226298119@qq.com>","private": true,"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev
2020-12-30 20:37:17
437
3
原创 vuecli-脚手架介绍和安装
vuecli-脚手架介绍和安装安装Vue脚手架3首先查看vue脚手架版本vue -V查看vue版本npm list vue安装npm install @vue/cli@3.2.1 -g拉取vue2模板npm install @vue/cli-init -g用vue-cli2创建项目vue init webpack 文件夹名字直接回车默认是文件夹的名字，也可以自定义项目名项目描述作者，可以去c盘用户下自己用户名.gitconfig文件里修改之前
2020-12-30 18:57:30
134
原创 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
273
原创 webpack配置vue（由浅入深，循序渐进）
webpack配置vuenpm时加上-dev,是开发时依赖，运行时依赖就直接–save不加-dev.npm install vue@2.5.21 --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
1940
1
原创 webpack-es6转es5的babel
webpack-es6转es5的babelnpm install --save-dev babel-loader@7.1.5 babel-core@6.26.3 babel-preset-es2015@6.24.1我们在开发过程中使用到es6语法，但是考虑到兼容性问题，需要将es6语法转为es5配置webpack.config.js/*配置es6转es5*/{ test:/\.js$/, /*排除以下文件夹转换*/ exclude:/(node_modules|bower_comp
2020-12-27 23:23:55
171
1
原创 webpack图片处理
webpack图片处理如果在css文件中，背景设置成图片，我们直接通过之前步骤配置css,然后就会报错，图片又需要对应的loader进行配置。直接在css中运用图片，以及添加了依赖。url-loader配置第一步安装url-loadernpm install url-loader@1.1.2 --save-dev第二部在webpack.config.js的rules添加{ test: /\.(png|jpg|gif|jpeg)$/, use: [{ loader:'url-l
2020-12-27 22:53:26
175
原创 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
431
原创 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
299
原创 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
102
原创 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
192
原创 插槽的基本使用（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
1791
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
136
原创 父子通信结合双向绑定(拆分双向绑定向父组件发送数据)
父子通信结合双向绑定<!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
191
原创 vue项目端口被占用
vue脚手架3中没有config文件夹直接找到vue.config.js文件就行。如果启动默认端口号8080被占用：会显示无法连接到该端口修改默认端口：1.找到vue.config.js文件2.在里边添加：module.exports = { devServer: { port: 9999, // 端口号 }}...
2020-12-24 15:31:22
501
原创 字串父通信（自定义事件）
字串父通信（自定义事件）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义事件</title></head><body><!--父组件模板--><div id="app"> <!--父组件接收事件--> <cpn @itemclick="cpnClic
2020-12-23 20:57:59
105
原创 父向子通信（propos基本用法/驼峰命名问题）
父向子通信（propos基本用法）方式一（字符串数组）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父传子</title></head><body><div id="app"> <cpn :cpeople="people" :cmessage="message"></c
2020-12-23 19:06:47
507
3
原创 组件中的data为何要单独存在/为何必须是函数
组件不能访问Vue实例里的数据vue组件有自己的data<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>分离写法</title></head><body><div id="app"> <cpn1></cpn1></div><!--1.抽离模
2020-12-22 21:38:10
167
原创 组件模板抽离写法
组件模板抽离写法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>分离写法</title></head><body><div id="app"> <cpn></cpn> <cpn2></cpn2></div><!--2.
2020-12-22 19:38:49
88
原创 注册组件语法糖
注册组件语法糖<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>注册组件语法糖</title></head><body><div id="app"><cpn1></cpn1><cpn2></cpn2></div><scrip
2020-12-22 19:00:19
85
原创 原生js操作ajax基本操作
原生js操作ajax基本操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AJAX GET 请求</title> <style>
2020-12-22 18:32:10
495
原创 express基本使用
express基本使用安装对应目录下//1.引入expressconst { request, response } = require('express');const express = require('express');//2.创建应用对象const app = express();//3.创建路由规则//request对请求报文封装//response对响应报文的封装app.get('/', (request, response) => {//设置响应
2020-12-22 16:41:09
274
2
原创 AJAX简介
AJAX简介AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。AJAX优缺点优点可以无需刷新页面而与服务器端进行通信。允许你根据用户事件来更新部分页面内容。缺点没有浏览历史，不能回退存在跨域问题(同源)SEO 不友好（爬虫）HTTP协议http
2020-12-22 15:02:51
119
原创 父组件与子组件
父组件与子组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父组件与子组件</title></head><body><div id="app"> <cpn2></cpn2></div><script src="../js/vue.js">&
2020-12-21 20:59:38
237
1
原创 全局组件和局部组件
全局组件和局部组件全局注册<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>基本使用</title></head><body><div id="app"><my-cpn></my-cpn><my-cpn></my-cpn><my-cp
2020-12-21 20:40:20
104
原创 vue组件化思想及基本使用步骤
vue组件化思想组件化思想的应用：1.有了组件化的思想，我们在之后的开发中就要充分的利用它。2.尽可能的将页面拆分成一个个小的、可复用的组件。3.这样让我们的代码更加方便组织和管理，并且扩展性也更强。分治思想注册组件的基本步骤组件化使用基本步骤<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>基本使用</title>
2020-12-21 19:47:56
232
原创 关于vscode没有node提示
刚下载安装的VScode默认只会安装部分插件,包括中文包以及对vue等内容的提示插件,对于nodejs相关提示不会自动安装,需要下载名称: node-snippets
2020-12-21 00:23:23
1493
2
原创 input中的值绑定/v-model修饰符
input中的值绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多选框</title></head><body><div id="app"> <label :for="item" v-for="item in originHobbies"> <input typ
2020-12-20 17:41:48
795
原创 v-model和input结合使用
v-model和input结合使用v-model和radio（单选框结合）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>radio</title></head><body><div id="app"> <!--原本取相同的name可以让单选框互斥，但是现在如果v-model绑定同一
2020-12-20 00:36:29
2375
1
原创 v-model双向绑定原理
v-model双向绑定原理首先要知道input输入框中有一个input事件，当用户输入时触发，他在元素值发生改变时立刻触发（value改变），在中也是一样的。但是其从下拉框中选值不会触发。学习地址：https://www.cnblogs.com/xuzhudong/p/8630610.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>
2020-12-19 22:12:47
683
1
原创 高阶函数（filter/map/reduce）
高阶函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>高阶函数</title> <script> //编程范式：命令式编程/声明式编程 //或者分为：面向对象编程（第一公民：对象）/函数式编程（第一公民：函数） const nums = [10, 23, 5443, 42, 122, 67, 4
2020-12-19 20:45:32
212
1
原创 vue购物车案例/过滤属性
vue购物车案例目标：实现一个购物车如下。html如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>书籍购物车</title> <link rel="stylesheet" href="style.css"></head><body><div id="app"> &l
2020-12-19 17:22:48
339
2
原创 数组方法中的响应式和非响应式
数组方法中的响应式和非响应式<div id="app"> <ul> <li v-for="item in letters">{{item}}</li> </ul> > <button @click="btnClick">点我</button></div><script src="../js/vue.js"></script><script>
2020-12-13 01:11:39
393
原创 v-for使用（key使用）
v-for使用遍历数组<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>遍历数组</title></head><body><div id="app"> <ul> <!--遍历过程中获取下标值，下标固定第二个变量，下标值可参与运算--> <li v
2020-12-12 17:30:27
993
原创 v-show和v-if区别
v-show和v-if区别v-if当条件为false时，压根不会有对应的元素在DOM中。v-show当条件为false时，仅仅是将元素的display属性设置为none而已。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-show和v-if区别</title></head><body><div
2020-12-12 15:17:24
68
原创 登录切换案例以及input复用问题
登录切换案例以及input复用问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录切换的input复用问题</title></head><body><div id="app"> <!--使用v-if来判断登录方式 --> <span v-if="loginStyle
2020-12-11 23:36:17
163
原创 v-if/v-else-if/v-else
v-if/v-else-if/v-else<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <input type="text"> <button @click="overInput"&g
2020-12-11 15:24:53
68
原创 v-on的使用（参数、标识符）
v-onv-on基本使用<body><div id="app"> <h1>{{counter}}</h1> <button v-on:click="increment">+</button><!--语法糖直接用@代替v-on:--> <button @click="decrement">-</button></div><script src="../js/vu
2020-12-11 14:11:07
423
单元测试实践实验报告模板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关注的人