Vue：单文件组件（xxxx.vue）
0.重新声明组件事局部标签结构和资源的集合（合在一起的）
1.单文件组件都是.vue结尾的文件
建立一个vue文件
xxx.vue结构
<!--只认识三个标签-->
<template>
<!--组件结构-->
</template>
<script>
/*组件交互代码js*/
// export default 是默认暴露方式（三种方式比较好用的）
export default /*Vue.extend直接被省略了*/{
//暴露之后别人使用name import引入
name: "test"
//接下来写上组件的data，methods等
}
</script>
<style scoped>
/*组件样式*/
</style>
2.改进一个组件
原来
//建立一个学校组件
const school=Vue.extend({
//页面模板
template:`
<div>
<h1>{{schoolname}}</h1>
<h2>{{adress}}</h2>
<Student></Student>
</div>
`,
//每个组件能带自己的属性：记住一定写成函数防止引用
data(){
return {
schoolname:"六中",
adress:"福建"
}
},
//注册学生组件
components:{
Student:student
}
})
如果有样式还需要样式导入css文件或者内联（不符合局部结构资源的集合）
使用单文件组件
<!--只认识三个标签-->
<template>
<!--组件结构-->
<div>
<h1>{{schoolname}}</h1>
<h2>{{adress}}</h2>
<Student></Student>
</div>
</template>
<script>
/*组件交互代码js*/
export default {
name: "School",
data(){
return {
schoolname:"六中",
adress:"福建"
}
},
components:{
}
}
</script>
<style scoped>
</style>
单文件的组件引入
<!--只认识三个标签-->
<template>
<!--组件结构-->
<div>
<h1>{{schoolname}}</h1>
<h2>{{adress}}</h2>
<Student></Student>
</div>
</template>
<script>
/*组件引入*/
import Student from './student'
/*组件交互代码js*/
export default {
name: "test",
data(){
return {
schoolname:"六中",
adress:"福建"
}
},
components:{
Student
}
}
</script>
<style scoped>
</style>
单文件：App组件
<template>
<div>
<school></school><hr>
<school></school><hr>
<school></school><hr>
</div>
</template>
<script>
import School from './test'
export default {
name: "App",
components:{
School
}
}
</script>
<style scoped>
</style>
在js文件使用APP组件
import App from '../App'
new Vue({
el:'#firstVue',
template:`<App></App>`,
components:{
App
}
})
在页面上使用APP组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="firstVue">
</div>
<!--引入放下面不然找不到id-->
<script src="js/my.js"></script>
</body>
</html>
