VueStudy/1.html at master · EdwardSYT/VueStudy · 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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Edward-vue-1</title>
    <script src="lib/jquery-1.11.3.min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style type="text/css">

    </style>
</head>
<body>

    <div id="app">
      {{ message }}
    </div>

    <div id="app-2">
      <span v-bind:title="message">
        Hover your mouse over me for a few seconds to see my dynamically bound title!
      </span>
    </div>

    <div id="app-3">
      <p v-if="seen">Now you see me</p>
    </div>

    <div id="app-4">
      <ol>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ol>
    </div>

    <div id="app-5">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">Reverse Message</button>
    </div>

    <div id="app-6">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>

    <div id="app-7">
      <ol>
        <!-- Now we provide each todo-item with the todo object    -->
        <!-- it's representing, so that its content can be dynamic -->
        <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:message="message"></todo-item>
      </ol>
    </div>

    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue!'
          }
        })

        var app2 = new Vue({
          el: '#app-2',
          data: {
            message: 'You loaded this page on ' + new Date()
          }
        })

        var app3 = new Vue({
          el: '#app-3',
          data: {
            seen: true
          }
        })

        var app4 = new Vue({
          el: '#app-4',
          data: {
            todos: [
              { text: 'Learn JavaScript' },
              { text: 'Learn Vue' },
              { text: 'Build something awesome' }
            ]
          }
        })

        var app5 = new Vue({
          el: '#app-5',
          data: {
            message: 'Hello Vue.js!'
          },
          methods: {
            reverseMessage: function () {
              this.message = this.message.split('').reverse().join('')
            }
          }
        })

        var app6 = new Vue({
          el: '#app-6',
          data: {
            message: 'Hello Vue!'
          }
        })

        Vue.component('todo-item', {
          props: ['todo','message'],
          template: '<li>{{ todo.text }} {{ message }}</li>'
        })
        var app7 = new Vue({
          el: '#app-7',
          data: {
            groceryList: [
              { text: 'Vegetables' },
              { text: 'Cheese' },
              { text: 'Whatever else humans are supposed to eat' }
            ],
            message:'Edward'
          }
        })
    </script>

</body>