欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue学习笔记(组件)

程序员文章站 2022-07-06 16:08:04
在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例,注册组件Vue.component('todo-item',{template:'
  • 这是自定义组件
  • '})使用的话
    上面这种方式每次文本都是一样的,我们可以定义一个参数Vue.component('todo-item', { // todo-item 组件现在接...

    在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例,注册组件

    Vue.component('todo-item',{
    	template:'<li>这是自定义组件</li>'
    })
    

    使用的话

    <ol>
    	<todo-item></todo-item>
    </ol>
    

    上面这种方式每次文本都是一样的,我们可以定义一个参数

    Vue.component('todo-item', {
      // todo-item 组件现在接受一个
      // "prop",类似于一个自定义 attribute。
      // 这个 prop 名为 todo。
      props: ['todo'],
      template: '<li>{{ todo.text }}</li>'
    })
    
    <div id="app-7">
      <ol>
        <todo-item
          v-for="item in groceryList"
          v-bind:todo="item"
          v-bind:key="item.id"
        ></todo-item>
      </ol>
    </div>
    
    var app7 = new Vue({
      el: '#app-7',
      data: {
        groceryList: [
          { id: 0, text: '蔬菜' },
          { id: 1, text: '奶酪' },
          { id: 2, text: '随便其它什么人吃的东西' }
        ]
      }
    })
    

    除了数据 property,Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $,以便与用户定义的 property 区分开来。例如:

    var data = { a: 1 }
    var vm = new Vue({
      el: '#example',
      data: data
    })
    
    vm.$data === data // => true
    vm.$el === document.getElementById('example') // => true
    
    // $watch 是一个实例方法
    vm.$watch('a', function (newValue, oldValue) {
      // 这个回调将在 `vm.a` 改变后调用
    })
    

    vue的生命周期,这个是初学者必须了解的,后续的博客会继续补充。

    本文地址:https://blog.csdn.net/huangbaokang/article/details/107456714