简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  Vue에서 단일 파일이 아닌 구성 요소의 사용에 대해 설명하는 기사

Vue에서 단일 파일이 아닌 구성 요소의 사용에 대해 설명하는 기사

青灯夜游
青灯夜游앞으로
2023-01-17 20:05:191058검색

Vue에서 단일 파일이 아닌 구성 요소를 사용하는 방법은 무엇입니까? 다음 기사에서는 Vue에서 단일 파일이 아닌 구성 요소를 사용하는 방법을 소개합니다. 도움이 되기를 바랍니다.

Vue에서 단일 파일이 아닌 구성 요소의 사용에 대해 설명하는 기사

1. 컴포넌트란 무엇입니까?

애플리케이션의 로컬 기능 및 리소스 모음(간단히 말하면 html, js, css 및 리소스를 통합하는 작은 상자입니다)

이해하기 : 로컬(특정) 기능 효과를 달성하는 데 사용되는 코드 모음

이유: 인터페이스의 기능은 매우 복잡합니다

기능: 코딩 재사용, 프로젝트 코딩 단순화, 운영 효율성 향상

구성 요소는 단일이 아닌 구성 요소로 나뉩니다. 파일 구성 요소 및 단일 파일 구성 요소는 일반적으로 단일 파일 구성 요소로 사용됩니다. [관련 권장 사항: vuejs 비디오 튜토리얼, 웹 프론트 엔드 개발]

두 번째, 단일 파일이 아닌 컴포넌트

2.1 컴포넌트를 사용하는 세 가지 주요 단계

1. 컴포넌트 생성

(1) 컴포넌트를 정의하는 방법은 무엇입니까?

Vue.extend(options)를 사용하여 생성합니다. 여기서 옵션은 새로 생성할 때 전달된 옵션과 거의 동일합니다. 뷰(옵션). 하지만 약간 다릅니다. 컴포넌트가 Vue 인스턴스를 직접 제공하기 때문에 컴포넌트에 el 속성을 작성할 필요가 없으며 컴포넌트가 작성된 후에는 그렇지 않습니다. 여기에 표시된 대로 한 곳만 제공합니다. 구성 요소의 재사용성, 그래서 구성 요소는 el을 쓸 수 없습니다.

Vue에서 단일 파일이 아닌 구성 요소의 사용에 대해 설명하는 기사
2. 컴포넌트 등록 방법

1. New Vue Global 등록을 사용하는 경우: Vue.comComponent('컴포넌트 이름, 컴포넌트)를 사용합니다. ㅋㅋㅋ -단일 파일 구성 요소

(4) 데이터를 함수로 작성해야 하는 이유는 무엇인가요?

구성 요소를 재사용할 때 데이터 간의 참조 관계를 피하세요.

참고: 템플릿을 사용하여 구성 요소 구조를 구성하세요. 

<body>
    <div id="user">
        <!-- 第3步使用组件编写组件标签 -->
        <school></school>
        <br>
        <xuesheng></xuesheng>
    </div>
    <div class="user2">
        <hello></hello>
    </div>
</body>
<script>
    // 第一步：创建组件
    // 创建school组件
    const school = Vue.extend({
        template: `
        <div>
        <h2>学校名称：{{schoolName}}</h2>
        <h2>地址：{{address}}</h2>
        </div>
        `,
        // 组件里不用写el也不能写el，而且组件里必须写函数式
        data() {
            return {
                schoolName: &#39;山鱼屋&#39;,
                address: &#39;Nanbian&#39;
            }
        }
    })
    // 创建student组件
    const student = Vue.extend({
        template: `
        <div>
        <h2>学生名称：{{studentName}}</h2>
        <h2>年龄：{{age}}</h2>
        <button @click = &#39;showName&#39;>点我出名</button>
        </div>
        `,
        // 组件里不用写el也不能写el，而且组件里必须写函数式
        data() {
            return {
                studentName: &#39;山鱼屋&#39;,
                age: 20
            }
        },
        methods: {
            showName() {
                alert(this.studentName)
            }
        },
    })
    // 创建全局组件
    const hello = Vue.extend({
        template: `
        <div>
        <h2>你好呀！{{name}}</h2>
        </div>
        `,
        data() {
            return {
                name: &#39;shanyu&#39;,
            }
        }
    })

    // 注册全局的组件
    Vue.component(&#39;hello&#39;, hello);

    // 创建vm
    new Vue({
        el: &#39;#user&#39;,
        // 第2步.注册组件
        components: {
            // 键值对形式（若键值对同名可简写）
            school,
            xuesheng: student
        }
    })

    new Vue({
        el: &#39;.user2&#39;,
    })
</script>

4. 작성 시 주의사항

1) 컴포넌트 이름에 대해

한 단어로 구성 : 첫 번째 글쓰기 방식(첫 글자는 소문자) : + school, the second way of writing (첫 글자는 소문자) 대문자) School

