- 博客(31)
- 收藏
- 关注
RSS订阅原创 vue修改计算属性(computed)里面的值
1.定义:要用的属性不存在 要通过已有属性计算得来2.原理:底层借助了Object.defineproperty方法来提供getter和setter3.get函数什么时候执行?(1).初次读取的时候会执行一次(2.)当依赖的数据发生改变时就会再次调用4.优势:与methods实现相对比,内存有缓存机制(复用),效率更高 调试方便5.备注:1.计算属性最终会出现在vm上 直接读取使用即可2.如果计算属性要被修改,那必须写set函数去响应修改.且set中要引起计算时依赖的数据发生改变注
2022-02-20 19:33:57
10485
原创 vue计算属性 和监听 区别
computed能完成的功能 watch都可以实现 反之不行 例如 :watch可以执行异步操作监听属性(compued):1.一次只能计算一个 变量 如果data有多个变量 则需要重新写一变2.只是监听数据源data里面的属性,不产生新的属性 所以不用写return计算属性($Watch):1.只需要一个就行 因为 计算属性依赖于数据源data 里面的属性的但是一次可以依赖多个2. 因为新增属性 所以要写 return监听://监听的一种方式 vue 对象创建完成后直接写到实例属性上
2022-02-20 19:31:52
1049
原创 vue 循环用index 和唯一id的区别使用场景
最下面有图片介绍哦!1.虚拟DOM种key的作用:key是虚拟DOM对象的标识 当数据发生变化时,vue会根据新数据生成新的虚拟DOM, 随后vue会进行新的虚拟DOM与旧的虚拟DOM的差异比较 规则如下:对比规则:(1).旧的虚拟DOM找到了与新虚拟DOM相同的key:若虚拟DOM中 内容没有变 直接使用之前的真实DOM(复用)若虚拟DOM内容变了 则生成新的真实DOM.随后替换掉页面之前的真实DOM(2).旧虚拟DOM未找到与新虚拟DOM相同的key:创建新的真实DOM 随后渲染到页面
2022-02-20 19:29:54
854
原创 常见状态码
200 - 请求成功301 - 资源（网页等）被永久转移到其它URL404 - 请求的资源（网页等）不存在 ,服务器无法正常提供信息,或是服务器无法回应且不知原因500 - 内部服务器错误405-客户端请求中的方法被禁止408-服务器等待客户发送时间过长,超时400 是 HTTP 的状态码，主要有两种形式：1、bad request 意思是 “错误的请求”；2、invalid hostname 意思是 “不存在的域名”。...
2021-10-18 13:34:21
671
原创 适配 兼容 响应式布局
适配:一个网页在不同的屏幕或分辨率下 显示相同的样式浏览器兼容:一个网页 不同的浏览器 或者版本 显示相同的样式响应式布局:在不同的屏幕,不同的分辨率下 显示不同的样式
2021-10-18 13:19:13
76
原创 DOM节点操作
1.浏览器会根DOM模型,将html文档解析成一系列的节点,这些节点组成了DOM树2.HTML文档中所有的东西都可以成为节点 比如元素节点 注释节点.属性节点3. 节点类型 log + 元素名+.nodeType标签 1属性节点 2文本节点 3ul.childNodes :某个元素内的所有子节点console.log(ul.childNodes);4.children 子节点5.firstchild 第一个子节点(所有类型的子节点)6.firstElementChild
2021-10-18 13:14:22
46
原创 vue echarts使用
单组件使用用as 引用 不能直接引用会报错import * as echarts from 'echarts'初始化let myChart = echarts.init(document.getElementById('myChart'));绘制myChart.setOption(option);全局使用在main.js里面引用用as 不能直接引用会报错import * as echarts from 'echarts'Vue.prototype.$echarts = echa
2021-10-18 13:09:02
85
原创 ajax原生实现流程
参考文档:点击直达1.创建请求对象let xhr = new XMLHttpRequest();请求路径：(1)协议： https(2)域名： restapi.amap.com 区分服务器(3)端口号： 默认端口号443 (http:8080) 可以省略 区分服务器下不同的服务(4)资源路径：/v3/weather/weatherInfo(5)参数: ? 号后面拼接get请求参数参数格式： key=value 多个参数之间用 & 符号连接2.指定请求方式 请求路径
2021-09-23 17:28:31
334
原创 三次握手小总结
syn(synchronous)同时的，同步的，在http中指建立请求的第一个包ack (acknowledgement) 确认的意思fin(finally): 我要最后一次发送指令啦(个人理解)RST:缩写：Reset重连位第一次握手:发送端首先发送一个带SYN（synchronize）标志的数据包给接收方【第一次的seq序列号是随机产生的，这样是为了网络安全，如果不是随机产生初始序列号，黑客将会以很容易的方式获取到你与其他主机之间的初始化序列号，并且伪造序列号进行攻击】第二次握手:接收端收.
2021-09-22 16:36:15
351
原创 vue v-if与v-for 的区别
v-if 条件渲染 DOM是否创建 为false 是 不显示标签v-show 是否显示 DOM已经创建了 显示标签频繁的切换 显示隐藏用 showv-show：false 相当于 给元素加了 display：none,隐藏起来。v-if：false 相当于 从页面上删除了元素， remove掉了 。...
2021-09-22 09:25:04
445
原创 vue自己造假接口
在没有网络的时候也可以自己测试代码在vue config.js 里面配置module.exports = { lintOnSave: false, devServer:{ open:true, //mock API //before app 都来源于node里面的express before(app){ app.get("/api/list",(req,res)=>{ res.json( {id:1,na.
2021-09-22 09:22:37
371
原创 Git指令总结
Git步骤:1.提交 git commit-m ‘提交备注信息就是自己改的啥’ 提交到本地缓存上2.git add . 提交当前目录下所有改变的信息3. git push 推送到服务器ls 是列出当前目录下的文件git log 日志git status 状态解决冲突每次提交之前 拉取服务器最新代码 git pull origin master 先备份一份下面是其他指令:git init 初始化一个Git代码库git clone [url] 从线上下载一个项目到本
2021-09-20 15:51:22
52
原创 px em rem 区别
参考网址详细链接直达任意浏览器的默认字体高都是16px如果自己设置字体大小 按设置的字体大小转换宽高也能使用1em=16px。那么12px=0.75em,10px=0.625em在css中的body选择器中声明Font-size=62.5%px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em:相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。特点:会继承父元素的大小rem:CSS3新增的一个相对单位: 相对h
2021-09-20 15:48:51
91
原创 帧动画参数
参考链接:详细链接animation:动画10s 是时长 3是次数animation:guigui 10s 3 ;keyframes 关键帧动画@keyframes name {}animation-iteration-count: infinite; 重复次数 infinite:无限次transform-origin: bottom; 旋转的角度 默认为中心animation-play-state: paused; 暂停动画animation-direction: rev
2021-09-20 15:45:33
80
原创 JS常用事件总结
窗口事件onload 当网页加载完毕的时候触发 会覆盖 只有一个生效onscroll 滚动窗口的时候出发鼠标事件onclick 点击ondblclick 双击onmouseover onmouseleave 鼠标移入 移出onmouseenter onmouseleave 鼠标移入移出onmousemove 鼠标移动onmousedown 鼠标按下onmouseup 鼠标抬起oncontextmenu 鼠标右键onselectstart 鼠标开始选中键盘事件onkeyd
2021-09-18 17:58:35
62
原创 vue slot 插槽
普通插槽解决 使用组建的时候 组件标签内部的内容会被自己按模板完全替代的问题 比如 页面显示顺序 在组件模板里面添加内容<script src="../../../vue.js"></script><script type="text/html" id="guigui"><div> <h1>组件标题</h1> <footer>组件尾部</footer> <slot>
2021-09-18 17:55:35
93
原创 vue 哈希值 url
六部分组成: 协议 域名 端口 路径 参数 哈希值哈希值变化的时候 页面不会跳转a里面的#省略的是url url的hash值 专门用于实现前端路由 ,不同的hash值对应不同的页面 ,当hash发生变化的时候, 当前页面中的内容也会发生变化 ,而且这种变化是无跳转的 hash用于前端页面控制 所以向服务器发送请求的时候 url的hash 是不会发送的...
2021-09-18 17:53:54
330
原创 弹性布局用法
参考文档 :https://www.runoob.com/w3cnote/flex-grammar.htmlflex 弹性order 子标签属性 多个盒子排放顺序 默认0父元素设置`display:flex子元素flex : 1order:10父元素设置colum竖着 主轴的方向row 横着 flex-direction:column;父元素设置文本垂直上下居中 display: flex;justify-content: center;align-items: cente
2021-09-18 17:51:32
626
原创 TS类型 总结
1.类型注解常见的原始类型:string number boolean undefined null symbol变量:类型名字赋值的时候 如果类型不匹配 会报错类型声明之后,不能更改类型let str1: string;str1 = "郑州" // 正确// str1 = 123 // 错误let isSelected: boolean = false// isSelected ="s" let decLiteral: number = 6;let hexLiteral
2021-09-18 17:48:13
4630
原创 原型链是什么? 查找规则又是怎样的?
只要是对象内部就有_proto_ ,而 proto_指向原型对象通过对象的_proto 属性 形成的链式查找机制,即原型链查找规则:1.当访问一个对象的属性或者方法时,首先看该对象自身是否有该属性或方法2.如果没有就查找它的原型(即_proto_) 看_proto_指向的原型对象上有没有3.如果还没有 继续查找 看原型对象的原型4.以此类推 直至找到 Object.prototype._proto_为null为止...
2021-09-18 17:38:13
473
原创 vue 按需加载
按需加载，又称延迟加载或者懒加载，只有在使用到的时候才会加载进来import引入的模块，会在加载index.js文件的时候，去加载所有的模块Vue中提供import的加载方式import Vue from ‘vue’import Router from ‘vue-router’import ‘@/components/Base’ import ‘@/components/Bg’使用这种加载方式，会在组件初始化的时候全部加载进来，如果文件过大，会导致页面加载缓慢，体验性变差。具体使用方法：
2021-09-18 17:36:19
370
原创 vue计算属性 和监听 区别
监听属性(compued):1.一次只能计算一个 变量 如果data有多个变量 则需要重新写一变2.只是监听数据源data里面的属性,不产生新的属性 所以不用写return计算属性($Watch):1.只需要一个就行 因为 计算属性依赖于数据源data 里面的属性的但是一次可以依赖多个2. 因为新增属性 所以要写 return监听: //监听的一种方式 vue 对象创建完成后直接写到实例属性上 //参数1:监听的对象 数据源 data里面的变量 // 参数2:回调函数
2021-09-17 15:43:59
802
2
原创 vscode npm常用指令 安装总结
一般来说 内部的this指向当前绑定事件的DOM对象(谁调用fun，this就指向谁)1.普通 函数内部 this 指向 window原因 属于全局变量2.事件函数内部 this 指向绑定 事件的dom对象3.对象的函数(方法) 内部的this 指向对象`4.定时器内部的函数 this 指向 window5. 对象无法产生作用域 相当于 eat 定义在了全局变量.so this6.methods 的方法里面 this指向 vue实例化对象7.过滤器里面的函数方法中 this指向win
2021-09-17 15:40:47
966
原创 js跨域是什么? 解决方法有哪些?
跨域:当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域一个页面发送到非本身来源的请求叫做跨域请求，浏览器只禁止ajax跨域请求。三种跨域请求的方式：1，cors，服务器在响应头中添加access control allow origin字段，浏览器在收到请求之后就会认为本次请求时允许跨域的。2，JSONP,浏览器使用创建script标签的形式发送请求，将一个函数名作为请求参数发给服务器，服务器将需要返回的数据封装在一段js代码中（把前端发来的函数名进行调用，把要发送的
2021-09-17 15:26:57
135
原创 闭包 概念 与理解
闭包是一个函数 一个作用域可以访问另外一个函数内部的局部变量 局部变量所在的函数就是闭包函数作用优点 : 可以让局部变量 持久保存 延伸了变量的作用范围闭包可以实现对象的私有属性和私有方法。闭包可以封装变量，从简减少对全局作用域的污染。缺点 :1.由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包, 否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。2、闭包会在父函数外部,改变父函数内部变量的值。从外部读取局
2021-09-17 15:21:44
112
原创 async具体使用方法以及原理
async介绍:1.es7 的 语法2.通常和这个promise联合使用3. 这个 async/await语法 也是异步代码用同步代码的写法async 异步的 修饰一个函数await async wait 异步的等待 等待我们上面的函数完成* 1. 简单的写个 函数 调用 输出结果 hello async* 2. 函数加个 修饰符 async 输出的结果 是 Promise对象* 3. 分析结果 async 给函数 自动包裹了一层 Promise resolve()函数
2021-09-17 15:14:25
1745
原创 vue promise用法 原理
promise 就是一个容器 里面保存着未来才会结束的事件通常就是异步操作的结果 从语法上说 promise 是一个对象可以获取异步的消息,各种异步操作可以用同样的方式处理promise有三种状态 不受外界影响pending 进行中fulfilled 已成功rejected 已失败优点在异步流程中 把执行代码和处理结果的代码清晰的分离了,将异步操作以同步的流程表达出来 避免了层层嵌套的回调函数promise 对象提供统一接口 API 是的控制异步操作更容易 只有异步操作的结果 可以决定当前
2021-09-17 15:06:41
511
原创 改变this指向
三种方法:call() apply() bind() 都可以改变函数内部的this指向call() apply() 可以调用函数区别: apply()传递参数时的形式是数组//参数1(p1):要改变的this指向谁//参数2(2021):正常调用函数要传递的参数call() var res=p2.getAge.call(p1,2021) console.log(res); apply() varres =p2.getAge.apply(p1
2021-09-17 14:52:44
49
原创 vue组件传值
子组件 和父组件都不能直接使用对方里的数据vue模板里只能使用自己数据 dataprops属性 自定义组件的属性 可以写到 组件的开始标签里面 主要用来接收 父组件传过来的变量 可以穿 基本数据类型 数组 对象 函数父组件传给子组件 必要条件1.子组件必须在props里面加收到传值名字2:父组件的模板中 使用子组件必须通过属性传值(v-bind) <div id="app"> <input type="text" v-model="msg" />
2021-09-17 14:41:33
82
原创 vue 生命周期
注意:不能使用箭头函数来定义一个生命周期方法beforeCreate: 在实例对象(当前组件)创建之前created: 在实例对象(当前组件)创建之后 这里面写ajax beforeMount: 模板加载挂载之前 获取不到 dom元素mounted: 模板加载挂载之后 可以获取dom元素beforupdated: 页面更新前调用updated: 页面更新后 初始化的时候调用 例如 点击activate：是在被包裹组建被激活的状态下使用的生命周期钩子deactiva
2021-09-17 14:36:45
56
原创 vue路由传参的三种方式
vue传参的三种方式:先有如下场景 点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去<div class="examine" @click="insurance(2)">查看详情</div>1.传递的参数会在url 地址栏显示methods：{ insurance(id) { this.$router.push({ path: '/particulars', query: { id
2021-09-17 14:33:18
1225
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人