qq_46448507-CSDN博客

原创 Vue.set设置响应式数据

vue最强大的特点在于它的响应式，所谓响应式是在vue的初始化的过程中，通过数据的劫持结合发布者-订阅者模式为每一个属性增加了get和set方法，使之当对应的数据依赖发生变化的时候能实时侦测到变化，以便于视图的更新。如果我们需要的一些数据是在初始化之后创建的，那么它是否还会具有响应式？let vm=new Vue({ data:{ name:'张三', age:18, person:{ name:'李四', age:20 } }})//毫无疑问，此时data中的数据是

2020-08-11 12:39:41 1156

原创手写Promise.all实现方法

Promise.all()对象方法接收一个promise对象数组作为参数，只有当所有的promise的状态变为resolve或者reject时，才会去触发then()回掉函数，并且他们都是并发执行的。var p1=Promise.resolve(1) p2=Promise.resolve(2) p3=Promise.resolve(3)Promise.all([p1,p2,p3]).then(function(reslove){ console.log(reslove) //[1,2,3]})

2020-08-09 12:37:25 927

原创 vuex

什么是vuex？vuex是vue.js推出的状态管理工具，采用的是集中式管理所有组件的状态，并以相应的规则，保证状态以一种可预测的方式发生变化。这是vuex官网的图片，可以看出来是由一下及部分组成的state存储的是状态，需要的组件中共享的数据mutations是vuex中唯一能直接操作state中的状态，通过store.commit方法来更改state的状态（mutations是一个同步函数）gettergetter类似于vue中的计算属性，是对state中状态进行加工处理之后的结果，

2020-07-31 18:13:47 135

原创父组件scoped会影响子组件

demo：问题父组件scoped影响子组件<template> <div id="app">  <div class="box"> 这是根组件</div> <div class="box"> 这是根组件</div> <div class="box"> 这是根组件</div> <!-- 子组件没

2020-07-29 22:35:21 1119

原创 vueRouter

为什么要用vueRoutervue-router是vue官方给出的一个基于vue的路由管理器。首先我们可以看一下用window.onhashchange模拟一下路由<body> <div id="app"> <a href="#/one">1111111</a> <a href="#/two">22222222</a> <a href="#/three">3333

2020-07-29 13:05:19 78

原创 ajax，fetch，axios总结

ajax这里讲解的是jquery中的ajax$.ajax({ type:'get',//请求的方式，get post url:''，请求地址 data:{ id:1, name:''lisi }//通常时post请求携带的参数 dataType:jsonp,//jquery中处理跨域的方式或者是json 表示服务器返回的数据类型 success：function(data){ console.log(data)//成功时，后台返回的数据 }})jquery中的ajax是

2020-07-27 22:00:42 103

原创 vue响应式原理

什么是vue响应式Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。 --官方文档例如 <div id="app"> <div>{{price}}</div> <div>{{num}}</div> <div>{{total}}</div> </div> .

2020-07-27 13:19:23 82

原创构造函数和原型的总结

首先需要说明的是通过构造函数来创建对象的方法有很多，es6之后是通过class来创建对象的。那么今天就用构造函数的方式来创建对象。我理解的通过构造函数来创建对象，实际上就是把公共的属性和方法封装成函数，然后实例化。下面来创建一个简单的构造函数 function Star(name, age) { this.name = name; this.a...

2020-07-26 20:07:54 79

原创 js跨域请求的几种方式

什么是跨域？跨域请求的方式？js跨域：指的是在不同域之间进行数据交换与通信，js中默认只有在同源的情况下才能进行数据的传输。同源：相同域名，端口，协议。http://www.aaa.comhttp://www.aaa.com/bbb //同源第一种解决跨域的方法：jsonp(json with padding)顾名思义就是数据填充。至于怎么填充，那就和html几个标签有关系了，script，link，img，iframe等，他们用到的原理都一样，都是由于这些标签不存在跨域请求限制。 .

2020-07-25 22:33:09 594

原创 vue组件插槽

1，组件插槽solt就是插槽的意思，就是一块html模板，最后到底怎么显示是由父组件决定的。但是插槽显示的位置是由子组件决定的，slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块。这样就使组件可复用性更高，更加灵活。我们可以随时通过父组件给子组件加一些需要的东西。2，slot父组件向子组件传递模板内容 <div id="app"> <menu-list>父组件内容</menu-list> </div>

2020-07-24 22:35:04 105

原创 watch和computed

watchwatch主要是侦听data里面数据的变化，具体是对data里面属性名的监听，因为watch是依赖data的数据的，当数据发生变化的时候就会触发watch里的函数 var vm = new Vue({ el: '#app', data: { firstname: '', lastname: '', c:{ b:2 }

2020-07-23 12:04:31 125

原创 call，apply ，bind区别与联系

相同点1，call，apply，bind都是Fuction.prototype的方法，所有的function都具有的方法。2，并且都是可以改变函数内部this指向的方法var tom ={ name：'汤姆', eat:function(){ console.log(name+'正在吃饭') }}function Preson(name){ this.name=name console.log(this.name)}const ls=new Preson()ls.call(to

2020-07-22 14:35:13 188

原创解决vue keyup.enter与失去焦点事件绑定相同函数会触发两次的问题

问题分析：按下键盘也会触发失去焦点事件，所以会触发两次解决办法 @keyup.enter.native="$event.target.blur" @blur="handleInputConfirm() 让键盘事件指向鼠标失去焦点，通过$event.target.biur...

2020-06-09 18:49:31 1572 1

原创前端关于浏览器 http知识的总结

浏览器的存储方式get和post请求的区别浏览器渲染的理解http状态码跨域问题以及解决方案web的性能优化浏览器的存储方式cookie：一般是由服务器生成的，数据大小4k，在与服务器通信是每次都会携带在请求头中，影响请求速度，一般用于登陆验证，大多数浏览器都兼容,cookie保存在浏览器端，可以设置过期时间等（setMaxAge）没有封装好的api。localstorage：h5新增加的特性，本地存储使用的，是为了解决cookie存储空间不足的问题，存储大小5m左右，没有过期时间，除非.

2020-05-24 11:01:04 111

转载关于vue项目的一些错误处理

报错信息sockjs.js?9be2:1606 GET http://192.168.1.101:8080/sockjs-node/info?t=1583642185049 net::ERR_CONNECTION_TIMED_OUT错误原因在使用vue-cli脚手架创建项目的时候，在cnpm create app命令后，项目创建成功后通过npm run serve命令运行以后，控制台报错，sockjs.js?9be2:1606 GET http://192.168.16.105:8080/sockj

2020-05-15 18:14:34 596

qq_46448507的博客