vue
vue
hunter_97
这个作者很懒,什么都没留下…
展开
-
vue 之 中央事件总线 bus
在开发一些功能联动比较强的项目时,会涉及到很多的跨级和兄弟组件通信问题,这时候就会用到中央事件总线bus这个概念。我们这里将bus分装为一个vue插件使用。一、定义bus文件import Vue from 'vue'const Bus = new Vue()export default Bus二、使用发送消息// 引入bus文件import bus from '@/bus'...原创 2020-11-03 19:00:54 · 186 阅读 · 0 评论 -
vue 之 vue-cli3
Vue CLI是一个基于Vue.js进行快速开发的完整系统。在vue-cli3中Vue CLI的包名称由vue-cli改成了@vue/cli。 如果你已经全局安装了旧版本的vue-cli(1.x 或 2.x),你需要先通过npm uninstall vue-cli -g。(这里用的包管理器为npm。)一. 安装脚手架确保安装vue-cli3之前卸载之前安装的旧版本的脚手架。安装命令:np...原创 2020-01-03 17:32:09 · 91 阅读 · 0 评论 -
vue 之 IE兼容相关处理
在之前的文章中说过一些关于兼容IE的方法,今天把关于在使用vue全家桶在开发中遇到的IE的的兼容问题汇总了一下。开发框架:vue-cli+axios+router+element-ui+mockjs一、IE和一些低版本的高级浏览器对es6新语法并不支持,使用babel-polyfill。装载babel-polyfill,cnpm install babel-polyfill --save。...原创 2019-10-31 11:29:43 · 1612 阅读 · 0 评论 -
vue 之 自定义指令
除了核心功能默认内置的指令 (v-model和v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。---来自官网钩子函数参数指令钩子函数会被传入以下参数:el:指令所绑定的元素,可以用来直接操作 DOM 。binding:一个对象,包含以下属...原创 2019-07-29 16:42:30 · 64 阅读 · 0 评论 -
vue 之 $nextTick
一、什么是Vue.$nextTick()官方给的解释为:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。我的理解为:nextTick()是将回调函数延迟在dom更新数据后调用,就是当数据更新后且dom渲染后,再自动执行该函数。二、使用场景在created()中进行dom操作。由于在created()中,dom节点还没有渲染,如果需要...原创 2019-05-22 11:13:20 · 231 阅读 · 0 评论 -
vue 之 ref 用法
ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。--官网简介这里我们简单理解就是如果我们可以通过ref获取DOM 元素或组件实例。一、DOM<template> <div> <p ref="p"&...原创 2019-03-21 20:22:06 · 139 阅读 · 0 评论 -
vue 之 路由懒加载
使用vue开发已经有一段时间了,在后来的工作中,做的一些项目越来越大。vue打包后的js文件也越来越大,这会是影响加载时间的重要因素。当构建的项目比较大的时候,懒加载可以分割代码块,提高页面的初始加载效率。这里我汇总了常见的几种vue中路由懒加载的方法。方法一 resolve这一种方法较常见。它主要是使用了resolve的异步机制,用require代替了import,实现按需加载,下面是代码...原创 2019-03-14 10:06:17 · 65 阅读 · 0 评论 -
vue 之 生命周期详解
vue生命周期由图可见:生命周期名称函数定义创建前beforeCreate组件实例刚刚建立,组件属性计算之前创建后created组件实例已经建立,组件属性已经计算编译/挂载前beforeMount已经渲染出虚拟dom节点,如<i>{{msg}}</i>编译/挂在后mounted已经渲染出实际dom节点...原创 2019-03-04 22:34:00 · 84 阅读 · 0 评论 -
vue 播放器插件 之 vue-video-player
git项目地址:https://github.com/surmon-china/vue-video-player使用安装:npm install vue-video-player --save在main.js入口文件中引入import VideoPlayer from 'vue-video-player'require('video.js/dist/video-js.css'...原创 2019-02-19 11:25:40 · 240 阅读 · 0 评论 -
vue 之 vuex入门
这段时间一直在搞vue相关的项目,期间尝试使用vuex相关的技术,下面是一点点在这方面的总结。一、什么是vuex每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中...原创 2018-12-18 16:41:46 · 76 阅读 · 0 评论 -
Vue 之 自动化全局注册
在开发vue项目过程中,如果路由、组件等过多的话,注册起来是一件很麻烦的事情,这里引入自动化注册会很大程度上减少工作量。webpack使用 require.context 可以动态引入文件,我们可以借助这个方法实现自动化注册。一、 require.contextrequireconst func = require('./dir/first.js');我们可以通过这个方法读取一个文件...原创 2018-11-27 16:53:13 · 101 阅读 · 0 评论 -
vue 之 全局注册
一、全局组件新建一个组件文件夹,如cp。组件文件在cp文件夹中新建vue组件文件,如cp.vue//cp.vue<template> <div></div></template><script> export default { name: 'cp', data() {...原创 2018-11-27 14:02:30 · 135 阅读 · 0 评论 -
vue 之 config配置文件详情
本文章来自转载,主要讲解了vue-cli下的config配置相关文件。(涉及到较复杂的解释将通过标识的方式(如(1))将解释写到单独的注释模块,)//config目录下index.js配置文件// see http://vuejs-templates.github.io/webpack for documentation.// path是node.js的路径模块,用来处理路...原创 2018-11-13 10:59:14 · 192 阅读 · 0 评论 -
vue 之 打包相关配置问题
vue项目打包后,在发布项目时,浏览器会报错访问不到图片等静态资源,这里提供一个解决办法。一、vue打包后静态资源路径设置config/index.js文件里build部分的assetsPublicPath: '. /'二、vue打包后部分图片图片路径不对设置build/utils.js文件里cssLoaders部分的publicPath:'../../'三、vue-cli webpa...原创 2018-11-12 10:25:41 · 91 阅读 · 0 评论 -
vue 之 父子组件传值
vue的重点之一就是组件化,在开发过程中我们必须要考虑到的就是父子组件之间的传值问题。在这篇文章中我会跟大家分享一下,我在开发中对这方面问题的处理一、 父组件向子组件传值先看示例代码//parent.vue(父组件)<template> <div> <child :message="tochild"></...原创 2018-11-07 19:35:29 · 87 阅读 · 0 评论 -
vue 基础知识
什么是vue,可以在官方文档上得到很系统的介绍。一、vue项目文件结构├── build --------------------------------- webpack相关配置文件│ ├── build.js --------------------------webpack打包配置文件│ ├── check-versions.js ---------------------...原创 2018-11-06 16:04:11 · 80 阅读 · 0 评论 -
vue 全家桶 简解
一、准备工作安装node.js···最新版的node.js已经集成了npm包管理工具安装git···这一步也可以省略,我这里使用git是为了更方便的使用命令行进行npm命令行操作全局安装vue-clinpm install vue-cli -g进行到这里准备工作就基本结束了,接下来就是使用vue-cli新建一个项目。二、新建项目新建vue项目vue init webpack ...原创 2018-11-06 16:03:17 · 70 阅读 · 0 评论 -
8 个非常实用的 Vue 自定义指令
在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册 自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() ...转载 2020-12-28 11:59:14 · 107 阅读 · 0 评论