欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

vue第二天笔记01——组件的两种定义方式

程序员文章站 2022-03-29 18:43:12
...

一、第一种定义 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 书写占位符,占着这个位置，以后会被组件替换。
                  占位符的名字不能和标签名字一样-->
        <v-header></v-header>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //组件类似于一个小的页面，里面包括html，css，js
        /*定义主件:
           var 组件名={
               template : '页面结构',
               data(){
                   return{
                       变量名 : 变量值 
                   }
               },
               methods : {
                   方法名:function(){
                       具体方法
                   }
               }
           }

        */
        var header = {
            // template:书写页面结构，里面只能存在一个根标签
            template : '<div><p v-on:click="change()">文字{{msg}}</p><h5>标题</h5></div>',
            data(){
                return{
                    msg : 0
                }
            },
            methods : {
                change:function(){
                    this.msg++;
                }
            }
            //template : '<p>文字</p><h5>标题</h5>'//报错,只能存在一个根标签
        }
        new Vue({
            el : '#app',
            /* 挂载组件 : {
                '占位符' : 组件名
                }
                */
            components : {
                'v-header' : header
            }
        })
    </script>
</body>
</html>

二、第二种定义 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 占位符 -->
        <v-header></v-header>
    </div>
    <!-- template(模板:书写页面结构)必须独立写,不能写在app内部 -->
    <template id="header">
        <!-- 同样只能存在一个根标签 -->
        <div>
            <p v-on:click="change()">文字{{msg}}</p>
            <h5>标题</h5>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        /* 定义组件:
            var 组件名 = {
                template : '模板的id',
                data(){
                    return{
                        变量名 : 变量值
                    }
                },
                methods : {
                    方法名 : function(){
                        具体方法
                    }
                }
            }
        */
        var header = {
            template : '#header',
            data(){
                return{
                    msg : 0
                }
            },
            methods : {
                change : function(){
                    this.msg++;
                }
            }
        }
        new Vue({
            el : '#app',
            /* 挂载组件 : {
                '占位符' : 组件名
                }
            */
            components : {
                'v-header' : header
            }
        })
    </script>
</body>
</html>

组件的定义：

    1.书写占位符

    2.定义组件的页面结构、数据和方法等

    3.挂载组件

上一篇： 如何在Android中显示特定时间的Toast

下一篇： 张良为什么要设计刺杀秦始皇？张良和秦始皇之间有什么矛盾？

推荐阅读