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>

原文地址:https://www.cnblogs.com/qiqisusu/p/11372881.html

时间: 2024-10-08 18:08:12

vue.js(17)--vue的组件切换的相关文章

在sublime 编辑器中,安装插件 Vue Syntax Hightlight,高亮识别Vue.js 的单文件组件(*.vue)

转自:http://www.cnblogs.com/cosnyang/p/6290950.html 默认情况下,Vue.js 的单文件组件(*.vue)在 sublime 编辑器中是不被识别的.若要想高亮显示,需要安装插件 Vue Syntax Hightlight.安装步骤如下: 第一,在 sublime 中打开 PackageControl 如下图,快捷键 Ctrl+Shift+P. 第二,打开 Install Package 窗口.下图中第一个,回车. 打开过程中,右下角出现状态栏.如下图

Vue.js起手式+Vue小作品实战

本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑的代码以供练习和测试之用:在最后,我参考SegmentFault上的一篇技博,对Vue进行初入的实战,目的是将新鲜学到的知识立即派上用场:如果你还是前端的小白,相信这篇文章可能会对产生一些帮助和引起思想的碰撞,因为大家的学习历程是相似的,遇到的困惑也有一定的共通性,如果文章出现谬误之处,欢迎各位童鞋

学习Vue.js之vue移动端框架到底哪家强

官网:https://cn.vuejs.org/ Weex 2016年4月21日,阿里巴巴在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请. Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能.可扩展的 native 应用,为了做到这些,Weex 与 Vue 合作,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,这样一来,你甚至可以使用其他框架驱动 Weex,打造三端一致的 native 应用. Weex能够

js 引入Vue.js实现vue效果

拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, u

[vue遇错记录] vue.js:569 [Vue warn]: Cannot find element: #app

写了一个很简单的界面,console提示:vue.js:569 [Vue warn]: Cannot find element: #vue-app.找了半天才发现原因: <script src="../vue.js"></script> <div id="app"> {{ message }} </div> <script src="app.js"></script> <

Vue.js 基础学习之组件

什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 创建全局组件 <div id="seg1"> <alert></alert> </div> <div id="seg2"> <alert></alert>

vue.js中的全局组件和局部组件

组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三个步骤: 1.创建组件构造器 2.注册组件 3.使用组件 先来看一段代码: <!DOCTYPE html> <html> <body> <div id="app"> <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使

Vue.js的表格分页组件

转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋可以移步我的上一篇文章<浅谈Vue.js>了解一下. BootPage组件简介 其实也不是啥高大上的组件了,相反确实一个简单的表格分页组件而已,主要是自己最近项目中需要一个表格分页组件,而Vue官方组件

基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数, 代码如下: html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=

关于Vue.js和Vue.js的优缺点以及和与其他前端框架的区别

首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开. View通过Controller来和Model联系,Controller是View和Model的协调者,View和Model不直接联系,基本联系都是单向的. 用户User通过控制器Controller来操作模板Model从而达到视图View的变化. 2.MVP:是从MVC模式演变而来的,都是通