Vue 구성 요소 작성 사양

이번에는 Vue 컴포넌트의 표준 작성 방법을 가져왔습니다. Vue 구성 요소의 작성 방법에 표준화된 주의 사항은 무엇인지 살펴보겠습니다.

Data Driven과 구성 요소화는 vue.js의 가장 중요한 두 가지 기능입니다. 구성 요소화는 코드 재사용을 촉진하고 개발 효율성을 향상시키는 것입니다. Vue 구성요소를 작성하는 네 가지 일반적인 방법이 있으며, 각각 고유한 특성을 갖고 있으며 다양한 시나리오에 적합합니다.

1. 글로벌 컴포넌트

구조:

// 组件的注册 
Vue.component( 'componentName', { 
 template: // 组件的html结构, 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
}) 
// 组件的使用 
new Vue({ 
 el: '#app' 
})

스크립트 태그에서 Vue.comComponent()를 통해 글로벌 컴포넌트를 정의하고, 새로운 Vue()를 통해 id app으로 html 파일에 컴포넌트를 적용합니다. 라벨 내의 인스턴스.

기능:

<1> html 파일의 스크립트 태그에서 직접 정의하여 사용할 수 있습니다.

<2> 이 방법을 통해 정의된 구성 요소는 전역 구성 요소이며 모든 Vue에서 사용할 수 있습니다. 인스턴스 사용, 프로젝트가 비교적 단순한 시나리오에 적합합니다.

컴포넌트를 정의

할 때마다 Vue.comComponent()를 재사용해야 하며, 컴포넌트 이름은 동일할 수 없습니다.

Welcome 컴포넌트

2. 로컬 컴포넌트

구조:

// 构造组件对象 
const componentName = { 
 template: // 组件的html结构, 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
} 
// 组件的使用 
new Vue({ 
 el: '#app', 
 components: { 
 // 组件注册、调用 
 componentName 
 } 
})

스크립트 태그에 컴포넌트 객체를 정의하고, Vue 인스턴스의 컴포넌트 속성을 통해 컴포넌트를 등록하고 호출합니다.

기능:

<1> 전역적으로 정의된 구성 요소와 유사하게 html 파일의 스크립트 태그에 직접 작성하고 사용할 수 있습니다.

<2> in;

예:

Welcome 컴포넌트

3. 템플릿 태그 사용

구조:

<template id="componnet"> 
 // 组件的html结构 
</template> 
// 全局组件的注册与使用 
Vue.component( 'componentName', { 
 template: '#component', 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
}) 
new Vue({ 
 el: '#app' 
}) 
// 局部组件的注册与使用 
const componentName = { 
 template: '#component', 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
} 
new Vue({ 
 el: '#app', 
 components: { 
 // 组件注册、调用 
 componentName 
 } 
})

템플릿 태그를 사용하여 body 태그 내부 컴포넌트에 html 구조를 작성하고 사용합니다. 스크립트 태그의 전역 구성 요소 및 로컬 구성 요소. 차이점은 구성 요소의 템플릿 속성이 ID로 참조된다는 것입니다.

기능:

<1>js 파일에는 html 구조 콘텐츠가 포함되지 않아 구조와 논리가 분리됩니다.

예:

Welcome 구성 요소

4, 단일 파일 구성 요소

구조:

<template lang="html"> 
 // 组件中的html结构 
</template> 
<script> 
 //组件的逻辑 
 export default { 
 // 组件的属性和方法 
 } 
</script> 
<style lang="css" scoped> 
 // 组件的样式 
</style>

접미사 vue를 사용하여 파일을 생성하고 파일 이름은 구성 요소 이름입니다. 구성요소에는 html 구조, js 로직, CSS 스타일의 세 부분이 포함되어 있으며 각 부분은 서로 다른 태그에 해당합니다. 컴포넌트 사용시 Import를 통해 사용할 수 있습니다.

특징:

<1> 구성 요소는 서로 영향을 주지 않으며 재사용 가능성이 높으며 html, css 및 js를 재사용할 수 있습니다.

<2> ;

<3> 대규모 및 복잡한 프로젝트에 적합하며 다중 사용자 개발에 적합합니다.

Welcome 컴포넌트

! ! ! 템플릿 태그의 모든 태그는 하나의 태그로 래핑되어야 합니다. 그렇지 않으면 오류가 보고됩니다. 이 글의 사례를 읽고, 더 많은 PHP 중국어 사이트의 다른 관련 글도 주목해주세요! 추천 도서:

vuex 사용에 대한 자세한 설명

렌더링 조작 방법은 무엇인가요?

위 내용은 Vue 구성 요소 작성 사양의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!