zoukankan html css js c++ java

Vue2.0之组件

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

查看全文

相关阅读:
MapReduce-shuffle过程详解
 YARN中的失败分析
 HBase协处理器的使用(添加Solr二级索引)
Flume具体应用(多案例)
Flume架构及运行机制
 python Cmd实例之网络爬虫应用
 mongodb3 权限认证问题总结
 webpack配置
 apt软件包管理
 python笔记之编程风格大比拼

原文地址：https://www.cnblogs.com/luhe/p/13667877.html

Vue2.0之 组件

Vue2.0之组件