![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
不管,我要跨世纪
不管,我要跨世纪
展开
-
vue生命周期
vue生命周期生命周期是分阶段的1.实例期(组件在被初始化(第一次加载)的时候,我们通常程这个过程为组件的实例期)2.存在期(组件在被加载完成到它被销毁之前)3.销亡期(组件被销毁至销毁完成)生命周期函数 (会自动执行,但需要满足一定条件才触发)1.组件实例期会触发的生命周期函数组件被创建之前beforeCreate组件被创建组件被创建之后created组件被挂载之前beforeMount组件被挂载组件被挂载之后 mounted2.组件存在期(函数执行需要满足当前组件内原创 2020-09-13 20:54:33 · 192 阅读 · 0 评论 -
vue中使用element-ui 按需加载
项目中下载element-uinpm i element-ui -S配置[在src同级目录下建一个babel.config.js文件]代码如下module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibrary原创 2020-11-29 23:30:17 · 490 阅读 · 0 评论 -
解决vue项目中重复点击导航路由报错
vue版本“vue”: “^2.6.11”,主要代码//重复点击导航路由报错const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)}配置文件[router文件 下index.js]router > index.js原创 2020-11-29 23:11:55 · 650 阅读 · 3 评论 -
vue组件通信
1.vue组件关系父子关系子父关系并列(兄弟)关系多级嵌套(祖孙)关系2.vue组件通信父子传值父组件直接给儿子写对应属性及值 // 儿子接受并使用该变量props:{ name:{ type:String, required:false, default(){ return '小明' } }}子父传值委婉,通过调用父组件传递的函数方法,把想传的值写到函数参数中原创 2020-09-15 16:04:02 · 60 阅读 · 0 评论 -
vue获取真实dom节点
ref && refs获取真实dom节点1.命名 2.获取 this.$refs.iptSon 组件<template> <div id="son"> <h1>{{title}}</h1> <p>我的名字叫{{name}}</p> <input type="text" ref="inp"/> <button @clic原创 2020-09-15 16:06:49 · 1499 阅读 · 0 评论 -
typescript创建vue项目
第一步【下载最新版本@vue/cli】npm i -g @vue/cliMicrosoft Windows [版本 10.0.18362.1082](c) 2019 Microsoft Corporation。保留所有权利。C:\Users\Lenovo\Desktop\1910-高级程序设计\项目>vue create ts-vueVue CLI v4.5.6? Please pick a preset: Manually select features? Check the f原创 2020-09-23 11:39:01 · 1601 阅读 · 0 评论 -
vue跳转带参
vue跳转带参的两种方式一、query this.$router.push({path:'/detail',query:{detailList:res.data}} 二、params this.$router.push({name:'orderDetail',params:{shopID}原创 2020-09-23 19:15:45 · 101 阅读 · 0 评论 -
vue图片查看器v-viewer
下载npm i v-viewer -S引入main.jsimport Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer, { defaultOptions: { zIndex: 9999 }})使用<template> <div> <viewer :images="data"> <div v-for原创 2020-10-12 14:26:50 · 726 阅读 · 0 评论 -
vue+express实现文件的上传和下载
一、创建vue项目npm i axios -S<template> <div class="hello"> <!-- 标题 --> <h1>AirPort</h1> <!-- 选择文件 --> <div id="show" v-show="isShow"> <div class="show-top">您选择了如下文件<span @click="isShow原创 2020-10-09 19:36:13 · 1306 阅读 · 6 评论 -
vue中使用swiper6、vue-awesome-swiper渐变效果、多图轮播及单图轮播
第一步(下载)npm i swiper vue-awesome-swiper -S第二步(使用)<template> <div class="wrapper"> <Swiper v-if="swiperList.length>1" ref="mySwiper" :options="swiperOption" class="swiper-container"> <SwiperSlide class="swiper-item" v-原创 2020-08-28 17:17:21 · 3448 阅读 · 9 评论