随''blow...而过-CSDN博客

原创 vue使用mock模拟数据操作

首先下载mockjsnpm install mockjsnpm install axios之后在src文件夹下创建一个新的文件夹，名为mock在mock文件夹下创建一个index.js里面的内容为const Mock = require('mockjs');//设置ajax请求的相应的时间Mock.setup({timeout:'200-600'});let configArra...

2021-07-13 17:43:00 30

原创直播播放器总结

1、播放器使用(1)、vue-video-player播放器下载videojs-contrib-hls、vue-video-player使用：引用;import Vue from 'vue'import 'videojs-contrib-hls'import VideoPlayer from 'vue-video-player'require('video.js/dist/vide...

2021-07-13 16:06:00 36

原创 node.js实现图片上传

1、图片文件需要依赖constexpress=require('express')//express框架constmulter=require('multer');//进行文件上传接口需要使用 multer中间件constfileFun=require('./utils/flieFun/fileReder')//引用读取文件工具方法constfs=requir...

2021-04-01 16:44:00 31

原创 git教程

git基础教程Git基础教程Git基础教程在日常工作中，经常会用到Git操作。但是对于新人来讲，刚上来对Git很陌生，操作起来也很懵逼。本文帮助理解Git的基本原理，掌握常用的一些命令。一、Git工作流程image.png以上包括一些简单而常用的命令，但是先不关心这些，先来了解下面这4个专有名词。Workspace：工作区Index / Stage：暂存区...

2020-09-17 22:23:00 29

原创 git介绍

git介绍git总结(默认已将安装好了git)一、git是什么git是目前世界上最先进的分布式版本控制系统版本控制：指对软件开发过程中各种程序代码、配置文件及说明文档等文件变更的管理，是软件配置管理的核心思想之一。集中式版本控制系统的版本库是集中存放在中央服务器的，而干活的时候，用的都是自己的电脑，所以要先从中央服务器取得最新的版本，然后开始干活，干完活了，再把自己的...

2020-09-17 22:20:00 18

原创 vue周测题

vue周测题1、MVVM的理解Model view viewmodel2.vue中html上如何加载data中数据(列举三种)插值表达式、v-text、v-html3、如何绑定属性和事件v-on@v-bind:4、vue中常见的事件修饰符有哪些，分别是做什么的？.stop阻止冒泡.prevent阻止默认事件.capture添加事件侦听器时使用事件捕获模式.self只当事件在该元...

2020-09-14 20:37:00 20

原创 webpack的使用

webpack的使用1.2 静态资源多了带来的问题网页加载速度慢，因为我们要发起很多的二次请求要处理错综复杂的依赖关系1.3 如何解决上述问题合并、压缩(gzip)、精灵图、图片的Base64编码可以使用webpack解决各个包之间的复杂依赖关系1.4 什么是webpackwebpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；...

2020-09-14 20:13:00 15

原创监听事件，计算函数

监听器和计算属性监听器：作用：监听vue实例上的数据变化怎么用new Vue({ watch:{ 要监听的变量(变化后的值,变化之前的值){ // 监听的变量一发生改变就会执行这里的方法 } }})监听路由的变化new Vue({ watch:{ $route(变化后的值,变化之前的值)...

2020-09-13 22:42:00 23

原创 vue路由

Vue路由路由的概念后端路由：根据不同URL地址，服务端响应不同的资源。前端路由：针对于单页面应用来说，根据不同的地址，展示不同的界面，称之为前端路由。怎么使用路由引入路由的js创建路由实例。 new VueRouter配置地址和组件的映射关系。 routes把路由实例挂载到vue上。 Vue实例上有个router属性指定路由到这个地址之后，组件显示的位置&...

2020-09-13 22:40:00 19

原创插槽

插槽属性的覆盖在引用子组件的时候，可以在标签上设置一些属性的，如id、name、class、style等这些属性会直接设置到组件的根标签上如果根标签上有重复的属性引用的时候设置的属性会覆盖之前的属性。对于class和style不会进行覆盖，而是进行合并操作如果想在组件中获取到父组件传递过来的属性的话，通过this.$attrs.属性名获取。(这里不会获取到在props上设置的属性...

2020-09-10 23:13:00 23

原创 VUE-组件

VUE-组件全局组件定义的三种方式使用Vue.extend配合Vue.component方法：varlogin=Vue.extend({template:'<h1>登录</h1>'});Vue.component('login',login);直接使用Vue.component方法：Vue.component('register',{template:'<h1&...

2020-09-09 21:20:00 16

原创 vue动画

vue动画使用过渡类名<div id="app"><input type="button" value="动起来" @click="myAnimate">  <transition name="fade"> <div v-show="isshow"&...

2020-09-09 21:07:00 21

原创 vue生命周期和vue-resource

vue生命周期和vue-resource生命周期：定义：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！vue生命周期详解：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie...

2020-09-09 13:27:00 19

原创 vue过滤器和修饰符

vue过滤器和修饰符1、过滤器Vue.js允许你自定义过滤器，过滤器可以用在两个地方(1)mustache插值和 v-bind表达式添加在JavaScript表达式的尾部由“管道”符指示。作用：在我们页面显示值之前加一层过滤，展示我们过滤后的值。注意事项过滤器可以用在两个地方：双花括号插值和v-bind表达式使用语法{{变量|过滤器名}}{{变量|过滤器|另一个过滤器}}...

2020-09-07 21:00:00 25

原创 vue 经典案例

1、走马灯<body><div id='app'> <button @click="start">浪起来</button> <button @click="stop">低调</button> <h3>{{title}}</h3></div></bod...

2020-09-05 20:47:00 63

原创 vue初始

vue初识定义：Vue.js是一套构建用户界面的框架，只关注视图层Vue.js是前端的主流框架之一，和Angular2+、React.js一起，并成为前端三大主流框架！优点：1、使用框架，能够提高开发的效率2、提高代码的维护性，提高效率3、让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑4、响应式(数据的响应式)框架与库的区别：框架：是一套完整的...

2020-09-05 20:39:00 17

原创 ES6练习题

ES6练习题考试题一、简答题1、let、const、var定义变量的区别是什么？let块作用域没有变量提升不能重复声明属于顶层对象const声明常量，不能修改必须初始化块作用域没有变量提升不能重复声明属于顶层对象var没有块的概念可以夸块访问，但是不能跨函数访问会进行变量提升2、promise分为几种状态...

2020-09-04 19:25:00 18

原创 ES6模块化

ES6模块化创造原因：现在的web系统越来越庞大、复杂，需要团队分工，多人协作，大型系统的javascript文件经常存在复杂的依赖关系，后期的维护成本会越来越高。 JavaScript模块化正式为了解决这一需求而诞生。环境配置：目前浏览器不支持ES6模块化的语法，所以我们在node里进行测试。通过babel解决这个问题通过babel编译js代码1. 创建一个文件夹以及目录结构...

2020-09-03 21:12:00 20

原创 ES6类

ES6类定义： class Animal { //构造函数，创建这个类时会执行的函数 constructor(color){ //this当前对象 console.log("构造") this.color=color } } const myCat ...

2020-09-03 20:58:00 18

原创 set/weakset map/weakset

set/weakset map/weaksetset用法定义：是ES6的一种新的数据结构及(值的集合)Set跟其他数据结构不同的地方就在于：它的值不会有重复项。(1)使用：let set = new Set([13,3,4,5])set.add(3)// add添加元素// 获取set中值的时候，需要先转成数组在取获取// set里的元素是不会重复的(2)size属性...

2020-09-03 20:51:00 25

原创 async/await语法

async/await语法这是ES7的语法，它是基于generator函数做的语法(常用)async function 函数名(){ let obj = await getName() return obj}函数名().then(res=>{ //得到函数的返回值 })...

2020-09-03 20:07:00 16

原创 generator生成器函数

generator生成器函数定义：function后面加了*函数体里有 yield关键字 function* Hello(name) { yield `hello${name}`; yield `how are you`; yield `bye`; }表现形式调用这个函数，不会立即执行函数体里的内容，返回一个对...

2020-09-03 20:02:00 19

原创数组练习

数组练习 const list = [{ id: 1, name: "刘备" }, { id: 2, name: "关羽" }, { id: 3, name: "张飞" }, { id: 9, name: "孙权...

2020-09-02 21:26:00 17

原创解决异步（重点promise函数）

解决异步(重点promise函数)1. 回调函数的方式function func(callback){ setTimeout(()=>{ callback("异步数据") },1000)}func(function (res){ console.log(res)})2. 通过Promise解决异步问题定义：这个是ES6新出的解决异步问题的语法，通...

2020-09-02 21:10:00 27

原创 iterator遍历器

iterator遍历器1、数组默认实现了迭代器，所以可以通过for of遍历2、对象没有实现迭代器，所以不能通过for of 遍历3、Array[Symbol.iterator] 对应是一个函数，这个函数返回一个对象，对象中有个next方法，next方法返回一个对象{value:"",done:false}4、for...of，我们可以使用它来遍历数组，字符串，Set和Map结构，但fo...

2020-09-02 20:58:00 15

原创各种遍历方法（重点for....of）

各种遍历方法(重点for....of)1、普通传统的遍历 let arr = [1,2,3,4,5]; //普通遍历方法 for(let i=0;i<arr.length;i++){ console.log(arr[i]); }2、foEach()参数第一个值，第二个索引 arr.forEach((i,v)=>{ ...

2020-09-02 20:50:00 21

原创 ES6代理proxy

ES6代理1、proxy的实现 let my = { location : "市区", housePrice : 20000 }//在我们获取数据前进行处理；//参数第一要代理的对象第二处理函数 let intermediaryAgent = new Proxy(my,{ //get函数 ge...

2020-09-02 20:39:00 16

原创 Symbol新数据类型

Symbol新数据类型symbol解决了重命名的问题，解决对象的属性名冲突。描述信息每个Symbol都是独一无二的通过遍历是获取不到symbol使用Object.getOwnPropertySymbols let name2 = Symbol("name"); let age = Symbol("age"); let name1 = Symbol("n...

2020-09-02 20:10:00 12

原创函数（rest 箭头）

函数(rest 箭头)1、参数的默认值传统方式：function fn (n,a) { var name = n||''; var age = a||18||''; if(name){ console.log(name); } }ES6新方式：function fn1 (a,n='z...

2020-09-01 17:08:00 31

原创 ES6常用方法（字符串，数字，数组，对象）

ES6常用方法1、字符串1、模版字符串反引号包裹 `` var name = '张三'; var age = 18; function fn(arr, v1, v2) { console.log(arr); //["他叫", ",今年", "岁了。", raw: Array(3)] console.log(v1); //张三 ...

2020-08-31 22:22:00 17

原创 ES6 解构赋值

ES6 解构赋值定义：从数组和对象中提取值，对变量进行赋值1、数组的解构赋值1.解构赋值可以嵌套let [a,[b,c],[d,e]] = [11,[12,13],[14,15]]; console.log(a,b,c,d,e);//11，12，13，14，152.不完全解构当左边的模式(你可以理解为格式)与右边不完全一样的时候，那么赋值过程中，只会给模式匹配成功的部分...

2020-08-31 15:53:00 17

原创 ES6 基础(let const)

ES6 基础(let const)1、let的新特性let与var的区别1、不能重复定义相同的变量名(let特点不能重复定义，使用let定义一次即可，多次使用let定义同一个变量会报错)，//报错Identifier'num'hasalreadybeendeclared2、let没有变量提升有一个块级作用域及{}就会产生一个块级作用域 // let...

2020-08-31 11:44:00 18

原创数组与字符串常用方法

数组与字符串常用方法 //数组 var arr1 = new Array(2, 3, 4, 5, 6); console.log(arr1); // 判断是否是数组 console.log(arr1 instanceof Array); console.log(arr1.valueOf()); // 反转数组 arr1 = arr1.revers...

2020-08-26 21:59:00 10

原创 JavaScript中数据类型的转换

JavaScript中数据类型的转换if中的条件会被自动转为Boolean类型 * 会被转为false的数据 * 会被转为true的数据参与+运算都会被隐式的转为字符串 * 会被转为空字符串的数据 * 会被转为字符串的数据 * 会被转为数据类型标记的数据参与*运算都会被隐式的转为数字 * 会被转为0的数据 * 会被转为1的...

2020-08-26 21:56:00 12

原创 bootstrap 常用功能

1、手风琴.collapse 隐藏内容.collapse.in 显示内容.collapsing 过渡开始时添加，并在转换结束时删除希望默认打开，请添加附加类。data-toggle="collapse"data-target data-target collapse in添加数据属性。请参阅演示以了解此操作。data-parent="#selector"<!DOCTY...

2020-08-25 06:43:00 27

bootstrap面试题1、Bootstrap是哪家公司研发的？Twitter2、什么是Bootstrap？以及为什么要使用Bootstrap？Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。Bootstrap具有移动设备优先、浏览器支持良好、容易上手、响应式设计等优点，所以Bootstrap被广泛应用。3、...

2020-08-24 22:18:00 61

原创 bootstrap基础

bootstrap基础详情见网址https://v3.bootcss.com/css/引入方法<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"><scriptsrc="https://cdn.jsdeliv...

2020-08-24 22:06:00 16

原创 css3 媒体查询

css3 媒体查询定义：使用 @media 查询，可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面。css媒体查询语法@media only screen and|not(max-width: 768px) { div{ background: red; }}你...

2020-08-23 10:16:00 24

原创 less安装与使用

less安装与使用定义：Less 是一门 CSS 预处理语言，Less 可以运行在 Node 或浏览器端。优点：1、可以运行在Node或浏览器端，2、增加了变量、Mixin、函数等特性3、使css更加维护和扩展。4、结构清晰，便于扩展5、可以方便地屏蔽浏览器私有语法差异6、可以轻松实现多重继承7、完全兼容 CSS 代码，可以方便地应用到老项目中安装过程1、NodeJ运行LE...

2020-08-22 21:12:00 19

原创 css fiex响应式部局

css fiex响应式部局定义：CSS3 弹性盒( Flexible Box 或 flexbox)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。内容：弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。注意：弹性容器...

2020-08-22 20:35:00 20

当当书城.的静态搭建以及简单动画实现

空空如也