Vue-component

時間 2019-11-13

標籤 vue component 简体版

原文原文鏈接

組件（Component）是 Vue.js 最強大的功能之一。javascript

組件能夠擴展 HTML 元素，封裝可重用的代碼。html

組件系統讓咱們能夠用獨立可複用的小組件來構建大型應用，幾乎任意類型的應用的界面均可以抽象爲一個組件樹。vue

Vue data訪問java

app

<div style="height: 150px;background: #CCC;margin: 5px;">ide

<div style="font-size: 20px;">ui

v2.prop屬性</div>spa

<hr />3d

<div>code

<div>

</div>

v1.局部組件</div>

<hr />

<div>

</div>

v0.全局組件</div>

<hr />

<div>

</div>

/* 全局組件 */

Vue.component(

'comp01', {

}

);

/* 經過 props 把數據傳給子組件 */

Vue.component(

'comp05', {

props: ['msg'],

}

);

new Vue({

el: "#appVue",

data: {

/* 局部組件 */

components: {

'comp03': {

}

)

</script>

<!DOCTYPE html>
<html style="height: 100%;">

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../lib/vue.v2.5.12.js"></script>
        <title>v-xxx</title>
    </head>

    <body style="height: 100%;">
        <style>
            .style0 {
                font-size: 25px;
                color: green;
            }
            
            .style1 {
                background: gold;
            }
        </style>
        <!-- 
            VUE組件
                
            REF:
                http://www.runoob.com/vue2/vue-component.html
                https://cn.vuejs.org/v2/guide/components.html
        -->
        <div id="appVue">
            <!-- prop -->
            <div style="height: 150px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v2.prop屬性</div>
                <hr />
                <div>
                    <div>
                        <comp05 msg="13579"></comp05>
                    </div>
                </div>
            </div>            
            
            <!-- 局部組件 -->
            <div style="height: 150px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v1.局部組件</div>
                <hr />
                <div>
                    <div>
                        <comp03></comp03>
                    </div>
                </div>
            </div>            
            
            <!-- 全局組件 -->
            <div style="height: 150px;background: #CCC;margin: 5px;">
                <div style="font-size: 20px;">
                    v0.全局組件</div>
                <hr />
                <div>
                    <div>
                        <comp01></comp01>
                    </div>
                </div>
            </div>
        </div>
        <script>
            /* 全局組件 */
            Vue.component(
                'comp01', {
                    template: '<h2>自定義組件!</h2>'
                }
            );
            /* 經過 props 把數據傳給子組件 */
            Vue.component(
                'comp05', {
                    props:['msg'],
                    template: '<h4>{{msg}}</h4>'
                }
            );            
            new Vue({
                    el: "#appVue",
                    data: {
                        count: 999
                    },
                    /* 局部組件 */
                    components: {
                        'comp03': {
                            template: '<h3>自定義組件!</h3>'
                        }
                    }
                }

            )
        </script>
    </body>

</html>

View Code

REF:

http://www.runoob.com/vue2/vue-component.html

https://cn.vuejs.org/v2/guide/components.html

相關標籤/搜索

vuecomponent

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。