![](https://img-blog.csdnimg.cn/2021071919530519.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
关于Vue的学习记录
fanny_匚
这个作者很懒,什么都没留下…
展开
-
vue 报错 :Error in render: “TypeError: Cannot read property ‘length‘ of undefined“
问题报错:Error in render: “TypeError: Cannot read property ‘length’ of undefined”在vue的template 中使用length 进行判断出现如上的报错 <div class="com" v-if="comment.hotComments.length > 0">解决办法:<div class="com" v-if="comment.hotComments !== undefined &&am原创 2021-07-20 16:31:33 · 1214 阅读 · 0 评论 -
vue父子组件的渲染问题
今天自己在仿写网易云音乐的项目时,遇到一个问题,在使用一个播放的组件的时候,需要把父组件的url 传递到子组件使用,但是子组件获取到的url一直是undefined.问题分析:1.数据获取是异步请求2.父子组件传值也是异步的直观一点直接看代码:template://父组件 <div class="video"> //子组件先与数据回来执行,所以拿到的url是undefined //<Playcard ref="video" :url="Url原创 2021-07-20 16:31:00 · 414 阅读 · 0 评论 -
vue过滤器
在vue.js中可以自定义过滤器用于一些常见的文本格式化,过滤器可以用在胡子语法和v-bind表达式,过滤器是javascript 函数,由管道符号 |表示在template 中的使用<!-- 在双花括号中 -->{{ message | capitalize }}> message 作为 capitalize过滤器的第一个参数<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></d原创 2021-07-19 19:58:49 · 56 阅读 · 0 评论 -
axios的请求拦截与相应拦截
问题:1.请求携带token2.全局的请求loading解决:解决携带token问题 --初次登陆获取token保存在本地1.每一个需要token的请求都携带token,但是代码重复很多,request.Gethighquality = (params) => { return request.get('/top/playlist/highquality', { params, headers:{Authorization: localStorage.getItem('token'原创 2021-07-19 19:58:19 · 145 阅读 · 0 评论 -
vue .sync 修饰符
作用:.sync 修饰符作用: 让子组件可以更加优雅的修改父组件的data单向数据流所有的prop都是其父子prop之间形成一个单向下行绑定,:父级prop的更新会向下流到子组件中,但是反过来是不可以的(不可以在子组件中修改父组件传递的prop),这样会防止从子组件以外的改变父组件的状态,导致数据流向难以理解prop使用正常情况下,1.我们可以直接在template中使用prop的值 2. prop传递一个data的初始值,使其作为一个本地数据使用 3. 在计算属性中这个prop 作为一个初始值进原创 2021-07-19 19:57:48 · 121 阅读 · 0 评论 -
vue 4.x项目console.log()打印报错问题
vue4.x的项目 正常使用console.log(data) ,一直报错,但是使用window.console.log(data),又没有问题,虽然可以使用但是每次打印的时候很是麻烦原因: 创建项目的时候使用了ESLint检查代码质量的提示,解决: 关闭ESLint 的检查这样就可以了...原创 2021-07-19 19:57:14 · 365 阅读 · 0 评论 -
vue-Vant自动引入样式不生效问题
vant官网链接1.确保安装了Vant和babel-plugin-import2.如果上面都做了,看下babel.config.js是否配置3.确保下图红框中导入,( [Button.name]: Button,)这个是官网没有说明的一点,需要个人添加,,要不然爆红在这里插入图片描述4.最后出现没有样式有两点;1.安装了babel-plugin-import依赖需要重新启动项目,重新启动项目,刷新页面就会出现2.第一个方法不行,就看看项目结构里有没有vue.config.js,根据网上查原创 2021-07-19 19:56:41 · 3142 阅读 · 0 评论 -
vue 基础指令记录
Vue 中的 真值 , 代表一切显示为真的值(不单单只是指true);v-if 是一个语句 , 所以只能添加在一个元素上 , 如果现根据条件渲染多个元素 , 可以使用一个template标签包裹起来v-else 指令必须紧跟在v-if 或者是 v-else-if的后面 不然是不会被是识别的vue 中会尽可能高效的渲染元素,通常会复用已有的元素,而不是从头开始,但是如果需要允许用户可以切换登录的方式 , 那么<!-- vue 会高效的复用已有的元素,而不是从头开始 , 如下面的例子,只有.原创 2021-07-19 19:56:04 · 169 阅读 · 0 评论 -
vue 新增属性 $attrs及$listeners (组件通信)
介绍:vue组件之间的通信方式有很多种,props/emit , event bus, vuex, provide/inject等,还有一种通信方式就是 $attrs和 $listeners,下面通过一个三代组件的关系来看一下这两个属性$attrs包含了父作用域中不作为prop识别的特性绑定(除了class 和 style ),如果没有声明prop ,就会包含父作用域所有的绑定,传入内部组件简而言之就是 接收除了props声明外的所有绑定属性(class , style 除外)//一级 ----原创 2021-07-19 19:55:30 · 246 阅读 · 0 评论 -
Vue Loader 之 Scoped CSS 与热重载的影响
前情介绍其实在学习已经使用Vue这么久以来从来没有认真的看过Vue Loader生态系统的详细介绍,之前在工作中使用第三方的UI插件的时候难免有时需要自定义一些样式,但是每次在实现的时候对于>>> , /deep/,还有新遇到的v-deep的用法原理都不是很了解,每次都是在三种方式中尝试,很是无脑,后来一次偶然的机会看到了Vue Loader中的油相关的介绍,当时没有详细的看,但是内心已经种下了一颗要系统学习一遍的种子,所以今天的任务就是过官网,并且在这个过程中记录下自己的笔记,废话不多原创 2021-07-19 19:54:56 · 237 阅读 · 0 评论 -
在Vue项目中实现签名
经常在银行的业务或者是电子合同的签署是会有签名的场景,就想看一下怎么实现,但是自己对于canvas并不是熟悉的,在这里记录一下这个写法代码配置<template> <!-- 手写签名组件 --> <div class="page sign-page"> <div class="content"> <div class="sign-wrap" id="signWrap"> <canvas id.原创 2021-07-19 19:54:20 · 2260 阅读 · 1 评论 -
vuecli3.x 的 配置文件 vue.config.js
使用Vue搭建了一个移动端的项目(没有配置vue.config.js),运行后使用pc端浏览器可以正常打开,但是使用hbuilderX使用手机浏览器运行的时候显示的白屏,原因是资源的路径加载错误,所以就配置一个vue.config.js文件修改publicPath为"./"就可以了,在这里整体的上传一份vue.config.js的配置文件留作记录代码配置const path = require('path')const resolve = dir => path.join(__dirname.原创 2021-07-19 19:53:42 · 199 阅读 · 0 评论