文章目录 方式一：局部注册所需组件使用缓存方式二：动态注册组件实现让多个组件使用同一个挂载点，并动态切换，这就是动态组件。 通过使用保留的 <component>元素，动态地绑定到它的 is 特性，可以实现动态组件。 方式一：局部注册所需组件 <div id="example"><button @click="change">切换页面</button><component :is="currentView"></component> </div><script> var home = {template:<div>我是主页</div>}; var post = {templ...
vue中组件传值方式整理 1.我们最熟悉的父子组件传值 父->子 props子->父 $emit这些我们最常用的就不说了，如果有不理解的，俺这儿有篇不错的文章，链接奉上~https://www.cnblogs.com/LoveAndPeace/p/7273648.html 2.兄弟组件或无关系组件之间的传值 我们最常用的方式采用一个第三方变量 俗称eventbus通过其中一个$emit发另一个$on接收的方式 实现组件传值main.js中挂载一下 在其中一个页面$emit另一个页面$on是不是有点像昨天我写的...
为什么要写本文呢，话说现在vue-ssr 官网上对 vue 服务端渲染的介绍已经很全面了，包括各种服务端渲染框架比如 Nuxt.js 、 集成 Koa 和vue-server-renderer 的 node.js 框架 egg.js，都有自己的官网和团队在维护，文档真是面面俱到功能强大，但是，我个人在刚开始看这些资料的时候，总是忍不住发起灵魂三问：“我是谁？我在哪？我在干什么？”，提前没有相关知识的人开始学这些，肯定是要走一些弯路或者卡在某个点一段时间的，所以...
1、表格内部显示和编辑切换这种方式就是利用两个标签显示隐藏来实现，我们这里用input和span，正常用span将数据显示，点击编辑时，将span隐藏，显示input进行编辑。选中当前行我们可以通过slot-scope中的index去实现，在控制显示隐藏的属性上绑定index就可以选中当前行了，如showEdit[index]。 页面结构代码：<el-table:data="tableData"tooltip-effect="dark"style="width: 100%"header-align="center"><el-table-column width="5...
1、全局变量专用模块意思是说，用一个模块（js or vue）管理这套全局变量，模块里的变量用export （最好导出的格式为对象，方便在其他地方调用）暴露出去，当其它地方需要使用时，用import 导入该模块 全局变量专用模块Global.vue const colorList = [#F9F900,#6FB7B7, ] const colorListLength = 20 function getRandColor () {var tem = Math.round(Math.random() * colorListLength)return colorList[tem] } export default {co...
注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。 推荐使用npm安装。 npm install vue-router一、使用路由在main.js中，需要明确安装路由功能：import Vue from vue import VueRouter from vue-router import App from ./App.vue Vue.use(VueRouter)1.定义组件，这里使用从其他文件import进来 import index from ./components/index.vue import hello from ./components/hello....
本文讲述如何实现拥有酷炫背景视频的登录页面，浏览器窗口随意拉伸，背景视频及前景登录组件均能完美适配，背景视频可始终铺满窗口，前景组件始终居中，视频的内容始终得到最大限度的保留，可以得到最好的视觉效果。并且基于 Vue.js 2.0 全家桶。具体效果如下图所示： 最终效果可以翻到文章最后观看。 1. 背景视频 Web 页面的既有实现方式 国外有一个很好的网站 「Coverr」 ，提供了完善的教程和视频资源，帮助前端开发者构建酷炫...
最近在研究vue组件的学习，给自己留个笔记，也分享给大家，希望能对大家有所帮助<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Vue 测试实例-组件嵌套二种方式</title><script src="//cdn.bootcss.com/vue/2.1.10/vue.js"></script> </head><body><div id="app"><Itemlist1><Item v-for="item in items1" :data="item"/></Itemlist1><Itemlist2 :itemlist="items2"></Itemlist2></div><script>Vue.component(Item,{te...
?最近在学习VUE.js 中间涉及到JS全局变量，与其说是VUE的全局变量，不如说是模块化JS开发的全局变量。 1、全局变量专用模块 就是以一个特定模块来组织管理这些全局量，需要引用的地方导入该模块便好。 全局变量专用模块 Global.vue <script type="text/javascript"> const colorList = [#F9F900,#6FB7B7,#9999CC,#B766AD,#B87070,#FF8F59,#FFAF60,#FFDC35,#FFFF37,#B7FF4A,#28FF28,#1AFD9C,#00FFFF,#2894FF,#6A6AFF,#BE77FF,#FF77F...