vue Components_vue.js 사용에 대한 몇 가지 세부 사항

이 글에서는 주로 Vue 컴포넌트 사용에 대한 몇 가지 세부 사항을 소개합니다. 이 글에서는 기본적인 예시를 통해 매우 자세하게 소개합니다. 도움이 필요한 친구들은 참고할 수 있습니다.

기본 예제

작업 결과:

모두가 위 내용을 알고 있으므로 여기서는 자세히 설명하지 않겠습니다. 때로는 tbody의 각 줄이 하위 구성 요소가 되어야 하기 때문입니다. 우리 코드는 무엇을 할 수 있나요? 다음과 같이 작성하고 전역 구성 요소를 다음과 같이 정의할 수 있습니다.

그런 다음 본문에서 다음과 같이 호출할 수 있습니다.

실행 결과:

행이 인쇄되는 것을 볼 수 있습니다. , 하지만 실제로는 미션 내용이 없는데, 문제가 어디에 있습니까? 코드로 돌아가서, vue 인스턴스를 생성할 때 마운트할 지점을 지정하지 않았으므로 el을 사용하여 vue가 인수한 Dom을 다음과 같이 지정했습니다.

실행 결과:

문제 없을 것 같은 느낌인데 정말 그럴까요? 요소를 확인하여 DOM 구조를 확인합니다.

오류가 보이나요? 정상적인 3개의 tr은 tbody에 있어야 하는데 이제 tbody와 동일한 레이어에 있습니다. 무슨 일이 일어나고 있는 걸까요?

H5 사양에서는 테이블에 tbody가 있어야 하고 tr은 tbody에 배치되어야 합니다. 이제 하위 구성 요소를 사용하여 행을 작성하므로 브라우저에서 구문 분석 시 문제가 발생합니다.

이런 상황이 발생하면 어떻게 버그를 해결해야 할까요? 현재 vue에서 제공하는 is

속성

을 사용하여 이 문제를 해결할 수 있습니다. 아주 간단합니다. tbody에는 tr만 쓸 수 있으므로 모두 tr을 씁니다. 하지만 실제로 tr을 표시하려면 tr의 빈 내용만 표시해야 하는 것이 아닙니다. 행 구성요소, 그러면 어떻게 해야 할까요?

다음과 같이 tr에 추가 속성을 추가하여 행과 동일하게 만들 수 있습니다.

이 코드의 의미는 다음과 같습니다. 구성 요소를 사용하고 싶지만 이 구성 요소를 직접 작성할 수는 없습니다. 그래서 우리는 tr을 썼습니다. 내가 쓴 것은 tr이지만 행 구성 요소라는 의미입니다. 이렇게 하면 H5 사양을 준수할 수 있을 뿐만 아니라 구성 요소의 내용도 표시할 수 있습니다. 프로그램에는 버그가 없습니다.

실행 결과:

모든 것이 정상입니다.

同样我们使用 ul, select 标签的时候，也可以用这种方法。세부 2

기본 예

이 텍스트 조각을 별도로 추출하여 표현하는 데 사용하려는 경우 텍스트가 포함된 구성 요소 행을 정의했습니다. 변수로 사용하면 다음과 같이 작성될 수 있습니다.

완벽해 보이지만 브라우저를 열고 실행하면 버그가 물결치는 것을 발견할 수 있습니다.

주된 의미는 데이터가 객체가 아니라 함수라는 것입니다. 가장 바깥쪽 vue의 인스턴스인 루트 구성 요소에서는 객체를 통해 정의해도 괜찮지만 하위 구성 요소에서는 어떻게 될까요? 루트가 아닌 구성 요소는 다음과 같습니다. 정의가 작동하지 않습니다. 데이터를 정의하려면 함수여야 하며 이 함수는 다음과 같이 개체를 반환해야 합니다.

실행 결과:

이 방법으로 문제가 해결됩니다.

는 하위 구성 요소가 루트 구성 요소처럼 한 번만 호출되는 것이 아니라 여러 번 호출될 수 있기 때문에 이렇게 정의됩니다. 따라서 각 하위 구성 요소의 데이터가 <a href="%EC%99%80%20%EB%8F%99%EC%9D%BC%ED%95%B4%EC%A7%80%EB%8A%94%20%EA%B2%83%EC%9D%84%20%EC%9B%90%ED%95%98%EC%A7%80%20%EC%95%8A%EC%8A%B5%EB%8B%88%EB%8B%A4.%20http://www.php.cn/java/java-alibaba-qita.html" target="_blank">다른 하위 구성요소가 충돌하거나 각 하위 구성요소에 자체 데이터 필드가 있어야 하며 객체가 반환될 수 있습니다. 이 요구 사항은 함수를 통해 달성될 수 있습니다. </a>之所以这么定义，原因是一个子组件不像根组件只被调用一次，而是可以多次调用，那么每一个子组件的数据我们不希望和<a href="http://www.php.cn/java/java-alibaba-qita.html" target="_blank">其它</a>的子组件产生冲突或者说每个子组件都应该有一个自己的数据域，通过函数返回一个对象就可以实现这个需求。

상세 3

기본예제

실행하고 클릭하면 팝업이 뜨는데 문제없습니다. Vue에서는 Dom을 코드로 작동하는 것을 권장하지 않지만, 매우 복잡한

animation 효과를 다룰 때는 실제로 Dom을 작동해야 합니다. 그렇다면 Vue에서 Dom을 작동하는 방법은 무엇일까요? 다음과 같이 ref 를 통해 를 참조할 수 있습니다.

이때 p를 클릭하면 내부 내용을 인쇄해야 합니다. 참조로 p 노드를 가져온 다음 해당 내용을 인쇄할 수 있습니다. content inside p 내용:

실행 결과:

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요. !

추천 도서:

VuePress(코드 포함)를 사용하여 개인 블로그를 구축하는 단계에 대한 자세한 설명

웹사이트가 아닌 루트 디렉터리에서 Vue 프로젝트를 컴파일하고 배포하는 방법에 대한 자세한 설명

위 내용은 vue Components_vue.js 사용에 대한 몇 가지 세부 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!