pizza.js/example_08.html at master · Codher/pizza.js · 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<html>
    <head>
        <title>Vue.js Example 08</title>
        <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="styles/site.css">
        <script src="lib/[email protected]"></script>
         <style>
             .cube {
                border: 5px solid #eee;
                border-radius: 4px;
                width: 250px;
                height: 250px;
                margin: 55px auto;
                transition: background-color 0.5s ease;
             }
             button {
                display: inline-block;
                font-size: 14px;
                padding: 10px 15px;
             }
         </style>
    </head>

    <body>
        <div id="app">
            <div class="cube" v-bind:style="{backgroundColor: color}"></div>
            <div class="btn-group" role="group">
                <red-btn v-on:color="makeRed" class="btn btn-default"></red-btn>
                <green-btn v-on:color="makeGreen" class="btn btn-default"></green-btn>
                <orange-btn v-on:color="makeOrange" class="btn btn-default"></orange-btn>
                <white-btn v-on:color="makeWhite" class="btn btn-default"></white-btn>
            </div>

        </div>
        <script>
            /**
                So passing information to our components through "props", that's
                super easy.

                But how we can get information back ?
                How we can communicate between our Parent and the Children

                To do that we use $emit

                Dollar sign ? Emit ? Yea kinda scary

                ¯\_(ツ)_/¯

                This means we are emiting an event to our Parent.

                Our component (eg: red-btn) emits an event called: color

                The parent listens for this event by: "v-on:color".

                We assign a function to handle when that event happens
                    v-on:color="makeRed"

                Can be read:
                    On color event run the makeRed function

            */
            Vue.component('red-btn', {
                template: '<button v-on:click="change">Red</button>',
                methods: {
                    change: function () {
                        this.$emit('color');
                    }
                }
            });

            Vue.component('green-btn', {
                template: '<button v-on:click="change">Green</button>',
                methods: {
                    change: function () {
                        this.$emit('color');
                    }
                }
            });

            Vue.component('white-btn', {
                template: '<button v-on:click="change">White</button>',
                methods: {
                    change: function () {
                        this.$emit('color');
                    }
                }
            });

            Vue.component('orange-btn', {
                template: '<button v-on:click="change">orange</button>',
                methods: {
                    change: function () {
                        this.$emit('color');
                    }
                }
            });

            new Vue({
                el: '#app',
                data: function () {
                    return {
                        color: 'white'
                    }
                },
                methods: {
                    makeRed: function () {
                        this.color = 'red';
                    },
                    makeGreen: function () {
                        this.color = 'green';
                    },
                    makeWhite: function () {
                        this.color = 'white';
                    },
                    makeOrange: function () {
                        this.color = 'orange';
                    }
                }
            });
        </script>
    </body>
</html>
<!--
    Example 08 (1):
        - Refactor this example
        - Make a component that takes a color property
        - When clicked it should change the cube's color
-->
<!--
    [Optional]

    Example 08 (2):
        - Take the list from the previous example
        - Create a summary of total pizza ordered
        - Summary should change when increase and decrease amount of each pizza
-->