절차 원숭이-CSDN博客

原创浅谈跨域

什么是跨域？跨域，是浏览器不能执行其他网站的脚本。是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。同源策略限制了一下行为：Cookie、LocalStorage 和 IndexDB 无法读取DOM 和 JS 对象无法获取Ajax请求发送不出去场景同源策略同源策略是由NetScape（网景公司）提出的一个著名的安全策略，它是浏览器最核心也最基本的安全功能所谓的同源，指的是协议，域名，端口相同。浏览器处于安全方面的考虑，只允许本域名下的接口交互，不同源的客户端

2021-04-05 15:51:26 1938 8

原创 echarts——各个配置项详细说明总结

1、图表标题title: { x: 'left', // 水平安放位置，默认为左对齐，可选为： // 'center' ¦ 'left' ¦ 'right' // ¦ {number}（x坐标，单位px） y: 'top', // 垂直安放位置，默认为全图顶端，可选为：

2021-09-17 16:14:08 245

原创前端面试题

1、this指向在全局中this指向window在函数中this谁调用指向谁构造函数中this指向new出来的实例本身我们可以通过 call、apply、bind来修改this的指向，但是在箭头函数中this永远指向父级的上下文，无法通过call、apply、bind来修改它的this指向2、事件模型：事件委托、代理、如何让事件先冒泡后捕获事件委托：事件委托，又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素上。好处: 提高性能，减少了事件绑定，从而减少内存占用如

2021-05-20 21:50:33 126

原创浏览器搜索引擎的SEO

一、什么是SEOSEO是浏览器的搜索引擎优化二、为什么要使用SEO例如：在百度搜索中都是花钱提高百度中被搜索到得几率，SEO是不花一分钱提高被搜索到的几率三、SEO的使用方法keywords它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类，从而增加了网页的被搜索效率语法：<meta name="keywords" content="关键1 ，关键2.。。关键n"/>建议及注意：关键字最好是8个，而且每个关键字最好是不一样的切有关联如果没

2021-05-06 21:23:05 367

原创 Vue简版源码Compile

function Compile(el, vm) { // 保存vm this.$vm = vm; // 保存el元素 this.$el = this.isElementNode(el) ? el : document.querySelector(el); // 如果el元素存在 if (this.$el) { // 1. 取出el中所有子节点, 封装在一个framgment对象中 this.$fragment = this.node2Fragment(this.$e

2021-05-06 07:35:55 86

转载 Vue源码Observer

function Observer(data) { // 保存data对象 this.data = data; this.walk(data);}Observer.prototype = { walk: function(data) { var me = this; // 遍历data中所有属性 Object.keys(data).forEach(function(key) { // 针对指定属性进

2021-05-06 07:31:08 64

原创 Vue简版源码Watcher

2021-05-06 07:29:03 82

转载 Vue简版源码MVVM

/*相关于Vue的构造函数 */function MVVM(options) { // 将选项对象保存到vm this.$options = options; // 将data对象保存到vm和datq变量中 var data = this._data = this.$options.data; //将vm保存在me变量中 var me = this; // 遍历data中所有属性 Object.keys(data).forEach(function (key) { //

2021-05-04 16:33:02 92

原创小米商城项目分析（下）

本篇博客继续上一篇小米商城项目分析（上）继续分析api的简单封装在src目录文件夹下新建一个文件夹utils在util文件中新建一个request.js文件在request.js文件中对接口的基准路径进行封装示图：代码如下import axios from 'axios'// 设置请求基准路径const request = axios.create({ baseURL:'路径地址', //请求时间 timeout: 5000,})// 请求响应器

2021-05-04 10:44:17 383

原创小米商城项目分析（上）

前言：本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。本项目前端参考小米商城实现，但与小米官方没有关系，若需要购买小米产品请到小米官方商城购买。一、项目架构使用vue": “^2.6.11"框架，用@vue/cli 4.5.9版本脚手架搭建项目，css样式结构"element-ui”:"^2.15.1" 渲染 element-ui地址，并搭配"node-sass": “^4.12.0”，“sass-loader”: “^8.0.2

2021-05-04 09:16:33 825 3

原创 vue-router钩子函数和执行顺序

vue-router钩子函数vue路由钩子大致可以分为三类全局钩子：beforeEachbeforeEach函数有三个参数：to:router即将进入的路由对象from:当前导航即将离开的路由next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。单个路由beforeEnter组件内部beforeRouteUpdatebeforeRouteLeavebeforeRouteEnter...

2021-05-04 08:01:55 157

原创 v-for循环中key值的作用

vue中v-for中key值的作用当Vue用 v-for 正在更新已渲染过的元素列表是，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。vue的虚拟DOM的Diff算法，其核心是基于两个简单的假设：两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。同一层级的一组节点，他们可以通过唯一的id进行区

2021-05-03 20:37:23 298 2

原创 v-if和v-for的优先级

首先：v-if和v-for是开发中经常会遇到的2个指令，那么在使用的过程中，2者如果同时存在同一个标签上，谁的优先级会更高一点呢？

2021-05-03 20:19:20 111

原创 Vue中的$nextTick

一、什么是 $nextTick用法上：将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。它跟全局方法Vue.next Tick一样不同的是回调this自动绑定到调用它的实例上。二、$nextTick的理解Vue中DOM的更新采取的时候更新队列，Vue在观察到数据变化时候不是直接更新DOM，而是开启一个队列并缓冲在同一个事件循环中发生的所有数据改变。虽然Vue推荐我们采用数据驱动但是有些时候我们仍然需要使用一些原生DOM操作，当数据改变后，DOM变没有更新，这个时候是

2021-05-03 20:09:52 71

原创梦学谷后台管理系统分析（2）

本篇博客继续上一篇梦学谷后台管理系统分析（1）继续分析4、供应商管理供应商新增、删除 //添加数据 addMester() { this.axios .post("http://mengxuegu.com:9999/pro-api/member", this.Meberusername) .then((res) => { if (res.data.code !== 2000) { this.$mess

2021-05-03 17:46:31 141

原创梦学谷后台管理系统分析（1）

前言：后台管理系统是内容管理系统Content Manage System（简称CMS）的一个子集。内容管理系统是企业信息化建设和电子政务的新宠，也是一个相对较新的市场。对于内容管理，业界还没有一个统一的定义，不同的机构有不同的理解。今天分析一个前后端分离的项目梦学谷管理系统，感兴趣的可以去看一下，请多多指点，大佬勿喷梦学谷管理系统一、项目架构使用vue": “^2.6.11"框架，用@vue/cli 4.5.9版本脚手架搭建项目，css样式结构"element-ui”:"^2.15.1" 渲染 e

2021-05-03 17:16:24 266 2

原创 axios的简单封装

前言：很多人在Vue的项目开发过程中，习惯性的将后端的请求接口写在组件中，在小型项目中可以这么做，如果是在大型项目开发接口比较多，在后期的项目维护中不便于对接口地址的修改，所以我们把axios封装起来，方便查看与维护。实现Api的封装在src目录文件夹下新建一个文件夹utils在util文件中新建一个request.js文件在request.js文件中对接口的基准路径进行封装示图：封装代码如下import axios from 'axios'// 设置请求基准路径const

2021-05-02 21:21:35 186

原创修改数据页面不更新的原因和解决方案

前言：我们在使用Vue框架进行项目开发时会遇到碰到数据更新，但是视图并未改变的情况，那么是什么原因导致视图不更新的，下面就来分析视图不更新的原因以及解决方案。直接添加属性的问题vue2是用过Object.defineProperty实现数据响应式，组件初始化时，对data中的item进行递归遍历，对item的每一个属性进行劫持，添加set,get方法。我们后来新加的newProperty属性，并没有通过Object.defineProperty设置成响应式数据，修改后不会视图更新。解决方案方案1：V

2021-05-02 20:38:41 1077

原创电商后台管理项目分析（2）

本篇博客继续上一篇电商后台管理项目分析（1）继续分析6、商品列表主要的功能对商品的添加、删除添加商品：添加商品信息和左侧导航使用element-ui Steps 步骤条完成  <el-steps :space="200" :active="Number(activeIndex)" finish-status="success" align-center >

2021-05-02 20:12:34 312 1

原创电商后台管理项目分析（1）

前言：后台管理系统是内容管理系统Content Manage System（简称CMS）的一个子集。内容管理系统是企业信息化建设和电子政务的新宠，也是一个相对较新的市场。对于内容管理，业界还没有一个统一的定义，不同的机构有不同的理解。今天分析一个前后端分离的项目电商后台管理系统，感兴趣的可以去看一下，请多多指点，大佬勿喷电商后台管理项目地址一、项目架构使用vue": “^2.6.11"框架，用@vue/cli 4.5.9版本脚手架搭建项目，css样式结构"element-ui”:"^2.15.1"

2021-05-01 17:00:18 581

原创 v-if和v-show的区别

一、共同点v-if 和 v-show 都可以控制元素的显示与隐藏二、不同点v-if通过创建或删除DOM节点来实现元素的显示隐藏（隐藏后DOM元素不存在）v-show通过css中的display属性来控制（隐藏后DOM元素是还存在的）三、性能对比v-if有更高的切换消耗；v-show有更高的初始渲染消耗四、应用场景v-if更适合数据的筛选和初始渲染v-show更适合元素的切换...

2021-04-29 21:44:02 173

原创组件中data为什么是个函数

一、组件中的data组件是可以复用的Vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，二、为什么data必须是一个函数为什么组件中data必须是一个函数了而不是对象, 我们首先来看一下第一个声明式渲染的demo中data我们只在当前页面的挂载的div#app这个点上使用，

2021-04-29 20:57:16 128

原创 vuex的核心概念和运行机制

什么是vuex？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储和管理程序的所有组件的数据Vuex有什么好处？及使用场景在大型的程序中如果多个组件中用到的数据我们可以存储到vuex,如果小型项目我们可以适当的使用vuexvuex的五个核心概念1、State所有的数据都存储在state，state是一个对象2、mutationsmutations可以操作state中的数据3、actions只能调用mutations 的方法，也可以做异步操作获取数据4、ge

2021-04-29 20:04:25 165

原创 Vue数据双向绑定的实现原理

Vue中的双向数据绑定是如何实现的Vue的双向数据绑定是通过数据劫持结合发布者订阅者模式来实现的vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步：需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据

2021-04-28 21:46:41 246

原创 vue组件通信详解

常用的组件通信1、父组件向子组件传值1）在父组件的子组件标签上绑定一个属性，挂载要传输的变量（2）在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型}2、子组件向父组件传值1）在父组件的子组件标签上自定义一个事件，然后调用需要的方法（2）在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件，数据是以参数的形式进行传递的3、兄弟组件之间传值（1）在src中

2021-04-25 07:42:32 441

原创 H5新增多媒体标签

H5新增多媒体标签有以下两个：视频：<video src=""></video>音频：<audio src=""></audio>使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件<audio>音频标签HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的1.音频格式<audio>音频标签常见属性<audio>音频标签语法格式<

2021-04-22 11:44:14 138

原创 GET和POST的区别

get 和 post是HTTP中请求数据的方法；application json 与form表单是HTTP中传输文件的类型，所以要了解其中的区别，要先了解HTTP 协议格式和 HTTP Header请求报文、响应报文我们发送的http请求，浏览器都会整理成请求报文，发送到服务器。服务器响应的数据，浏览器会以响应报文的形式接受。HTTP请求报文:个HTTP请求报文由四个部分组成：请求行、请求头部、请求空行、请求数据。HTTP响应报文:同样的，HTTP响应报文也由四部分组成：响应行、响应头、响应

2021-04-20 21:56:04 71

原创 Vue中keep-alive的深入理解和使用

什么是keep-alive?keep-alive是Vue提供给我们一个内置组件，他可以用来保存我们路由切换时组件的状态组件使用keep-alive以后会新增两个生命周期 actived() deactived(),我们在切换路由的时候，想保存组件的状态，比如列表页面进入详情，我们想保存列表滚动的位置，我们就可以使用keep-alive保存列表页面的滚动位置。简单理解当我们从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表

2021-04-18 16:33:50 204

原创 vue生命周期共有几个？分别在什么时候使用？

beforeCreate( 创建前 )beforeCreate() 创建前的阶段，这个时候data中的数据，还未定义，所以不能使用created() 最早开始使用 data和methods中数据的钩子函数created ( 创建后）实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法

2021-04-14 21:33:01 953

原创 vue.js常用指令及用法

v-ifv-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中<template> <div id="app"> <h1>Title</h1> <p>paragraph 1</p> <p>paragraph 2</p>

2021-04-12 21:35:53 145

原创 JS常用事件及触发方法

onclick点击事件 <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

2021-04-11 20:15:23 485

原创从输入url到页面加载完成发生了什么

1、浏览器的地址栏输入URL并按下回车。我们常见的URL是这样的:http://www.baidu.com,这个域名由三部分组成：协议名、域名、端口号，这里端口是默认所以隐藏。除此之外URL还会包含一些路径、查询和其他片段，例如：http://www.tuicool.com/search?kw=%E4%。我们最常见的的协议是HTTP协议，除此之外还有加密的HTTPS协议、FTP协议、FILe协议等等。URL的中间部分为域名或者是IP，之后就是端口号了。通常端口号不常见是因为大部分的都是使用默认端口，如HT

2021-04-08 21:22:48 271

weixin_49790903的博客