vue组件

vue组件

下面这段代码，是vue全局组件的注册方式。
通过component(tagName, options)注册组件，tagName是组件名，options是自定义组件对象，该对象包含了数据和模板。

通过tagName引入组件，vue渲染模板以及数据。

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

vue的组件文件

.vue后缀的文件，是vue的组件。
这个文件，template、style、以及动态的数据，全部包含其中。完全是一个模块，所以被称为组件。

在vue的框架中，通过引入组件路径而使用组件。

<template>
 
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>