vue.js（17）--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" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../lib/bootstrap.css">
<script src="../lib/vue.js"></script>
<style>
.v-enter,.v-leave-to{
opacity: 0;
transform: translateY(50px);
}
.v-enter-active,.v-leave-active{
transition: all 0.5s ease;
}
/* vue动画的style */
</style>
</head>
<body>
<div class="app">
<a href="#" @click.prevent="comName='mycom1'">登录</a>
<a href="#" @click.prevent="comName='mycom2'">注册</a>
<a href="#" @click.prevent="comName='mycom3'">退出</a>
<!-- <mycom1 v-if="flag"></mycom1>
<mycom2 v-else="flag"></mycom2> -->
<transition mode="out-in"> <!-- //mode定义了切换动画的顺序为先出后进，还有in-out -->
<component :is="comName"></component>
</transition>
<!-- component是一个占位符，‘：is’用来指定要展示组件的名称 -->
<!-- transition包含的区域为要进行切换的多组件 -->
</div>
<template id="cmp1">
<div>
<h1>我是组件一</h1>
</div>
</template>
<!-- 定义组件结构 -->
<template id="cmp2">
<div>
<h1>俺是组件2222哟</h1>
</div>
</template>
<template id="cmp3">
<div>
<h1>我退出啦</h1>
</div>
</template>
<script>
Vue.component('mycom1',{
template:'#cmp1'
})
//注册组件名称
Vue.component('mycom2',{
template:'#cmp2'
})
Vue.component('mycom3',{
template:'#cmp3'
})
var vm = new Vue({
el:'.app',
data:{
flag:true,
comName:'mycom1'
}
})
</script>
</body>
</html>
vue.js（17）--vue的组件切换的更多相关文章
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- 学习Vue.js之vue移动端框架到底哪家强
官网:https://cn.vuejs.org/. 转载:http://www.cnblogs.com/8899man/p/6514212.html Weex 2016年4月21日,阿里巴巴在Qcon ...
- js 引入Vue.js实现vue效果
拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...
- Vue.js 2.x：组件的定义和注册（详细的图文教程）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的, ...
- Vue.js 相关知识（组件）
1. 组件介绍 组件(component),vue.js最强大的功能之一 作用:封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能调用该功能体 根组件:我们实例化的Vue对象就是一个组件 ...
- vue-core-video-player-基于vue.js的视频播放器组件
一 介绍 一款基于 vue.js 的轻量级的视频播放器插件插件 个性化配置 i18n 服务端渲染 画中画模式 事件订阅 易于开发 移动端适配 1.1 官方文档 https://core-player. ...
- 基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...
- Vue.js的表格分页组件
转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
- vue.js中的全局组件和局部组件
组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...
随机推荐
- JS——数组中push对象，覆盖问题，每次都创建一个新的对象
今天写运动框架时,发现将对象push进数组,后面的值会覆盖前面的值,最后输出的都是最后一次的值.其实这一切都是引用数据类型惹的祸. 如果你也有类似问题,可以继续看下去哦. 下面 ...
- mybatis配eclise模板,mybatis快速生成模板
eclipse中mybatis得mapper文件不提示(mybatis-3-mapper.dtd,mybatis-3-config.dtd) 1.下载该文件到你的硬盘文件夹下 2.windows -- ...
- spring IOC（Spring 生命周期，先1.构造方式，2，初始化方法，3，目标方法，4，销毁方法）
- asp.net大文件上传解决方案
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传 ...
- NOI 2727:仙岛求药 x
总时间限制: 1000ms 内存限制: 65536kB 描述 少年李逍遥的婶婶病了,王小虎介绍他去一趟仙灵岛,向仙女姐姐要仙丹救婶婶.叛逆但孝顺的李逍遥闯进了仙灵岛,克服了千险万难来到岛的中心,发 ...
- oralce创建dblink
CREATE DATABASE LINK dblinkName CONNECT TO dbLoginName IDENTIFIED BY dbLoginPwd USING '(DESCRIPTION= ...
- 《上瘾 - 让用户养成使用习惯的四大产品逻辑》 - Nir Eyal, Ryan Hoover
<上瘾 - 让用户养成使用习惯的四大产品逻辑> - Nir Eyal, Ryan Hoover 前言 1.所谓的消费升级,就是个人愿意付出更高的成本购买与自我价值相匹配的产品.购买即是一种 ...
- sql时间类型相关
1.现在时间 NOW() 示例: select * from users where date<now() 2.时间相减 INTERVAL ' DAY 示例: ' DAY 3.timestamp ...
- DataGridView数值列和日期列
本文转自:http://www.cnblogs.com/conexpress/p/5923324.html 在使用DataGridView编辑数据的时候,编辑的单元格一般会显示为文本框,逻辑值和图片会 ...
- Vue Router 路由守卫：完整的导航解析流程
完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...