<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app-7"> <ol> <!-- 现在我们为每个 todo-item 提供 todo 对象 todo 对象是变量，即其内容可以是动态的。 我们也需要为每个组件提供一个“key”，稍后再 作详细解释。 --> <mycomponent v-bind:model="grocery" v-bind:key="grocery.id"></mycomponent> </ol> </div> <script> Vue.component('mycomponent', { props: ['model'], template: '<li>{{ model.text }}</li>'}) var app7 = new Vue({ el: '#app-7', data: { grocery: { id: 0, text: '蔬菜' } }, beforeCreate:function(){console.log('beforeCreate');}, created:function(){console.log('created');}, beforeMount:function(){console.log('beforeMount');}, mounted:function(){console.log('mounted');}, beforeUpdate:function(){console.log('beforeUpdate');}, updated:function(){console.log('updated');}, beforeDestroy:function(){console.log('beforeDestroy');}, destroyed:function(){console.log('destoryed');} }) app7.$watch('grocery',function(nv,ov){ console.log(nv); console.log(ov); debugger }) console.log(app7.grocery.text) app7.$destroy() </script> </body> </html>