[vue] 单文件组件

最新推荐文章于 2024-08-04 12:47:40 发布

533_

最新推荐文章于 2024-08-04 12:47:40 发布

阅读量360

点赞数 1

分类专栏： # vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_14993591/article/details/121185327

版权

vue 专栏收录该内容

168 篇文章 3 订阅

订阅专栏

本文介绍了Vue中单文件组件（Single File Component, SFC）的使用，包括定义、注册和引用过程。通过示例展示了如何创建Student和School组件，并在App.vue中引入和使用。在实际运行时，由于缺少Vue脚手架，代码中的import语句会导致错误。要解决这个问题，需要搭建Vue项目环境，例如使用Vue CLI。

摘要由CSDN通过智能技术生成

非单文件组件 —— 一个文件中包含n个组件（n>1）

单文件组件 —— 一个文件中只包含1个组件

Vue中使用单文件组件的三大步骤

定义

创建一个Vue文件，在这个文件写入html css javascript

<template></template>——写入结构（HTML）

<script></script>——写入业务逻辑（JS）

<style></style>——写入样式（CSS）

Student.vue

<template>
    <div>
      <h2>学生姓名：{{studentName}}</h2>
      <h2>学生年龄：{{age}}</h2>
  </div>
</template>

<script>
export default {
    data(){
        return{
            studentName:"张三",
            age:16
        }
    }
}
</script>

<style>

</style>

School.vue

<template>
  <div>
      <h2>学校名称：{{schoolName}}</h2>
      <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
export default {
    data(){
        return{
            schoolName:"清华",
            address:"北京"
        }
    }
}
</script>

<style>

</style>

App.vue

<template>
  
</template>

<script>
import School from "./School"
import Student from "./Student"

export default {
    name:App,
    components:{
        School,
        Student
    }
}
</script>

<style>

</style>

注册

main.js

import App from "./App"

new Vue({
    el:"#root",
    components:{
        App:App
    }
})

引用

index.html

<body>
	<div id="root">
		<App></App>
	</div>
	<script src="./main.js"></script>
</body>

但是这样子会报错，Cannot use import statement outside a module，这是因为没有使用脚手架，导致在代码中的import出现了问题，不能出现效果

参考：

Vue组件化编程以及初始化脚手架

533_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[vue] 单文件组件

非单文件组件 —— 一个文件中包含n个组件（n>1）单文件组件 —— 一个文件中只包含1个组件Vue中使用单文件组件的三大步骤定义创建一个Vue文件，在这个文件写入html css javascript<template></template>——写入结构（HTML）<script></script>——写入业务逻辑（JS）<style></style>——写入样式（CSS）Student.vue<temp
复制链接

扫一扫

专栏目录