专栏首页Jerry的SAP技术分享一个典型的Vue应用的App.vue

一个典型的Vue应用的App.vue

<template>
    <div id="app" ref="bodyPage">
        <transition name="fade" mode="out-in">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </transition>
    </div>
</template>
<transition name="fade">
    运动东西(元素,属性、路由....)
</transition>

是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

比如url: /a/b/c (假设a、b、c都为正常路径,不会作为参数)

那/a对应的就是App.vue中的router-view,/a进入a.vue中 那/a/b对应的就是a.vue中的router-view, /a/b进入b.vue中

Script:

<script>
    export default{
        name:'app',
        data:function(){
            return{
                clientHeight:''
            }
        },
        mounted:function(){
            this.clientHeight = `${document.documentElement.clientHeight}`
            this.$refs.bodyPage.style.height = this.clientHeight + 'px'
            // window.console.log("body totle height: "+this.clientHeight+'px')
        },
    }
</script>

Style:

<style>
    html,body{
        padding: 0px;
        margin: 0px;
        height: 100%;
        width: 100%;
        /*overflow: hidden;*/
    }
</style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何在Kubernetes里创建一个Nginx service

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • nginx配置文件语法高亮的Sublime Text扩展

    nginx的初学者们,编辑nginx.conf这个配置文件时,往往对其语法比较头痛:

    Jerry Wang
  • Coverage analysis in ABAP in Eclipse

    Jerry Wang
  • 前端路由原理解析和实现

    路由的概念来源于服务端,在服务端中路由描述的是 URL 与处理函数之间的映射关系。

    ConardLi
  • 【报告系列解读二】2018年度国内物联网资产暴露与变化情况分析

    2019年3月,绿盟科技、上海交通大学信息内容分析技术国家工程实验室和广州大学网络空间先进技术研究院联合发布《2018物联网安全年报》。对于报告的四个章节我们分...

    绿盟科技研究通讯
  • WCF入门(7)

    前段时间忙着驾照科目二的考试,都没有机会碰自己的电脑。说起来也是第一次参加这么没信心的考试,不过好在过了。

    _淡定_
  • 从TCP协议的原理来谈谈rst复位攻击

    在谈RST攻击前,必须先了解TCP:如何通过三次握手建立TCP连接、四次握手怎样把全双工的连接关闭掉、滑动窗口是怎么传输数据的、TCP的flag标志位里RST在...

    范蠡
  • 这是我见过最完美的“docker学习宝典”,阿里云高工熬夜手写,服!

    什么是Docker?对于很多不了解Docker技术的人来说,Docker可能只是一条“蓝色的鲸鱼”。实际上,Docker技术的流行,还是因为开发人员对它的认可。...

    Java程序猿阿谷
  • centos5.x 挂载iscsi实战

    1 下载最新的相关组件,最好是用最新的组件,用centos5.5自带的iscsi组件,发现一个bug,重启的时候机器会卡住。开始只是将更新了最新的iscsi-i...

    力哥聊运维与云计算
  • Python连接TCP未开启端口时程序“假死”的解决办法

    在套接字编程中,连接远程未开启的TCP端口会导致GUI界面假死,一段时间内无法响应用户的其他键盘和鼠标操作,影响用户体验。解决这个问题的主流方案有使用子线程连接...

    Python小屋屋主

扫码关注云+社区

领取腾讯云代金券