Vue功能组件 - 随笔分类 - 忙着可爱呀~

vue-route

摘要：路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个阅读全文

posted @ 2023-11-17 16:44 忙着可爱呀~ 阅读(49) 评论(0) 推荐(0)

vue-webpack 结构目录

摘要：1、vue+webpack搭建得项目结构阅读全文

posted @ 2023-11-17 16:44 忙着可爱呀~ 阅读(25) 评论(0) 推荐(0)

Vue-mixins（混入）

摘要：mixins: [混入变量名称] 说明：不需安装，直接使用，作用：多用于提取公共类似的数据和方法，和组件<script/>中书写一样，data、methods、钩子函数使用：引入之后，同组件使用 script 中的数据和方法一样使用功能点：引入之后，相当于mixins下的数据、方法和钩子函阅读全文

posted @ 2023-11-17 16:44 忙着可爱呀~ 阅读(20) 评论(0) 推荐(0)

Vue-slot（插槽）

摘要：以下均已父组件为例：<my-box></my-box> <slot></slot> （无需安装，直接使用，使用组件时需引入对应组件）说明：插槽就是内容分发API，将 <slot></slot> 作为承载内容分发的出口；简单的讲就是使用了插槽后就可以将<my-box>文本、HTML</my-box> 阅读全文

posted @ 2023-11-17 16:43 忙着可爱呀~ 阅读(62) 评论(0) 推荐(0)

Vue-keep-alive 缓存组件 & 动态组件

摘要：动态组件：动态组件：即组件是否展示需要根据条件判断，该组件即为动态组件作用：多用于 tap 切换时某个板块展示对应组件内的内容功能点：点击一级 tap 时，展示一级 tap 对应板块内容（一级组件）；点击二级 tap 时，展示二级tap对应的板块内容（二级组件）示例图：创建组件; 最外层包阅读全文

posted @ 2023-11-17 16:43 忙着可爱呀~ 阅读(96) 评论(0) 推荐(0)

Vue-路由（vue-router）

摘要：路由：Vue-router（vue路由插件）先了解下 route、routes、router三者之间的区别（加$只是为了区别其它变量） router：一般指的是路由实例，如：vue的编程式导航 this.$router.push() routes：指创建 vue-router 路由实例的配置项阅读全文

posted @ 2023-11-17 16:42 忙着可爱呀~ 阅读(95) 评论(0) 推荐(0)

Vue-Vuex 状态管理

摘要：简介： vuex：多个文件公共状态管理 vuex五个属性： state：数据存储 getters：数据提取，对数据进行提取，不更改原数据，和vue计算属性computed一样，实时监听state值的变化（最新状态），并把最新数据扔进vue.store里；如提取对象数组中id不为0的数据 mutati 阅读全文

posted @ 2023-11-17 16:41 忙着可爱呀~ 阅读(59) 评论(0) 推荐(0)

@vue/cli-01安装事项

摘要：@vue/cli安装存在以下两种： npm install -g @vue/cli vue --version or vue -V(注意是大写)查看版本 vue create 项目名称cd 项目名称npm installnpm run serve 1、默认安装安装上面的步骤，一路回车即可 2、手动阅读全文

posted @ 2023-11-17 16:41 忙着可爱呀~ 阅读(31) 评论(0) 推荐(0)

vue-echarts图表组件

摘要：封装代码：  <template> <div class='YxkEcharts'> <VEcharts :params="echartsObj"></VEcharts> </div> </template> <script> // 图表 co 阅读全文

posted @ 2023-11-17 16:40 忙着可爱呀~ 阅读(73) 评论(0) 推荐(0)

vue-alias配置

摘要：const path = require('path'); function resolve (dir) { return path.join(__dirname, dir) } module.exports = { chainWebpack: (config)=>{ config.resolve. 阅读全文

posted @ 2023-11-17 16:40 忙着可爱呀~ 阅读(63) 评论(0) 推荐(0)

vue-富文本/自定义上传图片

摘要：1、下载组件 npm install vue-quill-editor –D 2、在需要的组件内引入富文本 import { quillEditor } from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/ 阅读全文

posted @ 2023-11-17 16:40 忙着可爱呀~ 阅读(93) 评论(0) 推荐(0)

vue-解决vux中siwper高度不自适应

摘要：1、swiper设置height：auto 2、设置swiper-itemposition：static <swiper-item v-for="(item, index) in list" :key="index" :style='selected_index==index?{position: 阅读全文

posted @ 2023-11-17 16:38 忙着可爱呀~ 阅读(115) 评论(0) 推荐(0)

vue——细点

摘要：1、动态绑定class 1、最简单对象 :class="{ 'active': isActive }" 2、数组类型 :class="[isActive,isSort]" 3、三元运算类型 :class="[isActive?'active':'']" 或者 :class="[isActive==1 阅读全文

posted @ 2023-11-17 16:35 忙着可爱呀~ 阅读(24) 评论(0) 推荐(0)

vue-图片/视频上传组件封装

摘要：封装代码：  <template> <div class='YxkUpload'> <div :class="[{ 'YxkUpload__slot': dataBind.isSlot}]"> <el-upload :before-upload 阅读全文

posted @ 2023-11-17 16:34 忙着可爱呀~ 阅读(355) 评论(0) 推荐(0)

vue-导出表格

摘要：1、下载表格（二进制） exportExcel () { axios.get(url, { headers:{ "Admin_token":token }, responseType: 'blob', //二进制流 }).then(function (res) { // res为后端接口返回二进制流阅读全文

posted @ 2023-11-17 16:32 忙着可爱呀~ 阅读(18) 评论(0) 推荐(0)

Vue-element设置表头

摘要： <template> <div class=''> <el-table-column prop="level" min-width="100" :render-header="renderHeader"></el-table-column> </div> </templa 阅读全文

posted @ 2023-11-17 16:30 忙着可爱呀~ 阅读(85) 评论(0) 推荐(0)

忙着可爱呀~

随笔分类 - Vue功能组件

公告