Vue
Corey_Mxd
这个作者很懒,什么都没留下…
展开
-
Vue生命周期
这是Vue文档里关于实例生命周期的解释图那么下面我们来进行测试一下<section id="app-8"> {{data}}</section>var myVue=new Vue({ el:"#app-8", data:{ data:"aaaaa", info:"nono"转载 2018-05-17 16:06:25 · 117 阅读 · 0 评论 -
vue项目中使用pdf.js预览pdf文件
项目要求需要预览pdf文件,网上找了很久,大多数都是推荐pdf.js,自己起了解了一下,最后决定用pdf.js,但是发现,在vue中使用这个很少!!!!!所以我就写这一篇帮助一下vue使用pdfjs的朋友!其实 这和前端框架无关的,直接使用pdf.js原生 搜多了你就发现有几个封装pdf.js的vue组件,个人试验了其中一个,效果不是很好,所以,当然啊,用原生的是最好的啦!...原创 2018-07-17 12:37:25 · 14042 阅读 · 7 评论 -
Vue2.0 子组件传值给父组件
this.$emit(event,...args);/** event: 要触发的事件* args: 将要传给父组件的参数*/ Usage: 子组件内容:<template><div @click="iclick"></div></template>methods:{ iclick(){ let...转载 2018-07-17 12:38:46 · 229 阅读 · 0 评论 -
从零开始搭建VUE项目
前言: 此样板面向大型,严肃的项目,并假定您对Webpack和vue-loader有些熟悉。 请务必阅读vue-loader的常见工作流配方的文档。如果您只想尝试vue-loader或者鞭打一个快速原型,请改用webpack-simple模板。快速开始: 要使用这个模板,可以用vue-cli来支持一个项目。 建议使用npm 3+更高效的依赖关系树:$ npm ...转载 2018-07-26 16:32:22 · 401 阅读 · 0 评论 -
vue点击图片放大预览图片支持旋转等
vue图片点击放大预览v-viewer库使用提到图片放大预览,可能好多人想到的是lightbox,在vue中使用lightbox还挺麻烦,但是伸手党做习惯了,所以去github上搜索了一个,感觉效果很完美,简单实用,所以推荐给大家。https://github.com/mirari/v-viewer github地址,下面是我这块使用的效果图。1.安装配置npm instal...转载 2018-09-09 23:51:52 · 1603 阅读 · 0 评论 -
VUE 设置全局的静态变量
新建一个文件,global.js global.BASE_URL = 'http://vue.wclimb.site/images/' global.SOCKET_DOMAIN = 'https://xx.xx.com/filesystem/upload/' 然后在main.js中引入: //引入全局的静态变量 import './global/global...原创 2018-09-20 13:08:34 · 4581 阅读 · 0 评论 -
VUE 路由参数变化,页面数据不刷新问题
出现这种情况是因为依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个文章页面并不会运行created组件生命周期,导致文章数据还是第一次进入的数据。解决方法:watch监听路由是否变化watch: { // 方法1 '$route' (to, from) { //监听路由是否变化 if(th...转载 2018-09-21 15:56:32 · 9979 阅读 · 2 评论 -
详解 vue-cli 的打包配置文件代码
一、前言 对于webpack基础不好,node指令不通的童鞋。估计对自己搭建Vue、react脚手架是相当头疼的,有种无从下手的感觉。然而,从头看这2块,耗时太长,而且说实话得练才行,不练练手看不明白。那大多数人就采取折中的方案,修改成熟的脚手架,改成自己想要的样子。这个相对来说难度降低了不少,不过依然会有很多难点不加不明白。所以这里就以Vue的脚手架为例子,将源码加上注释,方便大家加深对项...转载 2018-10-15 14:28:14 · 621 阅读 · 0 评论 -
vue关于父组件调用子组件的方法
首先引用子组件就不用说了,其次<child ref="mychild"></child>是在父组件中为子组件添加一个占位,ref="mychild"是子组件在父组件中的名字,这个必须有不然找不到是哪个子组件,最后通过this.$refs.ref.method调用子组件<template> <div> child &l原创 2018-10-24 10:27:45 · 407 阅读 · 0 评论 -
vue 懒加载
vue路由配置以及按需加载模块配置1、首先在component文件目录下写俩组件:First.vue :<template> <div>我是第一个页面</div></template> <script> export default { name: 'first', data () { ...转载 2018-12-13 09:51:39 · 869 阅读 · 0 评论 -
vue插件总结——总有你能用上的插件
今天闲来没事,把vue的插件组件给大家总结了一下,也做了简单的分类,喜欢的可以收藏哦!UI组件框架element - 饿了么出品的Vue2的web UI工具套件mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立...转载 2019-02-14 12:01:56 · 3939 阅读 · 1 评论 -
Vue 使用中的小技巧
vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧,在下将不定期更新~1. 多图表resize事件去中心化1.1 一般情况有时候我们会遇到这样的场景,一个组件中有几个图表,在浏览器resize的时候我们希望图表也进行resize,因此我们会在 父容器组件中写: mounted()...转载 2019-05-07 11:25:54 · 303 阅读 · 0 评论 -
Vue 如何在页面渲染完后去操作dom,而且只执行一次
在接口请求成功的回调里使用this.$nextTick(() =>{ // 在这里面去获取DOM})。在mounted生命周期,组件挂载成功,但还未渲染,自然获取不到相关的DOM节点。看你资料好像不是前端,举个更简单的例子,你在html中,把 console.log(document.querySelector('body'))写在body标签前面,代码执行时机先于页面渲染,...原创 2018-07-17 12:29:18 · 14653 阅读 · 1 评论 -
vue-router 2.0 常用基础知识点之router.push()
vue-router 2.0 常用基础知识点之router.push()2017年04月01日 09:31:01阅读数:82574router.push(location)http://www.jianshu.com/p/ee7ff3d1d93d除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码...转载 2018-07-17 09:07:33 · 533 阅读 · 0 评论 -
vue如何获取当前页面的url
如果你使用 vue-router 文档在这里 路由信息对象的属性const routes = [ {path : '/portfolio/:year/review', component : Portfolio }];这个样子获取this.$route.params.yearthis.$route.query.id 或者(未尝试) 还有一种经常用的方式当...原创 2018-07-17 09:05:59 · 40589 阅读 · 1 评论 -
vue 引入公共css文件
1、在入口js文件main.js中引入,一些公共的样式文件,可以在这里引入。import Vue from 'vue'import App from './App' // 引入App这个组件import router from './router' /* 引入路由配置 */import axios from 'axios'import '../static/css/global.css' ...转载 2018-05-14 18:07:03 · 1704 阅读 · 0 评论 -
vue项目中stylus引入时报错解决
我在引入时遇到下面的问题编译报错:This dependency was not found:* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-rewriter?{"id":"data-v-6c96342b","scoped...转载 2018-05-15 14:41:00 · 2880 阅读 · 0 评论 -
vue 插件集合
Vue2.0+组件库总结UI组件element - 饿了么出品的Vue2的web UI工具套件Vux - 基于Vue和WeUI的组件库mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用muse-ui - 三端样式一致的...转载 2018-06-20 09:52:58 · 1752 阅读 · 0 评论 -
Vue单文件组件基础模板
背景相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多:1.代码集中,便于开发、管理和维护2.可复用性高,直接将vue文件拷贝到新项目中我暂时就想到这两点,童鞋们可以在评论里帮我补充;因为有这么多优点,所以决定有必要将vue组件的常用配置项提炼出来,形成一个组件模板,方便日后项目开发复用<template> <div&g...转载 2018-07-16 16:09:21 · 1434 阅读 · 0 评论 -
使用 vue-router 跳转页面
使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生。官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html 有很多朋友找我要 demo,但是博客中的这个案例被我删掉了,我只好随手写了一个超简单的 demo,希...转载 2018-07-16 16:11:45 · 794 阅读 · 0 评论 -
vue-router 的重定向-redirect
开发中有时候我们虽然设置的路径不一致,但是我们希望跳转到同一个页面,或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。redirect基本重定向我们只要在路由配置文件中(/src/router/index.js)把原来的component换成redirect参数就可以了。我们来看一个简单的配置。 1 2 3 4 5...转载 2018-07-16 16:13:19 · 9177 阅读 · 0 评论 -
使用 iView Upload 组件实现手动上传文件
<template> <div class="Upload"> <Upload v-if="UploadStyle == 'no'" multiple type="drag" :accept="Accept" :format="Format" :max-size="FileMaxSize" :b原创 2018-07-16 16:20:53 · 26775 阅读 · 8 评论 -
vue音乐播放器插件vue-aplayer的配置及其使用
在vue的官网上看到vue-aplayer这个音乐播放器的插件,由于个人有比较喜欢音乐,所以就拿过来玩一玩,感觉还是比较实用的,界面美观。首先,我们先安装 npm install vue-aplayer --save,之后在组件中引入 import VueAplayer from 'vue-aplayer',下面就是源码,可供参考: <template> <...原创 2018-07-16 16:25:10 · 12555 阅读 · 2 评论 -
video-player实现hls播放全过程
安装依赖npm install vue-video-player --save 引入样式// 第一个是videoJs的样式,后一个是vue-video-player的样式,因为考虑到我其他业务组件可能也会用到视频播放,所以就放在了main.js内require('video.js/dist/video-js.css')require('vue-video-player/src/c...原创 2018-07-16 16:30:28 · 7137 阅读 · 2 评论 -
vue路由传参的三种基本方式
现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据。父组件中:<li v-for="article in articles" @click="getDescribe(article.id)">methods:方案一: getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转 ...转载 2018-07-16 17:23:47 · 2000 阅读 · 0 评论 -
vue 解决循环引用组件报错
做项目时遇到使用循环组件,因为模式一样,只有数据不一样。但是按照普通的组件调用格式来做时报错,错误信息为Unknown custom element: <pop> - did you register the component correctly? For recursive components, make sure to provide the "name" option.查...原创 2018-07-17 09:00:28 · 2518 阅读 · 4 评论 -
vue 项目地址去掉 #的方法
vue-router 设置 history 模式vue 项目往往会搭配 vue-router 官方路由管理器,它和 vue.js 的核心深度集成,让构建单页面应用变得易如反掌。vue-router 默认为 hash 模式,使用 URL 的 hash 来模拟一个完整的 URL,所以当 URL 改变时,页面不会重新加载,只是根据 hash 来更换显示对应的组件,这就是所谓的单页面应用。但是使用...原创 2019-05-25 16:49:34 · 6690 阅读 · 0 评论