qq_53446980-CSDN博客

原创 vuex的学习

vuex专门在vue中实现集中式状态（数据）管理的一个插件，对vue应用中多个组件的共享状态进行集中式的管理，也是一种组件间的通信方式，且适用于任意组件间通信状态机管理 vue全家桶之一数据的集中式管理什么时候用：当多个组件共享数据的时候安装$ npm install vuex --save使用创建store文件夹在src下，再创建一个index.js store 是一个仓库1.引用vue ,vuex2.使用vuex Vue.use(vuex)3.准备actions

2021-10-25 23:37:15 144

原创 Vue Router重复频繁点击a标签导致路由重复报错解决方法----Avoided redundant navigation to current location: “/about“.

Vue Router重复频繁点击a标签导致路由重复报错解决方法----Avoided redundant navigation to current location: “/about”.vue-router ≥3.0版本回调形式以及改成promise api的形式了，返回的是一个promise，如果路由地址跳转相同, 且没有捕获到错误，控制台始终会出现如图所示的警告（注：3.0以下版本则不会出现以下警告！！！，因路由回调问题…）方案一：安装vue-router3.0以下版本：先卸载3.0以上版本

2021-10-18 21:49:50 327

原创 vue Router的学习（一）

vue Router的学习（一）路由route路由就是一组key-value的对应关系router路由器多个路由需要经过路由器的管理vue-router插件库专门用来实现SPA (单页面程序)应用对SPA 应用的理解单页面web应用整个应用只有一个完整的页面点击页面中的导航链接不会刷新页面，只会做页面的局部更新数据需要通过ajax请求获取路由的理解一个路由就是一组映射关系 key为路径，value为component用于展示页面内容工作过程：当

2021-10-18 21:47:36 183

原创 DOM 文档对象模型

DOM (Document Object Model)DOM是针对HTML和XML文档的一个API，DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分1.1节点DOM最小单位叫做节点常用节点：文档节点（document）、元素节点Element、属性节点Attribute、文本节点Text其他节点：doctype标签DocumentType、注释Comment、文档的片段DocumentFragment1.2节点树构成树结构的根节点，其他HTML标签节点都是它的下

2021-10-17 00:29:19 103

原创 DOM事件机制

事件机制事件组成三要素：事件源事件类型事件处理程序事件源：事件被触发的对象如按钮对象事件类型：如何触发，触发什么事件，例如鼠标点击，鼠标移入移出事件处理程序：通过一个函数赋值的方式执行事件的三步骤：获取事件源注册事件（绑定事件）采用函数赋值形式添加事件处理程序常用事件：当用户点击鼠标时、当页面加载后、当图像加载后、当鼠标移至元素上时…实例： <div id="d1">我是一个div</div> <!-- οnclick="函

2021-10-17 00:26:09 121

原创组件间的通信，插槽，路由

组件间的通信父组件向子组件传值父组件向子组件传值时通过prop，所有的prop都使得其父子prop之间形成一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行。这样可以防止从子组件意外变更父级组件的状态，从而导致应用的数据流向难以理解。1.定义一个子组件,并且用props来接收父组件传过来的数据2.定义一个父组件，并且将子组件注册,在template里面使用子组件具体可以回头复习props的知识点子组件向父组件传值子组件通过发射事件$.emit(‘xxx’)给父

2021-10-16 23:05:25 170

原创 day6--混入&插件&过滤器&自定义指令

混入mixin功能：可以把组件共用的配置提取成一个混入对象使用方法：1.定义混合创建一个.js文件里面可以存放一些公共的数据，也就相当于默认数据// 模块化导出export default{ data() { return { name:'lerry', address:'liuzhou' } }, methods: { show(){ alert

2021-10-14 23:58:12 85

原创 day5--vue脚手架

单文件组件一个文件中只包含一个组件。在前面的非单文件组件中，有些缺点非常明显：全局定义强制要求每个component中的命名不得重复字符串模板缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的``不支持CSS 意味着当HTML和JavaScript组件化时，css明显被遗漏没有构建步骤限制只能使用HTML和ES5 JavaScript，而不能预处理综合以上缺点，引出文件扩展名为.vue的单文件组件来提供解决方法hello.vue 简单实例：<template&gt

2021-10-13 23:58:54 63

原创 day4--计算属性&监听属性&组件

1.计算属性 computed 要用的属性不存在，要通过已有属性计算得来，然后通过computed来存放我们要用的计算属性。底层原理借助了Object.defineProperty方法提供的getter和setterget函数会在什么时候调用？ 1.get函数会在初次读取时执行一次 2.当依赖的数据发生改变的时候会被再次调用计算属性 vs methods方法优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便我们可以将同一函数定义为一个方法而不是一个计算属性。

