vue-单文件组件-什么是
定义:
一个文件名字是以.vue结尾,并且里边的内容就是一个组件,这个文件就称作单文件组件
普通组件的缺点:
普通组件内容是 和 其它JS代码逻辑掺杂在一块儿,代码不易维护,其优势不容易发挥!
vue-单文件组件-最加单使用
注意:
A. 目前,单文件组件的使用必须在VueCLI的项目中进行
B. 项目的各个目录都要使用英文的
创建使用单文件组件步骤:
- 把vuecli项目代码除了node_modules和.git以外的其他全部文件复制到03-web目录中
- 修改package.json文件,“less”: “3.9.0”,
- 执行yarn安装全部依赖包
- 创建src/components/01-xxxx.vue组件
- 在src/main.js中引入组件、注册组件
- 在public/index.html中使用组件
示例:
vue-单文件组件-组织结构
单文件组件有3个组成部分:
<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标签是必须的
vue-单文件组件-综合应用
3个组成部分综合使用
- 创建组件 components/02-Table.vue,内容如下
<template>
<div>
<!--结构-->
<table>
<tr>
<td>序号</td>
<td>名称</td>
</tr>
<tr>
<td>{{info.id}}</td>
<td @click="tip">{{info.name}}</td>
</tr>
</table>
</div>
</template>
<script>
// 行为
export default {
data(){
return {
info:{id:101,name:'奔驰'}
}
},
methods:{
tip(){
alert('123')
}
},
created(){
console.log('table表格的组件在运行')
}
}
</script>
<style>
/* 样式 */
td{color:blue;}
</style>
-
在main.js中引入并注册组件
import Table from './components/02-Table.vue' components:{ 'com-table':Table }
-
在public/index.html中应用组件
<com-table></com-table
小结:
- 单文件组件 ,文件名字是.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-单文件组件-私有方式注册
组件注册有两个那种情况:
-
私有注册
import xx from 组件文件 import xx from 组件文件 new Vue({ components:{ 名称: 组件模块xx, 名称: 组件模块xx, } })
-
全局注册
import xx from 组件文件 import xx from 组件文件 Vue.component(名称, 组件模块xx) Vue.component(名称, 组件模块xx) Vue.component(名称, 组件模块xx)
})
-
全局注册
import xx from 组件文件 import xx from 组件文件 Vue.component(名称, 组件模块xx) Vue.component(名称, 组件模块xx) Vue.component(名称, 组件模块xx)