전형 적 인 Vue 응용 프로그램 인 App. vue

7109 단어 Web
<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 / 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:

좋은 웹페이지 즐겨찾기