여러 단어: 첫 번째 쓰기 방법(케밥 케이스 이름 지정): my-school, 두 번째 쓰기 방법(Came1Case 이름 지정): MySchool(Vue 스캐폴딩 필요) support)

참고:

(1) 구성 요소 이름은 HTML의 기존 요소 이름을 최대한 피해야 합니다. 예를 들어 h2 및 H2는 작동하지 않습니다.

(2) 이름 구성 항목을 사용하여 개발자 도구에 표시되는 구성 요소의 이름을 지정할 수 있습니다.

Vue에서 단일 파일이 아닌 구성 요소의 사용에 대해 설명하는 기사

2) 구성 요소 태그 정보

첫 번째 작성 방법: 36294b0081e4be8b0f9233f2d04ce30245b904bf2d760e20eca78bbc1279a7b6

두 번째 작성 방법: b8ca3119a7915a4a685cd5b3046ccc27 : 필요하지 않음 스캐폴딩을 사용할 때 9152e3d1f6d11fd4fd27cec0ff1d51f1로 인해 후속 구성요소가 렌더링되지 않습니다.

3) 약어

const school = Vue.extend(options)는 다음과 같이 약어화할 수 있습니다. const school = {options}

2.2구성 요소 중첩

및 러시아어 중첩 인형 거의 똑같습니다. 큰 것들은 작은 것끼리 합쳐져 있습니다. (사실 VM 아래에 app이라는 컴포넌트가 있어서 모든 컴포넌트를 관리합니다.)

<body>
    <div id="user">

    </div>
    <script>
        // 创建room组件
        const room = {
            template:
                `<div>
        <h2>
        房间号{{num}}
        </h2>
        <h2>
        puwei:{{pnum}}
        </h2>
         </div>`,
            data() {
                return {
                    num: &#39;222&#39;,
                    pnum: &#39;8&#39;
                }
            }
        }
        // 创建students组件
        const students = {
            template:
                `<div>
        <h2>
        姓名：{{name}}
        </h2>
        <h2>
        学号：{{studentnum}}
        </h2>
        <room></room>
         </div>`,
            data() {
                return {
                    name: &#39;山鱼&#39;,
                    studentnum: &#39;9657&#39;
                }
            },
            components: {
                room
            }
        }
        // 创建school组件
        const school = {
            template:
                `<div>
        <h2>
        校名：{{sname}}
        </h2>
        <h2>
        地址：{{address}}
        </h2>
        <students></students>
         </div>`,
            data() {
                return {
                    sname: &#39;山鱼学院&#39;,
                    address: &#39;华山道9088号&#39;
                }
            },
            components: {
                students
            }
        }
        const app = {
            template:
                `
        <school></school>
         </div>`,
            
            components: {
                school
            }
        }
        // 创建app组件
        new Vue({
            template:`<app></app>`,
            el: &#39;#user&#39;,
            components: {
                app,
            }
        })
    </script>
</body>
Vue에서 단일 파일이 아닌 구성 요소의 사용에 대해 설명하는 기사

VueComponent

에 대하여

  • 학교 컴포넌트의 본질 VueComponent라는 생성자인데, 프로그래머가 정의하는 것이 아니라 Vue.extend에 의해 생성됩니다.

  • b8ca3119a7915a4a685cd5b3046ccc27(자체 닫는 태그) 또는 36294b0081e4be8b0f9233f2d04ce30245b904bf2d760e20eca78bbc1279a7b6만 작성하면 Vue가 구문 분석 시 학교 구성 요소의 인스턴스 객체를 생성하는 데 도움이 됩니다. 우리: 새로운 VueComponent(옵션).

  • Vue.extend가 호출될 때마다 새로운 VueComponent가 반환됩니다(쌍둥이가 매우 유사하더라도 어쨌든 같은 사람은 아닙니다)

  • 이것은

을 가리킵니다. (1) .컴포넌트 구성에서 data 함수, methods의 함수, watch의 함수 및 computed의 두 숫자는 모두 [VueComponentinstance 개체]를 갖습니다.

(2) 새로운 Vue(options) 구성에서 data 함수, methods의 함수, watch의 함수, computed의 함수는 모두 [Vue 인스턴스 개체]입니다.

(학습 영상 공유: vuejs 입문 튜토리얼, 기본 프로그래밍 영상)

위 내용은 Vue에서 단일 파일이 아닌 구성 요소의 사용에 대해 설명하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：Vue의 JSX란 무엇인가요? 언제 사용하나요? 그것을 사용하는 방법?다음 기사：Vue의 JSX란 무엇인가요? 언제 사용하나요? 그것을 사용하는 방법?

관련 기사

더보기