vue元件component的使用
阿新 • • 發佈：2020-07-24
元件（Component）是 Vue.js 最強大的功能之一。
元件可以擴充套件 HTML 元素，封裝可重用的程式碼。
元件系統讓我們可以用獨立可複用的小元件來構建大型應用，幾乎任意型別的應用的介面都可以抽象為一個元件樹：
案例：
使用到的vue名詞：v-for,component,template,props，v-bind
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>component</titlecomponent元件測試> </head> <body> <!--view層 模板--> <div id="app"> <!-- 元件：傳遞給元件中的值：props--> {{message}} <abc v-for="item in foods" v-bind:arrt="item"></abc> </div> <!--匯入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script> // 定義一個vue元件component Vue.component("abc",{ props: ['arrt'], template: '<li>{{arrt}}</li>' }); var app=new Vue({ el: "#app", data: { message: "元件測試：", foods: ["西紅柿","西蘭花","生菜"] }, }) </script> </body> </html>