Vue单文件组件

1.什么是单文件组件？

  • 单文件组件就是一个文件扩展名为 .vue 的 single-file components (单文件组件)的文件。是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js

2.单文件组件的好处：

  • 在 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: ‘#root’}) 在每个页面内指定一个容器元素。相较于非单文件组件，单文件组件可以写入css样式，在添加拓展后可以有语法高亮以及语法提示等，在脚手架（Vue-cli）的环境下能够快速的搭建项目。

3.创建单文件组件：

语法形式：

<template>
<!-- 这里写单文件组件的结构 -->

</template>

<script>
// 这里写单文件组件的交互

</script>

<style>
/* 这里写单文件组件的样式 */

</style>

2.在vue脚手架中编写项目的流程：

  • 1.main.js(必须)
    • main.js用于创建Vue实例（对话Ap组件），main.js是整个项目的入口文件
      // main.js是整个项目的入口文件

      // 引入Vue
      import Vue from 'vue'

      // 引入App组件,它是所有组件的父组件
      import App from './App.vue'

      // 关闭Vue的生产提示
      Vue.config.productionTip = false

      // 创建Vue实例对象
      new Vue({
        el : '#app',
        // 将App组件放入容器中
        render: h => h(App),
      })/*.$mount('#app')*///生命周期 = 等同于给容器绑定id el属性
  • 2.App.vue（所有组件的 “父组件”）（必须）
    • 在App.vue是管理所有子组件的父组件，它直接与vm对话的，故在App.vue中中引入所有子组件
      <template>
        <!-- html片段 -->
        <div>
          <School></School>
          <Student></Student>
        </div>
      </template>

      <script>
          // 首先要先引入app下管理的所有子组件
          import Student from './components/Student'
          import School  from './components/School'

          export default {
              name : 'App',  
              // 注册组件(简写形式)
              components : {
                  Student,
                  School
              }      
          }
      </script>

      <style>
        /* 样式部分 */
      </style>
  • 3.其他组件（在App或者其他父组件管辖下的子组件）
    <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: aqua;
        }
    </style>
  • 4.index.html（这个就是最终的网页）（必须）
    <!DOCTYPE html>
    <html lang="">
      <head>
        <meta charset="utf-8">
        <!-- 针对ie浏览器的一个特殊配置,含义是让ie浏览器以最高的渲染级别渲染页面 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <!-- 开启移动端开发的理想视口 -->
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        
        <!-- 引入网页标签图标,这里的 <%= BASE_URL %> 是指向 public文件夹的 -->
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">

        <!-- 配置网页标题,这里的 <%= htmlWebpackPlugin.options.title %> 是指向 json文件中的title属性 -->
        <title><%= htmlWebpackPlugin.options.title %></title>
      </head>
      <body>
        <!-- 这里的noscript标签表示如果你的浏览器不支持js解析就会弹出 -->
        <noscript>
          <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>

运行结果展示:

image