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 的编译器为它添加特殊功能. 组件的使用有三 ...
随机推荐
- 前端面试题常考&必考之--清除浮动的方法
浮动 问题:子元素设置了float后,脱离父元素,导致父元素无法撑开?(也就是子元素的高度没有过渡到父元素) 例子: 检查元素的效果: (三种)常用的解决办法: 1>额外标签法,添加一个空的di ...
- react native之使用 Fetch进行网络数据请求
这是一个单独的页面,可以从其他地方跳转过来. 输入语言关键字,从github检索相关数据 import React, {Component} from 'react'; import { StyleS ...
- React Native 之导航栏
一定要参考官网: https://reactnavigation.org/docs/en/getting-started.html 代码来自慕课网:https://www.imooc.com/cour ...
- SpringBoot整合knife4j
官网说明及用法: 简介 swagger-bootstrap-ui是springfox-swagger的增强UI实现,为Java开发者在使用Swagger的时候,能拥有一份简洁.强大的接口文档体验 核心 ...
- PHP导出excel文件名中文IE乱码解决
<?php $ua = strtolower($_SERVER['HTTP_USER_AGENT']); if(preg_match('/msie/', $ua) || preg_match(' ...
- 修改select的默认样式
在我们用select的时候,通常因为他的默认样式比较丑而用自己样式,那首先要去掉他的默认样式 去掉select的边框和点击时的蓝色边框 select{border: none;outline: non ...
- [CSP-S模拟测试]:串串香（KMP）
题目传送门(内部题75) 输入格式 输入文件$ccx.in$ 每个输入文件包含多组测试数据.输入文件的第一行为一个整数$T$,表示数据组数.接下来$T$行,每行表示一组测试数据 每行一开始,两个空格隔 ...
- JAVA 8 ：从永久区（PermGen）到元空间（Metaspace）
你注意到了吗?JDK 8早期可访问版本已经提供下载了,java 开发人员可以使用java 8 提供的新的语言和运行特性来做一些实验.其中一个特性就是完全的移除永久代(Permanent Generat ...
- Qt中用QuaZip来压缩和解压缩文件
1.简介 QuaZIP是使用Qt,C++对ZLIB进行简单封装的用于压缩ZIP以及解压缩ZIP的开源库.如果你的Qt项目当中用到了压缩以及解压缩ZIP的话你可以考虑选择使用它. 官方主页:http:/ ...
- 移动端轮播完整版css3加原生写法
<!doctype html><html><head> <meta charset="UTF-8"> <meta name=& ...