![](https://img-blog.csdnimg.cn/20210723171216533.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 84
在vue学习和开发中的问题和笔记记录
浪漫主义码农
有人辞官归故里,有人星夜赶科考,前途似海来日方长。满怀希望才能所向披靡
展开
-
Vue监听属性详解
Vue监听属性什么是监听属性?????所谓监听就是对内置对象的状态或者属性变化进行监听并且做出反应的响应,监听属性,意思就是可以监视其他数据的变化。监听属性和计算属性的区别?计算属性是依赖的值改变后重新计算结果更新DOM,会进行缓存。属性监听的是属性值,当定义的值发生变化时,执行相对应的函数。最主要的用途区别:计算属性不能执行异步任务。计算属性一般不会用来向服务器请求或者执行异步任务,因为耗时可能会比较长,我们的计算属性要实时更新。所以这个异步任务就可以用监听属性来做。总之一句话:comp原创 2021-11-23 20:44:01 · 2846 阅读 · 3 评论 -
Vue动态样式你不会吗
Vue动态样式背景:在我们的前端界面中,很多的地方的样式都是不确定的状态,要根据其他内容的变化而变化样式的。本文总结一下自己用到的动态样式方法。一、动态绑定 :style????1.使用对象方式通过v-bind:style来绑定style样式,“”引号里面使用对象的方式,为key,value形式,key值为css属性名,注意的是例如font-size,在key中要写成fontSize驼峰命名规则。value就是我们绑定的值,可以动态去改变。<h1 :style="{ color: Color原创 2021-11-20 21:28:49 · 3209 阅读 · 0 评论 -
vue计算属性详解
vue计算属性详解什么是计算属性计算属性,字如其名,首先它是属性,其次有计算的“功能”说的官方一点:计算属性就是当其依赖属性的值发生变化时,这个属性的值会自动变化,与之相关的DOM部分也会同步自动更新。计算属性的使用在computed配置项中添加我们的计算属性,在属性里面写我们的逻辑代码。例子:我们使用input来加入数组元素,同时使用计算属性计算这个数组的和。注意:计算属性其实是属性,在页面上使用只需要用属性值,不要带(),不然就变成方法了。代码<template> &原创 2021-11-19 21:17:09 · 1481 阅读 · 0 评论 -
vue中 this.$set的使用
vue中 this.$set的使用背景:在我写前端项目的时候,后端给我们的一个json对象,并且我已经渲染在页面上了。但是由于我自己的需求,想往返回的对象里面添加一个字段,于是我用push一个字段进去,添加是添加进去了,但是页面渲染却没有变化。后来才意识到不是响应式的。如果我们要让这个新字段是响应式的,就要使用到this.$set来注入数据当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。使用this.$set原创 2021-11-16 19:56:50 · 1941 阅读 · 0 评论 -
JavaScript节流与防抖
节流与防抖背景:当我们频繁去请求资源、接口等其他的时候,就会造成操作Dom频繁,接口压力大等等,性能下降。比如我有时候会每次搜索会猛地敲回车,在网络不很好的时候,点击下一页按钮的时候也会一直点,可能网络不好也可能服务器性能低。为了避免频繁触发同一事件或请求,这时候就要用到节流和防抖了。what?这是啥?????当我第一次听到这两个名字的时候,心想是指节省流量、防止手抖吗。百思不得其解,赶紧就去学习。概念:简单来说:节流和防抖就是为了防止事件在短时间内多次触发的两种解决方案。都是用过减少请求的次数,原创 2021-11-10 17:03:51 · 785 阅读 · 1 评论 -
vue 解决axios请求出现前端跨域问题
vue 解决axios请求出现前端跨域问题首先祝大家1024节日快乐最近在写纯前端的vue项目的时候,碰到了axios请求本机的资源的时候,出现了访问报404的问题。这就让我很难受。查询了资料原来是跨域的问题。在正常开发中跨域问题有很多的解决方案。最常见的就是后端修改响应头。但是前端也可以解决,通过反向代理。为了防止下一次这样的错误出现,记录一下,总结一下。所以现在我们来复盘一下,然后解决掉。一、为什么会出现跨域的问题?跨域:浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一原创 2021-10-24 13:27:07 · 1190 阅读 · 1 评论 -
5分钟掌握Vuex,深入浅出
5分钟让你掌握Vuex,深入浅出一、什么是Vuex?概念:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单点来说(说人话),就是实现任意组件中通信,并可以检测数据的变化。二、Vuex原理Vuex是集中于MVC模式中的Model层,规定所有的数据操作必须通过 action - mutation - state 的流程来进行,再结合Vue的数据视图v-moder等双向绑定特性来实现页面的展示原创 2021-10-20 13:30:33 · 335 阅读 · 2 评论 -
Vue中v-for循环语句使用,以及其中key的原理
Vue中v-for循环语句使用,以及其中key的原理一、列表渲染在我们使用v-for的场景中,使用最多的就是用来渲染列表。渲染的数据主要有数组、对象、字符串等。常用的三种:遍历数组迭代对象字符串遍历指定次数代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten原创 2021-09-15 20:35:26 · 671 阅读 · 0 评论 -
vue router路由的最全介绍和使用(一)
vue router路由的介绍和使用一、路由的介绍对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义。前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求。路由的使用在vue是重点,也是核心所在。Vue.js 路由允许我们通过不同的 URL 访问不同的内容。就是我在页面点击一个按钮需要跳转到对应的页面,这就是路由跳转学习路由我们得知道route、routes、router:route:首先它是个单数,为原创 2021-07-05 17:30:35 · 2579 阅读 · 4 评论 -
Vue安装环境最全教程,傻瓜式安装
Vue安装环境最全教程在我开始学习vue的时候,对于新手安装这个环境是真的搞人心态,不友好。在不断的安装,找教程,又帮同学配置了下,有必要自己总结下。对于新手搭建vue环境,就一步步来就ok了。在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。一、需要的工具在我们安装之前知道下面的东西,也是vue项目的核心。node.js环境(npm包管理器)vue-cli 脚原创 2021-06-30 21:43:20 · 47931 阅读 · 41 评论 -
vue-cli Failed to download repo vuejs-templates/webpack连接超时解决办法
vue-cli Failed to download repo vuejs-templates/webpack连接超时解决办法在我配置完nmp、node.js、vue-cli环境,准备创建项目进行最后一步的测试的时候Vue init webpack 项目名 总是失败,都是报这个错,原因是因为无法连接外网或者连接超时导致经过查阅资料,记录下自己的错误。解决的办法是使用离线下载,我们需要下载github仓库中的vue-templates/webpack,然后解压到本地。:需要手动下载 webpac原创 2021-06-19 19:05:19 · 3642 阅读 · 2 评论