前端之Vue组件(单文件组件)

一只爱吃萝卜的小兔子

已于 2022-05-03 14:34:35 修改

阅读量398

点赞数 1

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

于 2022-05-03 14:34:12 首次发布

本文链接：https://blog.csdn.net/weixin_46372074/article/details/124545397

版权

vue 专栏收录该内容

51 篇文章 3 订阅

订阅专栏

Vue组件之单文件组件

单文件组件
组件化文件的层次划分

单文件组件

后缀: xxx.vue
命名: 第二种写法是大驼峰命名法, 与 Vue devtools 呈现相同
内容和结构(比非单文件组件好在, 样式也在其中)
组件app.vue的作用(一人之下万人之上)汇总所有的组件.
main.js(入口), 是vm, 只管理App.vue. 并且指定容器
index.html 是容器

组件化文件的层次划分

在这里插入图片描述
index.html

<body>
  <!-- 容器 -->
  <div id="root"></div>
  <!-- 引入vue -->
  <script src="../../vuejs/vue.min.js"></script>
  <script src="./main.js"></script>
</body>

main.js

import { App } from './App.vue';

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

App.vue

<template>
  <div>
    <!-- 3.使用 -->
    <School></School>
    <Student></Student>
  </div>
</template>

<script>
// 1.引入
import School from "./School.vue";
import Student from "./Student.vue";

export default {
  name: "App",
  // 2.注册
  components: {
    School,
    Student,
  },
};
</script>

School.vue

<template>
  <div>
    <h2>学校名称: {{ name }}</h2>
    <h2>学校地址: {{ address }}</h2>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return { name: "崇雅实验学校", address: "淡水三河开发区" };
  },
};
</script>

Student.vue

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

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