<!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>
