02.vue-组件化使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title>组件化使用</title>
 8   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9 </head>
10 <body>
11   <div id='app'>{{message}}
12       <ol>
13         <todo-item v-for='(grocery,index) in groceryList' :key='index' :grocery='grocery'></todo-item>
14       </ol>
15   </div>
16   <script>
17     // 注册一个todo-item组件
18     Vue.component('todo-item',{
19       props:['grocery'],
20       template:`<li>{{grocery.text}}</li>`
21     })
22     let data = {
23       message: '你还好吗?'
24     }
25     let app = new Vue({
26       el: '#app',
27       data: {
28         ...data,
29         groceryList: [
30           { id: 0, text: '蔬菜' },
31           { id: 1, text: '奶酪' },
32           { id: 2, text: '随便其它什么人吃的东西' }
33         ]
34       }
35     })
36     console.log(app.message === data.message)       //true
37     console.log(app.$data.message === data.message)   //true
38     console.log(app.$el === document.getElementById('app'))   //true
39     setTimeout(() => {
40       app.message = '好久不见?'
41       app.test = '所以，没关系'                               
42       console.log(app.message === data.message)       //false
43     },2000)
44     app.$watch('message', function (newValue, oldValue) {
45       // 这个回调将在 `app.message` 改变后调用
46       console.log('change')
47     })
48     /*
49       总结：
50       ①定义组件
51         Vue.component('component-name',{
52           props:['data'],           //要接收的属性
53           template:`<div><span :data='data'></span>{{data}}</div>`  
54         })
55       ②组件实例如果要修改属性，并且重新渲染页面，这个属性必须提前在data里定义
56       ③Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来
57     */
58   </script>
59 </body>
60 </html>
猜你喜欢
