Vue 组件切换

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con…

第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. app.vue <template> <div id=&quo…

Vue系列之 => 组件切换

组件切换方式一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&q…

vue + element-ui 制作tab切换（切换vue组件，踩坑总结）

本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用element-ui创建tab组件切换内容(需要了解的朋友点击链接查看) 2.创建相应文件. a.创建父组件 src/components/tabZujian.vue b.创建自组件(被切换的组件)src/tabComponents 文件夹 + + tabComponents(目录) ---- tabZuji…

AntDesign vue学习笔记（四）使用组件切换

同样实现上一篇功能, 改为使用组件切换,实现方法如下 1.修改MainFrm中的<router-view/>如下代码 2.注册局部组件 export default { name: 'MainFrm', data () { return { collapsed: false, page: Student } }, methods: { menu (s) { console.log(s) this.page = s } }, components: { StudentClass, Student…

组件切换方式（Vue.js）

这里,我用一个注册登录两组件的切换实例来演示: 切换方式一 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>独秀不爱秀</title> </head> <body> <div id="app"> <a href="#&quo…

Vue学习之组件切换及父子组件小结（八）

一.组件切换: 1.v-if与v-else方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv=&q…

vue组件开发练习--焦点图切换

1.前言 vue用了有一段时间了,开发的后台管理系统也趋于完善,现在时间比较算是有点空闲吧!这个空闲时间我在研究vue的另外的一些玩法,比如组件,插件等.今天,我就分享一个组件的练手项目--焦点图切换组件.这个项目是我用于vue组件练习的一个项目,当然了,代码也会提交到github(ec-slider),也会维护.我也想我开发的东西好用一点!现在,就是建议有需要的伙伴,可以来玩下这个项目,当练习的作用!另外,如果大家有什么建议,欢迎指点! 建议1.下面的步骤,最好在自己本地上跑起来,根据文章的步…

Vue学习笔记【24】——Vue组件（组件切换）

使用flag标识符结合v-if和v-else切换组件页面结构:(缺点:只适用于两个组件间切换,不适合多个) <div id="app"> <input type="button" value="toggle" @click="flag=!flag"> <my-com1 v-if="flag"></my-com1> <my-com2…

【vue系列之三】从一个vue-pdf-shower，说说vue组件和npm包

前言从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一遍. vue上手相对react来说是比较简单的,对于vue的基本指令以及语法,应该没有什么能比官网更详细,更生动的了.仔细想来,vue值得一说的,在项目中会让新手感到困惑的,是vue的组件,今天就最近工作中用到的一个pdf查看组件,和大家聊聊vue的组件.最后会讲如何将自己的代码封装成一个npm包,…

Vue 组件之 Router

Vue 组件之 Router Vue 开发单页应用的时候,免不了使用Vue组件.在单页应用上如何进行组件切换? 结构如下图所示: 主页面包含Foo组件与Bar组件,在主页面中可以进行Foo与 Bar的切换这个时候就会需要组件路由,Vue官方推荐的路由组件是Vue-Router.下面通过实例来演练 Vue-Router 安装Vue-Router npm install vue-router 定义组件 Bar.vue  <template> <p>…

Vue (三) --- Vue 组件开发

------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[component] 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 而在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js来定义功能的特效,因此就产生了把一个功能相关的…

vue组件如何被其他项目引用

自己写的vue组件怎么才能让其他人引用呢,或者是共用组件如何让其他项目引用.本文就粗细的介绍下,如有疑问欢迎共同讨论.在这里你能了解下如下知识点: 1. 如何发布一个包到npmjs仓库上 2.如何引用一个npm包,尤其是本地引用 3.vue组件的两种引用方案一.发布一个包到npm的步骤在npmjs.org上注册一个账号然后进入命令提示窗口输入: npm adduser: 进入添加用户 Username your name: 设置用户名 Password your password: 设置密…

vue 组件开发、vue自动化工具、axios使用与router的使用(3)

一. 组件化开发 1.1 组件[component] 在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码把[HTML.css和javascript]封装到一个文件的模式,我们成为“组件”. 组件有两种:默认组件[全局组件] 和单文件组件 1.1.1 默认组件 <div id="app"> <addnum></addnum> <addnum>&…

移动端无限滚动 TScroll.vue组件

// 先看使用TScroll.vue的几个demo 1.https://sorrowx.github.io/TScroll/#/ 2. https://sorrowx.github.io/TScroll/#/simple-tscroll 3. https://sorrowx.github.io/TScroll/#/xunlei-live 4. https://sorrowx.github.io/TScroll/#/youliao 5. https://sorrowx.github.io/TScr…

VUE组件汇总

内容 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★6253 - Vue 2的移动UI元素 muse-ui ★3705 - 三端样式一致的响应式 UI 库 vue-material ★3328 - 通过Vue Material和Vue 2建立精美的…

深入理解 Vue 组件

深入理解 Vue 组件组件使用中的细节点使用 is 属性,解决组件使用中的bug问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me…

三: vue组件开发及自动化工具vue-cli

一: 组件化开发 1 组件 1: 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 2: 什么是组件而在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js来定义功能的特效,因此就产生了把一个功能相关的[HTML.css和javascript]代码封装在一起组成一个整体的代码块封装模式,我们称之为“组件”. 组件就是一个html网页中的功能,一般就是一个标签,…

详解vue组件的keep-alive

<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们. <keep-alive> 与 <transition>相似,只是一个抽象组件,它不会在DOM树中渲染(真实或者虚拟都不会),也不在父组件链中存在,比如:你永远在 this.$parent 中找不到 keep-alive . 1.prop: include: 字符串或正则表达…

vue组件化开发实践

前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单介绍. 组件化需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + vuex + es6 + browserify. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - l…

滴滴开源 Vue 组件库— cube-ui

cube-ui 是滴滴去年底开源的一款基于 Vue.js 2.0 的移动端组件库,主要核心目标是做到体验极致.灵活性强.易扩展以及提供良好的周边生态-后编译. 自 17 年 11 月开源至今已有 5 个月,在这个过程中 cube-ui 受到了不少的关注,同时从社区中也收到了很多很好的反馈和建议.我们也一直在迭代更新,从最初的 1.0 版本到最近发布的 1.7 的版本,除了对原有组件做一些增强优化,我们也提供了很多新的组件.此外,周边后编译技术生态也做了很多优化,满足于更多场景需求,官网也做了一次…

vue组件原生事件以及路由

1.组件组件就是可以扩展HTML元素,封装可重用的HTML代码,可以将组件看作自定义的HTML元素 1.1组件注册全局注册: 组件注册时,需要给他一个名字,如下: Vue.component('my-component-name', { /* ... */ }) # 组件名使用kebab-case (短横线分隔命名)定义时,引用这个元素时使用 <my-component-name> # 组件名使用 PascalCase (驼峰式命名) 定义时,引用这个元素时使用<my-compone…

Vue 组件4 动态组件

动态组件通过使用保留的<component>元素,动态的绑定到它的is特性,我们让多个组件同时使用同一个挂载点,并动态切换: var vm = new Vue({ el: '#example', data: { currentView: 'home' }, components: { home: { /* ... */ }, posts: { /* ... */ }, archive: { /* ... */ } } }) <component v-bind:is="curr…

vue组件---动态组件&异步组件

(1)在动态组件上使用keep-alive 之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件.接下来简单回顾下 <component>元素是vue 里面的一个内置组件.在里面使用 v-bind: is,可以实现动态组件的效果.  <div class="tab_area"> <button v-for="tab in tabs" v-on:click="currentTab…

vue组件之间的传值——中央事件总线与跨组件之间的通信（$attrs、$listeners）

vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是当项目比较大,功能比较复杂的时候,就会变得比较冗余,代码不利于维护:这时候可能会有很多人使用到vuex,但是如果项目中多个组件共享状态比较少,项目比较小,并且全局状态比较少,好像就没有使用vuex来管理数据的必要. 一.中央事件总线(eventBus) 主要是通过在要相互通信的兄弟组件之中,都注册引…

vue组件定义方式，vue父子组件间的传值

vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> </head> <body> <div id="app"> <my-nav></my-nav> <hr> <my-nav2></my-n…

自定义Vue组件打包、发布到npm以及使用

本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件. 本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习. 先附上大佬的文献:https://blog.csdn.net/qq_40513881/article/details/82494958 按照大佬文中写的一步步操作,够细心的话基本可以一步到位.下面总结一下发布步骤: 1. 利用Vue的脚手架新建一个简易版的Vue项目my-project: vue ini…