VueJs 2의 internal a는 무슨 소용입니까?사용 사례와 그
기능을 이해하려고 합니다.
그 문서들을 참조했는데 아직도 상당히
혼란스럽다.
any.vue
파일의 다음 코드를 고려합니다.
<>template>.
<>div class="1링크">.
<>!멍청이 대신 예를 들어 사용하는 이유<>template>여기요?.
<>템플릿 v-if="인증">.
<>router-link:to="{이름:'home의}">을 말한다.
{{달러 t('home의)}}
<>/router-link>.
<>/template>.
<>템플릿 v-else>.
<>router-link:to="{이름:'login'}">을 말한다.
{{달러 t('login')}}
<>/router-link>.
<>/template>.
<>/div>.
<>/template>.
단순한 것 대신에 사용하는 이유는 무엇입니까?또한 사용하는 것과 말하는 것은 어떻게 다릅니까?
사용해도 DOM 내의 추가 요소가
출력되지 않는 것으로 알고 있습니다.
이는 부모가 필요하지 않은 여러 요소를 조건부로 추가할 때 특히 유용합니다.조건부로 여러 태그를 추가하는 것 외에 다른 목적이 없는 경우 추가
태그 없이 수행할 수 있습니다.
주로 스타일을
적용하기 위해 부모 컨테이너로 또는 다른 요소가 필요할 때까지 기본적으로 사용합니다.
당신은, 당신 사건에서 당신은 단순히 이것을 사용해야 하: 옳다.
<>template>.
<>div class="1링크">.
<>router-link v-if="인증":to="{이름:'home의}">을 말한다.
{{달러 t('home의)}}
<>/router-link>.
<>router-link v-else:to="{이름:'login'}">을 말한다.
{{달러 t('login')}}
<>/router-link>.
<>/div>.
<>/template>.
단, 부모 태그를 사용하지 않고 조건부 여러 태그가 필요하다고 가정합니다.
자세한 내용은 이쪽:
파일 메인에서 를 사용하면 보이지 않는
래퍼를 사용할 수 있습니다.
여기서 문제는 언제 투명
포장지를 사용해야 하느냐는 것입니다.
답은 간단합니다.
(단일
요소가 아닌) 요소 그룹에 대해 또는 지시문을 사용할 때.
따라서, 이 경우는, 다음과 같이,
전술한 모든 요소의 그룹을 정리합니다.
<template v-if = " "></template>
이렇게 함으로써 위의 태그 사이에 내용을 렌더링하기만 하면 됩니다.용장화를 작성할 필요가 없습니다.그 후 렌더링 후에는 태그 자체가 DOM에 존재하지 않기 때문에 보이지 않는
래퍼로서 기능합니다.
템플릿 태그 내의 내용은
파일의 보기에 렌더링됩니다.
단순한 외부 CSS를 사용하면 가
CSS를 사용하여 숨겨져 있어도 이미지 및 기타 리소스가 로드됩니다.
HTML5에서 도입된 이유에 대한 설명은 다음 링크를 참조하십시오.
소개참조URL : https://stackoverflow.com/questions/48477821/whats-the-use-of-template-within-a-template-in-vuejs-2
<template v-if = " "></template>
'programing' 카테고리의 다른 글
| 어떻게 vuejs에 재사용할 수 있는 작은 기능을 격리시켜야겠어요 (0) | 2022.07.23 |
|---|---|
| IntelliJ가 "Package does not exist" 오류를 표시하는 이유는 무엇입니까? (0) | 2022.07.23 |
| IntelliJ 검사는 "해결할 수 없는 기호"를 제공하지만 여전히 코드를 컴파일합니다. (0) | 2022.07.23 |
| 원점수와 근점수의 차이점은 무엇입니까? (0) | 2022.07.23 |
| 사용자가 [Submit]버튼을 클릭할 때까지 폼 입력 바인딩을 연기하려면 어떻게 해야 합니까? (0) | 2022.07.23 |