单文件组件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

上一篇:Mac OS X下绑定80端口


下一篇:安装PHPStudy2014,打开端口出现80端口 PID4 进程:System-windows服务器应用