引入:@1官方脚手架 @2挂载vm对象 @3组件引入并渲染到vm中
单文件组件也有全局组件和局部组件只是把一个组件单独写在一个.vue文件中,供别的组件引入然后注册
引入文件时:一般使用相对路径 上一下用../ 同级使用./ 下级使用/ @ 代表src文件夹
举例:
APP.vue文件
<template>
<div>
<Box1></Box1>
<Nav1></Nav1>
</div>
</template>
<script>
import Box1 from "./Box1.vue"
import Box1 from "@/Box1.vue"
// @代表src目录的意思
// 注册名不能跟Vue原生Dom重名,
// 注册名字是驼峰,使用时要用连字符
import Nav1 from "./Nav1.vue"
// 注册的组件使用时可以用双标签也可以用单标签;如果有插槽时就必须用双标签
export default {
components: {
Box1:Box1,
Nav1
}
}
// 如果,Vue的script注释了,在打包的时候vue的打包环境 会帮我们把这个文件解析成为一个对象 然后添加一个
// template属性 值为解析的<template>页面模板
// 也就是说 .vue文件中 可以不要<style>和<script>但是不能不写<template>
// style可以写多个
// 每个组件内只能有一个根元素 不要在根元素上写 v-for
</script>
<style>
</style>
Box.vue文件
<template>
<div>
<button @click="change">点击</button>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
data:function(){
return{
msg:"66666"
}
},
methods:{
change(){
this.msg="hello"
}
}
}
</script>
<style>
</style>