vue/5.html at master · JavaScriptExample/vue · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="demo">
    {{message}}
    <parent-component></parent-component>
    <ul>
        <li v-for="(item,index,key) in  list">
             {{item}}
        </li>
    </ul>
</div>
<script >
    //创建一个子组件
    var Child=Vue.component("child-component",{
       //_isComponent:true,
        template:"<div>我是子组件 {{message}}</div>",
        props: ['message'],
    });
    //创建一个父组件
    Vue.component("parent-component",{
         _isComponent:true,
        beforeCreate(){

        },
        created(){

        },
        beforeMount(){

        },
        beforeUpdate(){

        },
        updated(){ //挂载元素，获取到DOM节点
        },
        beforeDestroy(){

        },
        destroyed(){

        },
        mounted:function () {
           setTimeout(()=>{
                this.message.push(1);
           },1000)
        },
        template:"<div>{{message}}<child-component  :message='message'></child-component></div>", //注意元素模板只能有一个最上层元素，也就是用一个div包裹整个模板。
        components:{"child-component":Child},//进行子组件关联，注意child-component需要引号。
        data:function(){//组件中的data是一个函数
            return {
                message:[]
            }
        }
    })
    //创建一个vue的实例
    new Vue({
        el:"#demo",
        data: {
            list:[1,2,3,4,5,6,7,8],
            message: 'Hello Vue!'
        },
        beforeCreate(){

        },
        created(){

        },
        beforeMount(){

        },
        mounted: ()=> { //挂载元素，获取到DOM节点

        },
        beforeUpdate(){

        },
        updated(){ //挂载元素，获取到DOM节点
        },
        beforeDestroy(){

        },
        destroyed(){

        },
    })
</script>

</body>
</html>