2021-10-12 23:47:03 88

原创 day3--常用渲染&生命周期

条件渲染v-if='表达式’v-else-if=‘表达式’v-else=‘表达式’适用于切换频率较低的场景特点：不展示的DOM元素直接移除以上三个一起使用时，要求结果不能被打断v-show=‘表达式’适用于切换频率较高的场景特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉（display:none）v-if和v-show的区别：使用v-if元素不一定能够获取到，使用v-show时元素一定能获取到<!DOCTYPE html><html lang="en"&gt

2021-10-11 23:14:05 130 1

原创 Vue项目运行报错：解决webpack版本问题

解决“Error: Rule can only have one resource source (provided resource and test + include + exclude)”前面也会报错找不到 webpack ，在 package-lock.json 里查找之，发现安装的版本竟然是 5.1.0，而没有更新过依赖，可以正常编译的项目里都是 4.x。那基本可以确认了。步骤：先删掉 node_modules 和 package-lock.json手动在 package.json

2021-10-10 16:01:41 5531

原创 day2 事件绑定&常用事件

数据绑定el和data的两种写法理解MVVMObject.defineProperty理解数据代理事件处理事件修饰符键盘事件数据绑定vue中有两种数据绑定方式：单向绑定（v-bind）：数据只能从data流向页面双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data 注意：v-model只能适应一些元素input select…具有value属性的元素，v-model默认是用来收集value值的<!DOCTYPE html><.

2021-10-10 11:25:34 79

原创 day1--初始vue

vue介绍vue是一套用于构建用户界面的渐进式JavaScript框架，一个MVVM视图层框架构建用户界面：使用某种方式拿到数据，将数据放到合适的位置渐进式：vue可以自底向上逐层应用（既可以构建简单应用，也可以构建一个复杂应用)vue =jquery= 原生js对比jquery简化了原生dom文档的操作vue完全脱离了dom操作安装1.CDN<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js">&l

2021-10-08 23:50:21 91

原创 day4 重点：解决异步编程的方案

day4解决异步编程的方案回调函数(回调地狱)generator(生成器函数)promise(承诺对像)aync 目前最简便的解决异步编程的方案1.Generator函数生成器函数（异步编程的解决方案）形式上来看，Generator函数是一个普通函数。但是有两个特征：function关键字与函数名之间有一个星号；函数体内部使用yield表达式，定义不同的内部状态。执行调用Generator函数，返回一个遍历（迭代）器对象，代表Generator函数的

2021-10-07 21:20:07 71

原创 day3 可迭代元素，迭代器，Symbol

可迭代元素Array Set Map string 类数组对象（nodelist，arguments）Symbol 新增数据类型迭代器1.Array 有序并且可以重复，保存任意数据类型2.Set 可以存储任意数据类型，无序，不重复的集合创建方式构造函数 Set() let set=new Set() //参数是一个可迭代的数据结构，用作初始化set集合2.1 Set.prototype api size 获取set集合的元素个数 add(

2021-10-07 20:21:44 90

原创 day2--ES6入门

1.开发模式（原生） xxx文件夹 js文件 html文件 css文件 image文件技术：html5 css3 JavaScript2.vue开发利用脚手架 vue-cli创建框架在xxx文件夹下，进入终端输入命令： vue create @vue-cli但是由于是框架，浏览器只能展示html css JavaScript文件因此最终还是需要将vue项目进行打包成原生的项目文件在项目终端输入 npm run build以上操作将项目打包

2021-09-27 00:06:34 90

原创 ES6-数据类型的拓展

技术栈：html、css、js（es5) (jquery)/ajax企业级开发html css js(es6) （vue）react axios elementuies61.es6简介 JavaScript的下一代标准，2015.6以后浏览器(前端脚本语言) 兼容性相对于node.js差一点 (babel =>es6 =>es5) node.js(后端语言) 不是100%兼容2.变量声明 let 1.声明不会提升console.log

2021-09-26 00:19:27 52

原创 JavaScript 工厂函数模式&构造函数模式

1.JavaScript工厂模式工厂模式的主要作用是用来创建对象的,降低代码冗余度应用场景：当你想要批量生产同种类的对象的时候；比如，你想生成一个班级的40个学生，每个学生都有姓名、年龄等特征。这时候你创建一个“工厂”，把信息丢到工厂里，工厂就给你造一个人出来，非常方便。创建对象的方式有：字面量方式创建对象// 字面量创建对象var obj1={ name:'zhangsan', age:18}new Object()创建对象// new Object()创建对象

