单文件组件vue

1、vue-什么是单文件组件

定义：

一个文件名字是以.vue结尾，并且里边的内容就是一个组件，这个文件就称作单文件组件

普通组件的缺点：

普通组件内容是 和 其它JS代码逻辑掺杂在一块儿，代码不易维护，其优势不容易发挥！

2、vue-组织结构

<template>
	<div>xxxx</div>
</template>

<script>
export default {
  成员
  data:xx
  methods:xx
  filters:
  components:
  created
  ....
}
</script>

<style></style>

一个组件就是一个Vue实例的体现，

? template：div容器部分

? script:Vue实例部分

? style:给div容器(template)设置样式的

注意：

? template内部需要有唯一根节点

? script内部主要是通过es6模块化导出一个对象，内部成员完全参考Vue实例即可

? 如果 script和style不需要，可以不设置，template标签是必须的

3、

单文件组件 ，文件名字是.vue结尾的，里边有3个组成部分

• template标签：用于设定组件要显示的内容，内部必须有一个根节点(例如div)，可以理解为View部分
• script标签：通过ES6模块化(export default)方式导出一个对象，这个对象本质就是 [new Vue(对象参数)] Vue实例的对象参数部分，故内部所有的成员与Vue实例基本一致(也会拥有data、methods、components、filters、created等成员)
• style标签：设定样式，作用给template内部的各个html标签

组件设置引入(import xx from xx)和注册(组件内部直接注册)

单文件组件vue

原文：https://www.cnblogs.com/user-yi/p/15177056.html