vue组件基础与命名规范

组件化开发思想

MDN 上关于组件化开发 web components 的解释

Vue 实现了部分 Web Components 的规范。

Vue 官网对于组件的解释

组件示例

可以使用如下所示代码创建一个组件：

/*
  使用 Vue 对象的 component 方法创建一个组件
  第一个参数为组件名称，在 HTML 结构中可以使用该名称创建标签。
  第二个参数为组件的配置选项，为对象的形式
 */
Vue.component('button_count', {
   
  // 一个组件的 data 选项必须是一个函数，这点在 Vue 官网已经解释
  data: function () {
   
    return {
   
      count: 0
    }
  },
  // 使用 template 来设置 button_count 标签中显示的内容
  // 该标签绑定了一个点击事件，点击事件中触发 fn 函数
  template: '<button @click="fn">点击了 {
   {count}} 次</button>',
  // 组件写法中依然支持 vue 对象中的所有写法，除了特有的 el 属性。
  methods: {
   
    fn: function () {
   
      // 当按钮点击时，count ++
      this.count++
    }
  }
})

写在 HTML 中：