2021-09-25 00:06:44 446

原创 JavaScript-继承

继承继承是面向对象编程中讨论最多的话题。很多面向对象语言都支持两种继承：接口继承和实现继承。前者只继承方法签名，后者继承实际的方法。接口继承在 ECMAScript 中是不可能的，因为函数没有签名。实现继承是 ECMAScript 唯一支持的继承方式，而这主要是通过原型链实现的。1.原型链ECMAScript 把原型链定义为 ECMAScript 的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。重温一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型有一个属性指回构造

2021-09-23 23:59:42 55

原创接口以及后台管理系统部署

接口以及后台管理系统部署1.搭建阿里云环境在本地终端输入命令，进入阿里云服务器终端ssh root@139.196.156.38 格式为：ssh root@ip1.安装apache2依次输入命令：apt updateapt install apache2（我已经安装了，就不会显示一些下载信息）[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BcghPLEF-1631809071970)(C:\Users\lfl\AppData\Roaming

2021-09-17 08:12:00 567

原创函数

函数1.函数介绍函数允许我们封装一系列代码来完成特定的任务。当想要完成某一任务时，只需要调用相应的代码即可。函数的作用：功能的封装，直接调用，代码复用率提高构造对象的模板（构造函数）函数实际上是对象，每个函数都是Function类型的实例，并且都与其他引用类型一样具有属性和方法，由于函数都是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定2.函数声明自定义函数：1.由function关键字声明函数声明function 函数名（形参裂变）{ //函

2021-09-17 00:16:50 52

原创 HTML5--新增

HTML5 新增1.语义化标签结构标签大多数跟div一样没有默认样式1.section section标签定义文档中的节（section、区段）比如章节、页眉、页脚或文档中的其他部分2.article article标签装载显示一个独立的文章内容还可以嵌套，则内层的artilce对外层的article标签有隶属的关系例如，一个博客文章，可以用article显示，然后一些评论可以以article的形式嵌入其中3.aside 标签内容之外与标签内容相关的辅助信息；4.hea

2021-09-13 23:48:03 89

原创 jQuery Ajax

jQuery Ajax什么是 AJAX？简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示jQuery为我们将原生ajax进行了封装，现在我们只需要一行简单的代码，就可以实现 AJAX 功能。HTTP协议本次ajax使用的还是http协议1.原生js中Ajaxfunction getData(){ //1.创建一个XMLHttpRequest的实例 var request= new XMLHttpRequest(); //2.open()

2021-09-12 23:45:01 129

原创 jQuery基础

1. jQuery入门1.1jQuery介绍jQuery是一个工具库，是对于ECMAScript、DOM、BOM的一个浅封装功能：使用css选择器进行元素查询事件机制DOM操作属性操作工具方法Ajax1.2.jQuery安装网页中jquery的引入有两种方式：本地下载引入、CDN载入<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m

2021-09-09 21:36:00 86

原创面向对象的程序设计

面向对象的程序设计1.内置对象及内置函数1.1基本包装类型 ES中数据的分类分为：基本数据类型（number ，Boolean，string，undefined，null，symbol ）和引用类型（object，函数，数组）严格说基本包装类型并不属于两个中的任意一个。基本数据类型和引用类型的明显区别是：引用类型有自己的内置的方法，也可以自定义其他方法来操作数据，而基本数据类型不可以为了实现可以在基本数据类型上使用方法，ECMAScript提供

2021-09-07 23:31:47 163

原创正则表达式

正则表达式正则表达式（Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。1.什么是正则表达式？正则表达式是由一个字符序列形成的搜索模式。当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。正则表达式可以是一个简单的字符，或一个更复杂的模式。正则表达式可用于所有文本搜索和文本替换的操作。2.正则表达式的创建字面量（直接量）构建函数3.字符分类普通字符

2021-09-06 23:42:18 162

原创 JavaScript-对象

对象无序属性的集合，其属性可以包含基本值，对象，或者函数。可以将对象想象成散列表:键值对，其中值可以是数据或者函数。ECMAScript中的对象其实就是一组数据(属性)和功能(方法)的集合。对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法）现实生活中，每一个人都是一个对象。对象有它的属性，如身高和体重，方法有走路或跑步等；所有人都有这些属性，但是每个人的属性都不尽相同，每个人都拥有这些方法，但是方法被执行的时间都不尽相同。在 JavaScript中，几乎所

2021-09-05 17:20:41 32

qq_53446980的博客