Vue19-单文件组件

最新推荐文章于 2024-09-02 15:51:54 发布

MarxistVive

最新推荐文章于 2024-09-02 15:51:54 发布

阅读量105

点赞数

分类专栏： Vue2笔记文章标签： vue.js javascript 前端组件

本文链接：https://blog.csdn.net/A1066223647/article/details/125022861

版权

Vue2笔记专栏收录该内容

41 篇文章 1 订阅

订阅专栏

Vue19-单文件组件

文章目录

Vue19-单文件组件

单文件组件在使用时将每一个组件都单独写成.vue文件，vue文件格式内容如下：

<template>
 <div class="demo">
  <h2>学校名称：{{name}}</h2>
  <h2>学校地址：{{address}}</h2>
  <button @click="showName">点我提示学校名</button> 
 </div>
</template>

<script>
  export default {
  name:'School',
  data(){
   return {
    name:'尚硅谷',
    address:'北京昌平'
   }
  },
  methods: {
   showName(){
    alert(this.name)
   }
  },
 }
</script>

<style>
 .demo{
  background-color: orange;
 }
</style>

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

<script>
  export default {
  name:'Student',
  data(){
   return {
    name:'张三',
    age:18
   }
  }
 }
</script>

再创建一个App.vue将其他的组件都注册到这个组件下：

<template>
  <div>
    <School></School>
    <Student></Student>
  </div>
</template>

<script>
//引入组件
import School from './School.vue'
import Student from './Student.vue'

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

编写main.js文件作为入口文件：

import App from './App.vue'

new Vue({
 el:'#root',
 template:`<App></App>`,
 components:{App},
})

编写index.html，将main和vue引入

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>练习一下单文件组件的语法</title>
 </head>
 <body>
  <!-- 准备一个容器 -->
  <div id="root"></div>
   <script type="text/javascript" src="../js/vue.js"></script>
   <script type="text/javascript" src="./main.js"></script>
 </body>
</html>