CSS 선택 도구로 구성 요소를 만드시겠습니까?

사용자 정의 HTML 태그 대신 CSS 선택기를 전달하여 Vue 구성 요소를 만들 수 있습니까? 그리고 차례로 템플릿 자리 표시 자에 맞춤이 아닌 HTML 태그를 사용할 수 있습니까?CSS 선택 도구로 구성 요소를 만드시겠습니까?

맞춤 HTML 태그의 SEO 의미에주의해야하므로 물어 봅니다.

출처

2017-10-15 Dan.

우선 그렇습니다. 셀렉터 또는 #id 요소를 사용하여 구성 요소를 정의 할 수 있습니다. 그러나, 나는 당신이 원하는 것을 정확하게 이해한다면 당신이 생각하는 것처럼 작동하지 않습니다.

이 방법은 널리 사용되거나 잘 문서화되어 있지 않습니다. link & link으로 알려져 있지만 x- 템플리트로 알려진 것을 사용할 수 있습니다. 다음과 같이 구성 요소를 정의합니다.

Vue.component('my-cool-component', { 
    template: '#my-cool-component', //refers to script tag id 
      data() { 
       // 
      }, 
      methods: { 
       // 
      } 
});

그런 다음 당신은 당신의 구성 요소에서 템플릿 아이디 세트를 사용해 '텍스트/X-템플릿'스크립트 태그 내에서 HTML의 실제 템플릿 마크 업을 포함한다.

<script type="text/x-template" id="my-cool-component"> 
    <section> 
     <h1>Title</h1> 
     <p>...</p> 
    </section> 
</script>

위의 경우 표준 html 태그 만 사용할 수 있습니다.

질문의 두 번째 부분을 더 명확히하기 위해 템플릿에 구성 요소 이름을 지정할 때 사용자 정의 html 태그 을 사용할 수 있어야합니다. 렌더링 중에 Vue.js가 구문 분석하므로 걱정하지 않아도됩니다. 예를 들어, 당신은 페이지의 마크 업에서 다음

Vue.component('my-cool-component', { template: `<section> <h1>Title</h1> <p>...</p> </section>', data() { // }, methods: { // } });

당신은 사용자 정의 HTML 요소 태그를 포함 할 때 <my-cool-component></my-cool-component> 뷰는 태그를 제거하고 만 것입니다, 당신은 다음과 같이 대신 템플릿 리터럴을 사용하여 구성 요소에 직접적으로 마크 업 템플릿을 모두 쓸 수 있다면 템플릿 마크 업을 렌더링합니다. 내가 질문을 제대로하지만 vuejs 실제로 템플릿 자리 같은 이러한 사용자 정의 태그를 렌더링하지 않는 경우 확실하지

<section> <h1>Title</h1> <p>...</p> </section>

출처

2017-10-15 18:19:21 skribe

. 모든 템플릿 자리 표시자를 실제 템플릿으로 변형합니다. 다음 예를 참조하십시오 :

CustomComponent.vue을

<template><div class="child">Hello World</div></template> 

<script> 
export default { 
    name: 'CustomComponent' 
} 
</script>

부모 요소 : 이것은 당신이 정말로 있다면이

<div class="parent"><div class="child">Hello World</div></div>

같은 것을 보이는 DOM을 렌더링

<template> 
    <div class="parent"><custom-component></custom-component></div> 
</template> 

<script> 
import CustomComponent from './CustomComponent' 

export default { 
    components: { 
    CustomComponent 
    } 
} 
</script>

최고 경영자에 대한 우려가 있다면 server-side rendering을 조사하는 것이 좋습니다. 그렇지 않으면 모든보기 구성 요소가 클라이언트에서 자바 스크립트 실행을 사용하여 렌더링됩니다. 검색 엔진 크롤러가 자바 스크립트를 실행하는지 또는 실행하더라도 페이지가 렌더링되기까지 얼마나 기다릴 지 확신 할 수 없습니다.

출처

2017-10-16 12:00:26 truefalse10

CSS 선택 도구로 구성 요소를 만드시겠습니까?

답변

관련 문제