초보자를 위한 VUE3 시작하기: Vue.js 구성 요소를 사용하여 동적 테이블 만들기-View.js-php.cn

초보자를 위한 VUE3 시작하기: Vue.js 구성 요소를 사용하여 동적 테이블 만들기

PHPz

풀어 주다： 2023-06-15 16:38:13

원래의

2076명이 탐색했습니다.

Vue.js는 핵심 라이브러리가 뷰 레이어에 초점을 맞춘 프런트 엔드 JavaScript 프레임워크입니다. 동시에 다른 라이브러리나 기존 프로젝트와 혼합할 수 있는 사용자 인터페이스를 구축하기 위한 진보적인 프레임워크이기도 합니다. Vue.js는 애플리케이션의 런타임 상태를 상태의 시각적 표현과 분리하여 개발자가 UI를 보다 쉽게 관리하고 업데이트할 수 있도록 돕습니다.

이 기사에서는 동적 테이블 생성 시 Vue.js 구성 요소와 해당 응용 프로그램을 소개합니다.

Vue.js 구성 요소는 애플리케이션에서 단일 기능, 요소 또는 영역을 표현하는 데 사용할 수 있는 재사용 가능하고 독립적인 코드 블록입니다. Vue.js에서 구성 요소의 개념은 각 인스턴스가 구성 요소인 Vue 인스턴스로 구현됩니다. 구성 요소를 자체 옵션과 수명 주기 방법이 포함된 맞춤 요소로 생각하세요.

Vue.js 구성 요소를 생성하려면 두 개의 매개 변수를 받는 Vue.comComponent() 메서드를 사용할 수 있습니다. 첫 번째 매개변수는 구성 요소의 이름이고 두 번째 매개 변수는 요소의 HTML 템플릿, 계산된 속성, 메서드 및 기타 옵션을 포함하는 구성 요소 개체입니다.

아래 예에서는 동적 테이블을 렌더링하는 "dynamic-table"이라는 Vue.js 구성 요소를 만듭니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <dynamic-table></dynamic-table>
    </div>

    <script>
        Vue.component('dynamic-table', {
            data: function() {
                return {
                    tableData: [
                        { id: 1, name: '张三', age: 20 },
                        { id: 2, name: '李四', age: 25 },
                        { id: 3, name: '王五', age: 30 },
                        { id: 4, name: '赵六', age: 35 }
                    ],
                    headings: ['编号', '姓名', '年龄']
                }
            },
            template: `
                <table>
                    <thead>
                        <tr>
                            <th v-for="heading in headings">{{ heading }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="data in tableData">
                            <td>{{ data.id }}</td>
                            <td>{{ data.name }}</td>
                            <td>{{ data.age }}</td>
                        </tr>
                    </tbody>
                </table>
            `
        })

        var app = new Vue({
            el: '#app'
        })
    </script>
</body>
</html>

로그인 후 복사

예에서는 Vue.comComponent() 메서드를 사용하여 구성 요소 " 동적 테이블". 구성 요소의 데이터 속성에서 동적 테이블의 데이터(tableData)와 헤더(headings)를 정의합니다. Vue의 템플릿 구문을 사용하여 템플릿 속성에서 테이블의 HTML 템플릿을 정의하고 v-for 지시어를 사용하여 동적 테이블 행과 열을 생성합니다.

컴포넌트가 렌더링되면 Vue 인스턴스에 Vue.comComponent() 메서드로 등록된 컴포넌트를 페이지에서 사용할 수 있도록 사용합니다. 페이지에서 "동적 테이블" 구성요소를 사용하려면 동적 테이블의 사용자 정의 요소인 <dynamic-table></dynamic-table>만 사용해야 합니다.

위의 예를 통해 Vue.js 구성 요소를 사용하여 기본 동적 테이블을 만드는 방법을 배웠습니다. 실제 프로젝트에서는 더 많은 계산된 속성, 메서드, 이벤트를 정의하여 더 복잡한 테이블 함수를 구현할 수 있습니다. Vue.js의 도움으로 동적 테이블 생성이 더 쉽고 편리해졌습니다.

위 내용은 초보자를 위한 VUE3 시작하기: Vue.js 구성 요소를 사용하여 동적 테이블 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!