![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
子非余不知渔之乐
唯PC相伴,以CODE解优,怎奈BUG长相随,欲将心事付瑶琴,知音少,弦断有谁听。本是青灯不归客,却因浊酒留风尘。
展开
-
vue 组件的生命周期
vue 组件的生命周期原创 2022-09-07 17:07:37 · 251 阅读 · 1 评论 -
ant design tree 不同类型节点使用不同图标和标题颜色
在使用ant design tree构建一个树结构时,需要根据节点的不同类型使用不同的图标和标题颜色原创 2022-06-25 21:50:18 · 3825 阅读 · 0 评论 -
vue学习笔记:使用vant的list和PullRefresh组件实现上拉刷新和下拉加载
先看效果:再上代码<template> <div class="pageRoot"> <van-nav-bar title="威哥头条" fixed /> <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> <van-list v-model="loading" .原创 2022-05-11 15:21:55 · 2002 阅读 · 1 评论 -
vue学习笔记:修改第三方组件样式
为了提高开发效率,我们经常会使用第三方组件库,例如Ant Design,Vant,Element等。一般组件库会为我们提供比较美观的样式供开发者选择,但是当提供的组件样式不满足需求时,我们需要能够自己来修改组件的样式。 例如下面这个例子,我用到了Vant组件库中的Navbar组件,这是一个标题组件,默认的样式是这样的: 现在我需要将组件的背景改为淡蓝色,文字改为白色。 首先利用谷歌浏览器的元素选择工具,查找到决定组件背景样式的clas...原创 2022-05-10 21:32:32 · 2658 阅读 · 0 评论 -
Vue学习笔记:路由详解
路由:Hash地址与页面的对应关系。1、vue-router的基本使用(1)安装vue-roouter包npm i vue-roouter@3.5.2 -S(2)创建路由模块在src源代码目录下,新建roouter/index.js路由模块,并初始化如下代码:import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)) //调用Vue.use()函数,把VueRoouter安装为V原创 2022-05-08 23:30:18 · 766 阅读 · 0 评论 -
VUE学习笔记:插槽详解
刚开始看Vue官方文档的时候对插槽不是很理解,其实通俗点来讲,插槽就是在自定义组件中预留一个位置,这个位置的内容可以由使用组件的人来定义,具有高度的灵活性。1、使用场景先来看看插槽的使用场景,否则可能连学习的欲望都没有了。插槽还是很重要的,即使不去定义,也要学会使用。下面这个图中使用了Vant中的NavBar组件,该组件用于手机端标题展示,默认的组件展示的只有标题和返回按钮,但是在有些情况下,我们可能需要在标题栏中放一个增加或查询按钮,这个时候就需要利用插槽来让用户自己定义区域中的内...原创 2022-05-08 17:15:45 · 3746 阅读 · 0 评论 -
vue学习笔记:Vue组件
每个.vue组件都由3部分构成,分别是:(1)template:组件的模板结构(2)script:组件的javascript代码(3)style:组件的样式1、组件中的data不能是一个对象。必须是一个函数,通过return 返回一个数据对象:<script>export default{ data(){ return { userName:"张三丰" } }}</script>原创 2022-05-05 00:29:06 · 554 阅读 · 0 评论 -
vue学习笔记:在vscode中使用@提示路径
在vscode中输入“@/"后如果可以智能提示路径,可以有效防止路径名称输入错误,减少不必要的麻烦。效果如下图所示:安装"Path Autocomplete"插件后可以实现路径的智能提示,步骤如下:1、在vscode中查找Path Autocomplete插件2、安装插件3、在vscode中选择“文件-首选项-设置”,在设置页面右上角点击图标打开settings.json配置文件4、在配置文件中添加如下代码在 //导入文件时是否携带文件扩展..原创 2022-05-03 10:50:41 · 3296 阅读 · 3 评论 -
vue学习笔记-侦听器
1、侦听器用于监听变量值是否发生变化,从而针对数据的变化而做特定的操作。基本语法:watch:{ userName(newVal,oldVal)//方法名必须跟监听的变量名称一致。 { //数据发生变化后执行的代码段,newVal和oldVal分别代表变化 前的值和变化后的值。 } }2、默认情况下,组件在初次加载完毕后不会调用watch侦听器。如果想让watch侦听器在页面渲染完成原创 2022-05-02 22:05:55 · 675 阅读 · 0 评论