Vue
文章平均质量分 51
Vue基础
青颜的天空
做自己的保护神!
展开
-
Vue3中为Ant Design Vue中Modal.confirm自定义内容
既想要样式,又想要定制其content内容的情况。大部分情况下,使用这种方式时,可能content内容固定都是字符串,那如果想要做更高级的交互怎么办?查阅 Ant Design Vue官方文档,发现content可以不仅仅是字符串:可以看到content是可以接收VNode或h函数的,下面分别讲解,这两种参数的用法。原创 2024-07-04 16:27:39 · 443 阅读 · 0 评论 -
Vue中 v-html 指令警告( warning ‘v-html‘ directive can lead to XSS attack vueno-v-html)
Vue中 v-html 指令警告: warning 'v-html' directive can lead to XSS attack vueno-v-html,可以修复或者忽略此警告原创 2022-07-16 22:00:00 · 8550 阅读 · 1 评论 -
stylelint检查报错:Unexpected missing generic font family font-family-no-missing-generic-family-keyword
Vue3 stylelint检查报错:Unexpected missing generic font family font-family-no-missing-generic-family-keyw原创 2022-07-14 22:00:00 · 8167 阅读 · 0 评论 -
vue.config.js文件的devServer本地开发相关配置.
vue.config.js文件的devServer本地开发相关配置原创 2022-05-23 18:18:41 · 8344 阅读 · 1 评论 -
父组件和子组件之间的生命周期执行顺序
初次渲染就会触发的生命周期beforeCreate() , created()beforeMount() , mounted()组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。 组件的销毁操作是先父后子,销毁完成的顺序是先子后父。加载渲染过程 子组件在父组件的beforeMount和Mounted之间渲染- 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-原创 2022-03-11 23:19:17 · 842 阅读 · 0 评论 -
Vue 中 props监听变化的几种方式
应用场景在vue中父子组件是通过props传递数据的。通常有以下几种场景:子组件展示父组件传递过来的props,一般是字符串子组件通过父组件的props计算得到某个值子组件修改父组件传递过来的props1.computed 计算属性使用场景:当pros传递过来的值不能直接使用的时候,就可以使用计算属性了。比如:完整的地址需要将省市区3个字段拼接后展示。计算属性是基于依赖进行缓存的,当props不变时,多次访问addrese计算属性,会立即返回结果,而不必再次执行计算。props: {原创 2022-01-27 11:35:24 · 34904 阅读 · 2 评论 -
uni-app开发插件并发布到插件市场详细步骤
背景uni_modules是uni-app的插件模块化规范(HBuilderX 3.1.0+支持),通常是对一组js sdk、组件、页面、uniCloud云函数、公共模块等的封装,用于嵌入到uni-app项目中使用,也支持直接封装为项目模板。插件开发者,可以像开发uni-app项目一样编写一个uni_modules插件,并在HBuilderX中直接上传至插件市场。uni_modules开发的插件,可以直接在uniapp的任意页面直接使用,与easycom组件模式类似,避免了每个页面引入才能使用。更多原创 2021-12-21 14:36:24 · 3788 阅读 · 2 评论 -
在CSS代码中使用JS变量
场景:想在CSS中使用JS变量解决方案CSS变量示例:以在 vue 项目为例:在行内的 style 属性中定义 CSS 变量赋值为 JS 变量在 CSS 中使用行内定义好的 CSS 变量<!--html--><div class="container"> <div class="test" :style="{ '--width':width, '--color':color, '--margin':margin }"></di原创 2021-12-21 13:03:10 · 9071 阅读 · 0 评论 -
uniapp中使用uni.$emit和uni.$on进行页面通讯传值
uniapp中使用uni.$emit和uni.$on进行页面通讯传值原创 2021-12-09 18:35:10 · 15146 阅读 · 0 评论 -
Vue中watch用法详解
基本用法:当firstName值变化时,watch监听到并且执行<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p></div> new Vue({ el: '#root', data: { firstName: 'Dawei', la转载 2021-10-15 21:18:35 · 1834 阅读 · 0 评论 -
Vue的计算属性(computed)使用方法
在computed属性对象中定义计算属性的方法,在页面中使用{{方法名}}来显示计算的结果。通过getter\setter实现对属性数据的显示和监视,计算属性存在缓存,多次读取只执行一次getter计算。<div id="demo"> 姓:<input type="text" placeholder="firstName" v-model="firstName"><br> 名:<input type="text" placeholder="lastN.原创 2021-07-28 23:43:24 · 3029 阅读 · 0 评论 -
element ui 表单验证不起作用
使用element ui做表单验证的时候遇到了问题,表单中命名有内容,element ui却始终提示不能为空原创 2021-05-07 14:04:03 · 1319 阅读 · 1 评论 -
Vue 中引入 json 的三种方法
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串。原创 2021-05-07 12:54:01 · 36816 阅读 · 0 评论 -
Vue 表单中有input输入框,回车会刷新页面解决办法
在vue项目开发时,运用element-ui或者iView组件的Form组件;当Form组件中只有一个Input组件时,鼠标聚焦输入框后,点击回车键,页面就会刷新。原创 2021-05-07 12:31:09 · 1655 阅读 · 0 评论 -
warning Unexpected any. Specify a different type @typescript-eslint/no-explicit-any
Vue3.0 + Typescript 项目中warning Unexpected any. Specify a different type @typescript-eslint/no-explicit-any原创 2021-05-07 10:24:19 · 14292 阅读 · 0 评论 -
error TS2322 Type ‘string | LocationQueryValue[] | null‘ is not assignable to type ‘string‘.
代码:错误提示:解决办法方式一:// eslint-disable-next-line @typescript-eslint/ban-ts-comment// @ts-ignoreconst redirect: string = this.$route.query && this.$route.query.redirect;方式二:const redirect: string | null = this.$route.query && this.$rou原创 2021-04-29 17:00:13 · 14884 阅读 · 0 评论 -
vue-router中meta的作用
meta的定义:简单来说就是路由元信息,也就是每个路由身上携带的信息。meta的作用:vue-router路由元信息说白了就是通过meta对象中的一些属性来判断当前路由是否需要进一步处理,如果需要处理,按照自己想要的效果进行处理即可定义路由的时候可以配置 meta 字段:const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ .原创 2021-04-29 16:53:47 · 32163 阅读 · 0 评论 -
Vue3中自定义双向绑定
1.父组件绑定变化vue2中父组件通过v-model绑定,子组件默认接收一个value属性vue3中需要通过v-model指定一个需要绑定的属性名称 <!-- 通过:后面指定子组件接收的props名称 --> <AddBook v-model:dialogVisible="addFormVisible"></AddBook>2. 子组件通过props接收,然后在setup函数中,通过watch监听,定义一个中间变量。1)emits:Vue3新增属性,原创 2021-04-19 17:47:51 · 2817 阅读 · 0 评论 -
Vue 中监控 img 加载完毕事件
在 Vue 中,可用 @load 方法监控 img 加载完毕事件原创 2021-03-09 18:25:30 · 2837 阅读 · 0 评论 -
Nuxt中使用 Swiper的autoplay属性不起作用?
使用Nuxt.js框架制作一个官网,需要自动循环播放的banner,参照官方示例代码设置了autoplay属性但是不起作用,不能自动循环原创 2021-02-23 17:43:18 · 805 阅读 · 0 评论 -
Nuxtjs上使用wow.js+animate.css实现滚动加载动画
Nuxtjs上使用wow.js+animate.css实现滚动加载动画原创 2021-02-20 16:36:07 · 4625 阅读 · 3 评论 -
Vue中本地图片无法显示
最近用Vue开发一个h5页面,网络图片可以正确显示,但是本地图片无法显示源代码<img src="../../assets/image/home.png" alt=""/>找了很多种方法均不行比如<img src="~@/static/Trump.jpg" class="image">和src写imgurl用动态获取的方式,src=require("xxx")后来发现直接引入可以在script中import homeImg from '../../asset原创 2021-01-14 17:32:38 · 2257 阅读 · 0 评论 -
@vue/cli取消打包时生成css和js对应的map文件^-^
vue-cli 更名为 @vue/cli后,笔者用@vue/cli创建了一个项目并打包,发现打包后的文件含有 js.map 文件。map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。那我们怎么把它去掉不要呢?新建的项目默认没有创建config配置文件,需要我们重新创建一个vue.congig.jsvue.config.js 是一个可选的配置文件,如果项目的 (和 p原创 2020-11-24 14:49:58 · 1597 阅读 · 0 评论 -
在Vue中使用Swiper
Swiper常用于移动端网站的内容触摸滑动。Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!使用步骤:进入项目根目录,安装swiperyarn add swiper在需要的vue页面,导入swiper样式和jsimport Swiper from 'swiper' import 'swipe.原创 2020-10-16 10:25:14 · 1488 阅读 · 0 评论 -
Nuxt 项目引入 iconfont 小图标详解
Nuxt.js 项目引入 iconfont 小图标详细步骤原创 2020-08-06 22:10:19 · 2985 阅读 · 0 评论 -
Vue 中的 MVVM思想
1.什么是MVVMmodel-view-viewModelmodel:数据模型view:视图层viewModel:可以理解为沟通view和model的桥梁他的设计思想就是关注model的变化,通过viewModel自动去更新DOM的状态,也就是Vue的一大特点:数据驱动。图片来源:https://blog.csdn.net/CSDN_l512/article/details/903488472.Vue中用MVVM思想做什么通过数据操作DOM我们知道Vue使用简洁的模板语法来将数据渲染进原创 2020-07-14 09:18:19 · 726 阅读 · 1 评论