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>
