Vue单文件组件

最新推荐文章于 2024-05-20 17:02:17 发布

林代码er

最新推荐文章于 2024-05-20 17:02:17 发布

阅读量68

点赞数 1

分类专栏： linerVue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_71088505/article/details/131825854

版权

linerVue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

跟之前多文件组件，区别就是把template和style和css等中的代码拆开，写到同一个vue文件中，可以更好的实现代码复用。

注意：定义完了vue文件需要拿来用，跟多文件组件不同的是需要将当文件组件暴露出去，这就用到了<script>标签尾部加上export default School默认暴露，可以简写为如下形式。以后用可以写成import xxx from xxx。

本次学习用到这些文件

School.vue

<template>
<!--  组件的结构-->
</template>
    <div>
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
<script>
  //组件交互相关的代码（数据，方法等）
  export default{
    name:'School',
    data(){
      return {
        name:'山河大学',
        address:'山河四省',
      }
    },
    methods:{
      showName(){
        alert(this.name)
      }
    }
  }

</script>

<style>
  /*组件样式的代码*/
</style>

Student.vue

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

<script>
export default {
  name: 'student',
  data() {
    return {
      name: '木木',
      age: 21
    }
  }
}
//定义school组件
</script>

<style>

</style>

必须得有的组件App.vue，其作用汇总所有组件

App.vue

<template>
<!--注意模板里必须有一个根元素div-->
    <div>
      <School></School>
      <Student></Student>
    </div>
</template>

<script>
  //引入组件
  import School from "./School";
  import Student from "./Student";
export default {
  name: "App",
  components:{
    School,
    Student,
  }
}
</script>

<style scoped>

</style>

main.js

import App from "./App";
new Vue({
    el:'#root',
    components:{App}
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root">

    </div>
    <script type="text/javascript" src="js/vue/vue.js"></script>
    <script type="text/javascript" src="./main.js"></script>
</body>
</html>

全部准备完毕开始运行：（报错，原因：.vue文件浏览器不能直接运行；import语句浏览器不认识；）所以index.html中引入的俩<script>没必要了，下篇使用脚手架来解决这个问题。