24-Vue组件化编程-单文件组件

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

 

组件名的注意事项

一个单词组成：

1）第一种写法（首字母小写）：school

2）第二种写法（首字母大写）：School，推荐

多个单词组成：

1）第一种写法（kebab-case命名）：my-school

2）第二种写法（CamelCase命名）：MySchool，推荐

 

创建一个school.vue文件，通常含有以下三种标签：

1）<template></template>：组件的结构

2）<script></script>：组件交互相关的代码（数据、方法）

3）<style></style>：组件的样式

 

这里需要注意，既然写成单文件组件，也就代表后面通常会使用import的方式导入组件，因此school.vue文件也需要通过export 进行暴露

暴露的三种方式，分别为分别暴露、统一暴露和默认暴露

第一种：分别暴露（写在<sctipt></script>中）

在导入时，使用 import {???} from ??? 的方式

export const school = Vue.extend({
    data(){
        return {
            schoolName:'尚硅谷',
            address:'北京',
        }
    },
    methods:{},
})

第二种：统一暴露（写在<sctipt></script>中）

在导入时，使用 import {???} from ??? 的方式

const school = Vue.extend({
    data(){
        return {
            schoolName:'尚硅谷',
            address:'北京',
        }
    },
    methods:{},
})
export {school}

第三种：默认暴露（推荐）

在导入时，使用 import ??? from ??? 的方式

const school = Vue.extend({
    data(){
        return {
            schoolName:'尚硅谷',
            address:'北京',
        }
    },
    methods:{},
})
export default school

一般使用默认暴露，因为使用默认暴露在导入时，直接使用 import ??? from ??? 就可以了。但是使用分别暴露和统一暴露都需要这样写 import {???} from ??? 。

使用默认暴露时，可以不用中转变量，方式如下：

export default Vue.extend({
    data(){
        return {
            schoolName:'尚硅谷',
            address:'北京',
        }
    },
    methods:{},
})

// 进一步简写，省去Vue.extend()
export default {
    data(){
        return {
            schoolName:'尚硅谷',
            address:'北京',
        }
    },
    methods:{},
}

 

单文件组件的小案例，首先创建以下文件

School.vue

<template>
  <!--组件的结构-->
  <div class="demo">
    <h2>学校名称：{{schoolName}}</h2>
    <h2>学校地址：{{address}}</h2>
    <button @click="showName">点击提示学校信息</button>
  </div>
</template>

<script>
  // 组件交互相关的代码（数据、方法）
  export default {
    name:"School",

    data(){
      return{
        schoolName:"东华理工大学",
        address:"江西南昌"
      }
    },
    methods:{
      showName(){
        alert(this.schoolName)
      }
    }
  }

</script>

<style>
   // 组件的样式
   .demo{
     background-color: orange;
   }
</style>

Student.vue

<template>
  <!--组件的结构-->
  <div>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生年龄：{{age}}</h2>
  </div>
</template>

<script>
  // 组件交互相关的代码（数据、方法）
  export default {
    name:"Student",

    data(){
      return{
        name:"马铃薯",
        age:26
      }
    }
  }
</script>

<style>
   // 组件的样式
   .demo{
     background-color: orange;
   }
</style>

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:School,
      Student:Student
    }
  }
</script>

<style>

</style>

main.js

import App from "./App.vue"

new Vue({
    el:"#root",

    template:"<App></App>",

    components:{App}
})

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>练习单文件组件的语法</title>
    </head>
    <body>
        <div id="root">

        </div>

        <!--Vue先就位-->
        <script type="text/javascript" src="../js/vue.js"></script>
        <!--main.js再就位-->
        <script type="text/javascript" src="./main.js"></script>
    </body>
</html>

 

posted @ 2023-10-16 22:53  马铃薯1  阅读(30)  评论(0)    收藏  举报