Vue組件

時間  2019-12-14
標籤 vue 組件 简体版
原文   原文鏈接

gitHub地址:https://github.com/manlili/vue_learn裏面lesson12

 

一建立組建的步驟

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue組件</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <zujian></zujian>
        </div>
        <script type="text/javascript">
            var myComponent = Vue.extend({   //第一步:定義
                template: '<div>我是內容</div>'
            })
            
            Vue.component('zujian',myComponent)  //第二步:註冊到Vue上面
            
            var myVue = new Vue({    //第三步:建立實例化
                el: '.test'
            })
        </script>
    </body>
</html>

或者用一種簡單的方法建立組件javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue組件</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <template id="lili-template"> <!--注意此處必須是id,用class不行-->
            <div>我是內容2</div>
        </template>
        <div class="test">
            <zujian></zujian>
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: '.test',
                components: {
                    zujian: {
                        template: '#lili-template'
                    }
                }
            })
        </script>
    </body>
</html>

 

二 父子組件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue組件--父子組件</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test"> <!--局部註冊-->
            <zujian></zujian>
        </div>
        <script type="text/javascript">
            var childComponent = Vue.extend({   //第一步:定義
                template: '<div class="mychild">我是孩子</div>'
            });
            var parentComponent = Vue.extend({
                template: '<div class="myParent">我是父容器<child></child></div>',  //注意此處要引用孩子組件
                components: {
                    'child': childComponent
                }
            });
            Vue.component('zujian',parentComponent);  //第二步:註冊到Vue上面
            
            var myVue = new Vue({    //第三步:建立實例化
                el: '.test'
            })
        </script>
    </body>
</html>

或者另外一種比較明瞭的寫法:html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue組件--父子組件另外一種寫法</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <zujian></zujian>
        </div>
        <template id="parentComponent">
            <div class="myParent">
                我是父容器
                <child></child>
            </div>
        </template>
        
        <template id="childComponent">
            <div class="mychild">
                我是孩子
            </div>
        </template>
        
        <script type="text/javascript">
            
            var myVue = new Vue({ 
                el: '.test',
                components: {
                    zujian: {
                        template:'#parentComponent',
                        components: {
                            child: {
                                template:'#childComponent'
                            }
                        }
                    }
                }
            })
        </script>
    </body>
</html>

 

三 Vue組件選項

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue組件--組件選項</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="lala">
                <zujian></zujian>
            </div>
        </div>
        <script type="text/javascript">
            var myComponent = Vue.extend({   
                template: '<div>我是{{a}}{{b}}</div>',
                data : function () {   //不想讓MyComponent 全部的實例將共享同一個 data 對象,因此將data寫成函數形式返回
                    return {
                        a: 1,
                        b: 2
                    }
                },
                el: function () {   //不想讓MyComponent 全部的實例將共享同一個 el 對象,因此將el寫成函數形式返回
                    return ".lala"
                }
            })                    
            var myVue = new Vue({
                el: '.test',
                components: {
                    zujian:myComponent
                }
            })
        </script>
    </body>
</html>

 

四 Vue組件做用域(父子通訊)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue組件--組件做用域</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <!-- 子組件模板 -->
        <template id="child-template">
          {{msg1}}
        </template>
        
        <!-- 父組件模板 -->
        <div id="events-example">
          <p>Messages: {{ messages | json }}</p>
          <child :msg1="mssss">
              
          </child>
        </div>
        
        <script type="text/javascript">

            var parent = new Vue({
              el: '#events-example',
              data: {
                messages: '我是父框架222',
                mssss: 'ddddddd'
              },
              components: {
                  child: {
                      template: '#child-template',
                      props: {msg1: String }
                    }
              }
            })
        </script>
    </body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程