Vue2.0之 组件

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

<!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之 组件 的全部内容， 来源链接： utcz.com/z/380723.html

回到顶部