vue2 基础学习02 (Vue组件)

vue学习路径和建议—-尤雨溪

vue官网

1.Vue组件

参考官方文档:组件基础

  1. 定义一个组件

    // 定义一个名为 button-counter 的新组件
    Vue.component('button-counter', {
      data: function () {
        return {
          count: 0
        }
      },
      template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })

    上面的button-counter就是一个组件,可以说是一个自定义的标签,我先这样理解,后面再看。

    以下注意!!!

    • 一个组件的 data 选项必须是一个函数

      data: function () {
        return {
          count: 0
        }
      }
    • template下面只能有一个根节点

      如果再创建一个同级的节点就会出错,如下:

      《vue2 基础学习02 (Vue组件)》

  2. 在html中引用这个组件

    <div id="components-demo">
      <button-counter></button-counter>
    </div>
  3. 实例化Vue (指向组件所在的”坑位”)

    new Vue({ el: '#components-demo' })
  4. 可以复用

    <div id="components-demo">
      <button-counter></button-counter>
      <button-counter></button-counter>
      <button-counter></button-counter>
    </div>
    原文作者:邢走在云端
    原文地址: https://segmentfault.com/a/1190000018407420
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