码迷,mamicode.com
首页 > 其他好文 > 详细

Vue2.0之 组件

时间:2020-09-18 01:19:23      阅读:33      评论:0      收藏:0      [点我收藏+]

标签:before   ted   func   动态   create   对象   教程   har   http   

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

 

Vue2.0之 组件

标签:before   ted   func   动态   create   对象   教程   har   http   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!