組件介紹

時間 2019-11-30

標籤組件介紹简体版

原文原文鏈接

vue組件javascript

1. 是頁面組成的一部分html

2. 是封裝好的可重用的代碼vue

組件註冊java

全局註冊 1vue-router

大體能夠分紅三步app

1.在咱們引入vue.js以後,Vue會被註冊爲一個全局對象,咱們使用對象自己的方法進行組件的建立函數

使用Vue這個全局對象的component方法進行全局註冊一個組件spa

2.建立根實例,進行視圖的綁定code

3.組件的顯示：將組價的名稱做爲標籤寫在視圖內部,就可以完成組件的顯示component

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <!--3. 定義的組件名做爲標籤存在,將組件顯示在頁面上-->
            <my-component></my-component>

        </div>
    </body>

</html>
<script>

    //1. 使用vue這個全局隊形內置的components方法進行組件的建立
    //在components這個方法中有兩個重要的參數,第一個參數是組件的名稱,第二個參數是組件的內容
    Vue.component('my-component', {
        //在這裏使用一個父標籤將組件包裹起來
        template: '<div><a href="#">註冊</a><a href="#">登陸</a></div>'
    })

    //2. 建立根實例,也就是實例化一個vue對象,進行視圖的綁定
    var vm = new Vue({
        el: '#app'
    })
</script>

全局註冊2

使用全局的Vue.extend()構造器進行註冊

Vue.extend()相似於繼承,經過這個構造器擴展(繼承)以後,至關於Vue對象自己添加了一些這個對象原先沒有的東西

局部註冊1

大體能夠分紅兩個部分

1.穿件跟實例

2.在跟實例內部定義組件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <!--3. 這是我定義的組件    佔位標籤-->
            <my-component></my-component>

        </div>
    </body>

</html>
<script>
    //1. 建立根實例
    var vm = new Vue({
        el: '#app',
        //2. 在根實例內部建立組件
        components:{
           'my-component':{
               template: '<div><a href="#">註冊</a><a href="#">登陸</a></div>'
           }
        }
    })
</script>

　　組件內部的data

組件內部的data屬性必須是一個函數

父子組件

一個組件的內部包含另一個組件，內部的組件稱爲子組件，外部的組件稱爲父組件，這就是父子組件

父子組件通訊-----解決父子組件之間傳值問題

在上下級組件之間進行數據的傳遞,也就是父子組件通訊

父組件須要將數據傳遞給子組件自組件須要將其內部發生的事情通告給父組件

Props 與 camelCase

數據傳輸分三步:

1. 進行數據的傳輸,首先要有數據,也就是要在父組件上定義數據

2. 使用props創建數據通訊的渠道

3. 在子組件中接收父組件經過props傳遞過來的數據

動態props

在模板中，要動態地綁定父組件的數據到子模板的props，與綁定到任何普通的HTML特性相相似，就是用 v-bind

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>

    <body>
        <div id="app">
            <parent></parent>
        </div>
        <template id="parent">
            <div>
                <div>我是父組件</div>
                <child :message="message"></child>
            </div>
        </template>
        <template id="child">
            <div>
                <div>我是子組件</div>
                <span>{{message}}</span>
            </div>
        </template>
    </body>
</html>
<script>
    var vm = new Vue({
        el: '#app',
        //我是父組件
        components:{'parent':{
            template:"#parent",
            data:function(){
                return {
                    message:"hello world"
                }
            },
            //我是子組件
            components:{'child':{
                props:['message'],
                template:"#child"
            }}
        }}
    })
</script>

1. JIRA組件介紹
2. openstack組件介紹
3. Spark組件介紹
4. Aspose.word組件介紹
5. OpenStack組件介紹
6. Mybatis組件介紹
7. selenium組件介紹
8. kubernetes組件介紹
9. Kubernetes 組件介紹
10. Flutter組件介紹
更多相關文章...
• 網站主機介紹 - 網站主機教程
• ASP AdRotator 組件 - ASP 教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• 互聯網組織的未來：剖析GitHub員工的任性之源

相關標籤/搜索

每日一句

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