![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
miao_zz
起风了,唯有努力生存。
我还在学习,欢迎大家指教,我们可以互相讨论;我写的东西有时候理解比较浅,我只是把CSDN作为我学习的一个工具,防止学的东西忘了,有错误欢迎大家指出,谢谢。
展开
-
后台菜单数据递归展示
后台菜单数据递归展示原创 2024-05-15 15:35:57 · 204 阅读 · 0 评论 -
基于swiper的滚动条轮播图
基于swiper的滚动条轮播图原创 2023-03-27 18:04:57 · 756 阅读 · 0 评论 -
基于vue.extend创建一个自定义消息确认弹出框插件
基于vue.extend创建一个自定义消息确认弹出框插件原创 2023-03-07 16:02:41 · 196 阅读 · 0 评论 -
在vue2中this的简单指向,以及简单理解
vue2中this原创 2023-03-02 22:31:18 · 772 阅读 · 0 评论 -
监听页面滚动,给页面中的节点添加动态过渡效果
监听页面滚动,给页面中的节点添加动态过渡效果原创 2023-02-27 16:59:42 · 285 阅读 · 0 评论 -
如何使用vue的渲染函数 API:h函数创建一个el-select弹出框
如何使用vue的渲染函数 API:h函数创建一个el-select弹出框原创 2023-02-23 18:02:43 · 2907 阅读 · 0 评论 -
基于vue-quill-editor支持上传图片到腾讯云仓库的富文本编辑器
基于vue-quill-editor支持上传图片到腾讯云仓库的富文本编辑器原创 2023-02-13 17:14:42 · 156 阅读 · 0 评论 -
vue中如何解决 error Mixed spaces and tabs no-mixed-spaces-and-tabs这种报错
vue中如何解决 error Mixed spaces and tabs no-mixed-spaces-and-tabs这种报错原创 2023-02-12 17:44:18 · 1181 阅读 · 0 评论 -
基于uniapp的简单自定义公共组件mz-header-tab-tab
基于uniapp的简单自定义公共组件mz-header-tab-tab原创 2023-02-03 20:26:58 · 576 阅读 · 0 评论 -
uniapp-购物车功能实现案例
uniapp购物车的基本实现案例原创 2023-02-03 20:05:00 · 1844 阅读 · 0 评论 -
基于腾讯地图的(地图选点|输入模糊匹配)选择获取详细地址以及经纬度
基于腾讯地图的(地图选点|输入模糊匹配)选择获取详细地址以及经纬度1.支持用户输入框输入进行模糊匹配获取详细地址以及经纬度2.支持用户模糊匹配后点击选点获取详细地址以及经纬度原创 2022-11-03 18:26:30 · 1742 阅读 · 6 评论 -
vue中给打包的文件指定自定义文件名以及加上哈希值解决每次打包上线存在缓存问题
vue中给打包的文件指定自定义文件名以及加上哈希值解决每次打包上线存在缓存问题原创 2022-11-02 11:21:40 · 6479 阅读 · 0 评论 -
vue2百度地图选点组件
vue2.0百度地图输入位置获取经纬度,移动标点获取近卫笃原创 2022-10-31 09:51:03 · 365 阅读 · 0 评论 -
配置反向代理
vue.config.js反向代理的配置说明跨域:域名 端口 协议 不同就会跨域devServer: { port: port, compress: true, open: true, // 运行时自动打开浏览器 // 配置代理服务器,进行代理数据 proxy: { // 将来只要请求路径,以/api 开头,都会被代理 // 例如:/api/login/list ==> http://127.0.0.1:8090/login/lis原创 2022-03-31 18:46:38 · 1592 阅读 · 0 评论 -
使用flexible.js和第三方依赖包postcss-px2rem,解决pc端响应式和移动端自适应问题
使用flexible.js和第三方依赖包postcss-px2rem,解决pc端响应式和移动端自适应问题原创 2022-03-31 15:43:39 · 1875 阅读 · 0 评论 -
el-form中如何动态添加删除el-form-item数据
el-form中如何动态添加删除el-form-item数据<template> <el-row style="margin-top: 100px;"> <el-col :span="24"> <el-form ref="discountStoreFrombs" :model="discountStoreFrombs" label-width="100px"> <el-form-item label="折扣价格原创 2021-12-03 15:12:20 · 1786 阅读 · 0 评论 -
el-upload配合腾讯云cos制作文件上传组件
el-upload配合腾讯云cos制作文件上传组件使用组件创建组件FileUpload使用组件<FileUpload></FileUpload>//文件上传import FileUpload from "@/components/FileUpload"Vue.component('FileUpload', FileUpload)创建组件FileUpload<template> <div class="upload-file"> <e原创 2021-12-03 13:27:19 · 847 阅读 · 0 评论 -
el-upload配合腾讯云cos制作图片上传组件
el-upload配合腾讯云cos制作图片上传组件组件名称fileImage组件名称fileImage<template> <div class="fileImage-wrap"> <el-upload action="#" list-type="picture-card" :show-file-list="true" :file-list="fileList" :on-remove="handleRemove" :before-原创 2021-11-22 15:50:58 · 604 阅读 · 0 评论 -
vue中通过axios创建一个接口请求api管理
vue中通过axios创建一个引入axios创建request.js使用案例api/ceshi.js使用引入axiosnpm install axios创建request.jsimport axios from "axios"axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'//创建axios实例const service=axios.create({ // axios中请求配置有baseU原创 2021-12-02 17:34:10 · 870 阅读 · 0 评论 -
vue组件把秒转换成时分秒倒计时
vue组件把秒转换成时分秒倒计时使用组件创建组件countdown使用组件<countdown :surplusTime="秒"></countdown>创建组件countdown<template> <span>{{ jishi }}</span></template><script>let timer = null;export default { props: { surplusTime:原创 2021-12-01 10:04:50 · 694 阅读 · 0 评论 -
商城图片放大效果
商城图片放大效果引入组件创建组件picture-zoom引入组件组件pictureZoom外需要设置宽度,高度import pictureZoom from '@/components/picture-zoom/picture-zoom.vue';<div style="width: 100%;height: 100%;"><pictureZoom :url="baseUlr + bigImage"></pictureZoom></div>创建组原创 2021-11-22 16:33:38 · 419 阅读 · 0 评论 -
引入使用vue-awesome-swiper
引入使用vue-awesome-swiper使用swiper组件创建swiper组件使用swiper组件import Slider from '@/components/swiper/index.vue';<Slider :bannerList="" />创建swiper组件<template> <div class="app-container"> <div class="swiper"> <swiper ref="mySwip原创 2021-11-22 16:10:55 · 808 阅读 · 0 评论 -
vue创建项目报错(一)
vue创建项目报错npm run lint -- --fix原创 2021-10-08 11:35:48 · 169 阅读 · 0 评论 -
vue中自定义弹框show-modal
vue中自定义弹框show-modal使用方式在需要使用show-modal的地方使用在main.js中挂在组件文件代码:组件show-modalshow-modal/show-modal.vueshow-modal/initModal.js使用方式在template中引入<show-modal></show-modal>在需要使用show-modal的地方使用this.$showModal({ title: '', content: '确认重置,重置原创 2021-09-16 16:48:38 · 1348 阅读 · 0 评论 -
使用vue脚手架创建一个项目(四)
show-toast使用组件show-toast组件initToast.jsshow-toast.vue使用组件在main.js中引入组件并注册全局组件,在页面中声明一下<show-toast></show-toast>,之后就可以使用了import initToast from "@/components/show-toast/initToast.js"import showToast from "@/components/show-toast/show-toas原创 2021-09-10 16:34:08 · 130 阅读 · 1 评论 -
使用vue脚手架创建一个项目(三)
showModal使用组件show-modal组件initModal.jsshow-modal.vue使用组件在main.js中引入组件并注册全局组件,在页面中声明一下<show-modal></show-modal>,之后就可以使用了import initModal from "@/components/show-modal/initModal.js"import showModal from "@/components/show-modal/show-modal.原创 2021-09-10 16:29:00 · 115 阅读 · 0 评论 -
vue中如何获取或者改变vuex中的值
vue中如何获取或者改变vuex中的值store-->index.js在页面中使用或者修改vuex中的值store–>index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { isLogin:localStorage.getItem("isLogin")?localStorage.getItem("isLogin"):fal原创 2021-09-09 10:06:50 · 5069 阅读 · 0 评论 -
列表页面多个倒计时
列表页面多个倒计时<template> <div class="home-wrap"> <ul class="home-list"> <template v-for="(item,index) in listArray"> <li class="home-item" v-bind:countdown = "item.time" :key="index"> <span>{{item.name}}</原创 2021-09-08 17:57:16 · 176 阅读 · 0 评论 -
使用vue脚手架创建一个项目(二)
使用vue脚手架创建一个项目项目文件1.router文件--》index.js2.store-->index.js3.views3-1.project-->home.vue3-1.project-->project.vue3-2.index.vue3-3.login.vue3-4.register.vue3-5.App.vue3-6.main.js项目文件1.router文件–》index.jsimport Vue from 'vue'import VueRouter from原创 2021-09-07 17:49:43 · 180 阅读 · 0 评论 -
使用vue脚手架创建一个项目(一)
使用vue脚手架创建一个项目第一步:是否安装Vue CLI 的包第二步:检查版本是否正确或者是否安装成功第三步:创建一个项目第四步:预设置项目1.选择vue的版本2.x或者3.x2.选择代码校验第五步:启动项目1.启动报错2.报错3.启动成功第一步:是否安装Vue CLI 的包按住wins+r,打开命令行,输入下面命令如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-c原创 2021-09-07 14:31:33 · 6608 阅读 · 0 评论 -
vue.js的两个核心是什么
vue.js的两个核心是什么Vue的核心思想为数据驱动和组件化数据驱动:ViewModel,保证数据和视图的一致性。组件系统:应用类UI可以看作全部是由组件树构成的。原创 2021-05-12 18:01:44 · 1090 阅读 · 0 评论 -
vuex
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { name: '用户姓名' }, getters: { setName (state) { return state.name } }, mutations: { changeName (state, params) { // 这里原创 2021-05-12 17:45:20 · 67 阅读 · 0 评论 -
vue中Mixin混入的基本知识
vue中Mixin混入的基本知识子组件中如何混入mixin,则父组件中传入通过props接收的值,将不会显示,只会显示mixin中的值1.组件中data,methods的优先级高于mixin data,methods的优先级,并且两个一起存在的时候,只会执行组件的data,methods2.生命周期函数:先执行mixin里面的,后执行组件里面的<!DOCTYPE html><html> <head> <meta charset="utf-8">原创 2021-04-18 21:32:17 · 572 阅读 · 0 评论 -
vue中的基础知识点
vue中的基础知识点v-oncerefv-once让某个元素标签只渲染一次,哪怕后面标签对应值改变也不在页面中渲染ref通过this.refs获取已经挂载渲染好的dom树节点;也可以给子组件添加ref,通过this.refs获取已经挂载渲染好的dom树节点;也可以给子组件添加ref,通过this.refs获取已经挂载渲染好的dom树节点;也可以给子组件添加ref,通过this.refs对子组件进行操作...原创 2021-04-18 20:12:44 · 95 阅读 · 0 评论 -
vue中的动态组件与异步组件
vue中的动态组件与异步组件动态组件:异步组件动态组件:根据数据的变化,结合component这个标签,来随时动态切换组件的实现//动态组件 const app = Vue.createApp({ data() { return { currentItem: "form-item" } }, methods: { changeComponent() { if (this.currentItem === "form-item") {原创 2021-04-18 19:59:55 · 136 阅读 · 0 评论 -
vue中组件的定义,使用以及简单传值
组件的定义,使用以及简单传值组件传值:父组件--》子组件子组件通过事件向父组件传值:组件:定义的组件是页面的一部分,组件具有共用行,复用性,组件内部的data数据是被当前调用组件独立使用的,不影响其他使用全局组件:只要定义了,处处可以使用,性能不高,但使用起来简单局部组件:定义了,只有注册才能使用,性能高,使用起来复杂组件传值:父组件–》子组件子组件通过props接受父组件传递来的值,子组件可以接受父组件传递来的String,Boolen,Number,Array,Object,Function这原创 2021-04-18 19:16:38 · 276 阅读 · 1 评论 -
vue中computed,methods,watch简单理解
vue中computed和methods的区别computedmethodscomputed和methods的区别:computedcomputed是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值methodsmethods在页面重新渲染的时候,函数总会重新调用执行computed和methods的区别:1.computed是属性调用,而methods是函数调用;<!DOCTYPE html><html> <head> <meta cha原创 2021-04-17 21:59:32 · 212 阅读 · 0 评论 -
vue生命周期的简单了解
vue生命周期的简单了解代码实践:beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeUnmount==beforeDestroyunmounted代码实践:<div id="root"></div><script> //生命周期:在某一時刻會自動執行的函数 //进入页面默认会自动执行inti->beforeCreate -> created -> beforeMou原创 2021-04-17 18:41:02 · 285 阅读 · 0 评论