第十二章 Net 5.0 快速開發框架 YC.Boilerplate --千萬級資料處理解決方案

阿新 • • 發佈：2021-10-10

元件的定義：實現應用中區域性功能程式碼和資源的集合

　　理解：用來實現區域性功能效果的程式碼集合（html、css、js、image）

　　為什麼：一個介面的功能很複雜

　　作用：複用編碼，簡化專案編碼，提高執行效率

非單檔案元件：一個檔案中包含有n個元件

單檔案元件：一個檔案中只包含一個元件

vue使用元件的三大步驟

　　1）定義元件（建立元件）

　　2）註冊元件

　　3）使用元件（寫元件標籤）

如何定義一個元件？

　　使用vue.extend(options)建立，其中options和new vue(options)時傳入的那個options幾乎一樣，但也有點區別

　　區別如下;

　　　　1) "el" 不要寫，為什麼？？？--------最終所有的元件都要經過vm的管理，由vm中的el決定服務哪個容器。

　　　　2）data必須寫成函式，為什麼? -------避免元件被複用時，資料存在引用關係

　　備註：使用template可以配置元件結構

如何註冊元件

　　1）區域性註冊靠new vue 的時候傳入components 選項

　　2）全域性註冊靠vue.component('元件名'，元件)

編寫元件標籤

例子如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title 
></title>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <xuexiao></xuexiao>
            <hr>
            <xuesheng></xuesheng>
        </div> 

    </body>
    <script type="text/javascript">
        const school = Vue.extend({
            template:`
                <div>
                    <h2>學校名稱：{{schoolName}}</h2>
                    <h2>學校地址：{{address}}</h2>    
                </div>   
            `,
            data(){
                return {
                    schoolName:'gubi',
                    address:'蓮溪'
                }
            }
        })
        const student = Vue.extend({
            template:`
                <div>
                    <h2>學生姓名：{{studentName}}</h2>
                    <h2>學生名稱：{{age}}</h2>    
                </div>   
            `,
            data(){
                return {
                    studentName:'gubi',
                    age:18
                }
            }
        })
        new Vue({
            el:'#root',
            components:{
                xuexiao:school,
                xuesheng:student
            }
        })
    </script>
</html>

View Code

第十二章 Net 5.0 快速開發框架 YC.Boilerplate --千萬級資料處理解決方案

第十二章 Net 5.0 快速開發框架 YC.Boilerplate --千萬級資料處理解決方案線上文件：http://doc.yc-l.com/#/README

第十章 Net 5.0 快速開發框架 YC.Boilerplate --部署跨域問題解決方案

線上文件：http://doc.yc-l.com/#/README線上演示地址：http://yc.yc-l.com/#/login原始碼github：https://github.com/linbin524/yc.boilerplate原始碼gitee：https://gitee.com/linxuanming/yc.boilerplate