.vue文件是如何被引用加载

目录

1 引言

在没接触vue教程时，比较好奇vue文件是如何被引用的，后来系统地学习了一遍，虽然当时明白了，但还是记录下，毕竟好记性不如烂笔头

1.1 vue文件基础

什么是*.vue文件
首先，我们用 vue-cli 脚手架搭建的项目，里面我们已经遇到了很多，如 index.vue 或者 App.vue 这一的文件了。这到底是个什么东西？如果是初次接触 vue 开发的同学，可能之前没有见过这个东西。*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。
每个.vue文件包含三种类型的顶级语言块 <template>, <script> 和 <style>。这三个部分分别代表了 html,js,css

例子demo：

<template>
   <div>
     <Header></Header>
     <div class= "article_list" >
       <ul>
         <li></li>
       </ul>
     </div>
     <Footer></Footer>
   </div>
</template>
<script>
import Header from '../components/header.vue'
import Footer from '../components/footer.vue'
export default {
   components: { Header, Footer },
   data () {
     return {
       list: []
     }
   },
   created () {
     this .getData()
   },
   methods: {
     getData () {
       this .$api.get( 'topics' , null , r => {
         console.log(r)
       })
     }
   }
}
</script>
<style>
   .article_list {margin: auto;}
</style>

1.1.1 template部分

*.vue文件称为 vue组件
首先，一个 vue组件，它的 template 则代表它的 html结构。但是需要注意的是，不是说把代码包裹在 <template></template> 中就可以了，而是必须在里面放置一个 html标签来包裹所有的代码。

大家看到 <Header></Header> 这个代码的时候肯定很奇怪，这是个什么玩意儿。其实，这是一个自定义组件。我们在其他地方写好了一个组件，然后就可以用这种方式引入进来。同样 <Footer></Footer> 也是一个组件。

1.1.2 script部分

首先，需要两个自定义组件，先引用进来。如下格式，比较好理解吧

import Header from '../components/header.vue'
import Footer from '../components/footer.vue'

其次，除了引用的文件，我们将所有的代码包裹于如下的代码中间：

export default {
   // 这里写你的代码，外面要包起来。
}

我们先引入了 Header 和 Footer 这两个组件的源文件，接下来，我们要把引用的组件给申明到components 里面去。这样，我们就可以在 template 里面使用了。

components: { Header, Footer },

data是组件的数据。演示代码，给了一个 list 的空数组数据。在 template 中，可以使用 this.list 来使用我们的数据

data () {
   return {
     list: []
   }
},

created 表示当我们的组件加载完成时，需要执行的内容。比如这里，就让组件在加载完成时，执行一个叫 this.getData() 的函数。另外created是vuejs中的勾子函数之一

created () {
   this .getData()
},

methods是我们的这个组件的方法，也可以说是函数。比如，上面的代码就表示，我们的组件自定义了一个叫 getData() 的方法函数

methods: {
   getData () {
     this .$api.get( 'topics' , null , r => {
       console.log(r)
     })
   }
}

1.1.3 style部分

这里比较简单，就是针对组件的 template 里内容出现的 html元素写一些样式。如下代码：

<style>
.article_list {margin: auto;}
</style>

1.2 vue文件引用

vue文件引用步骤：

1.2.1 index.html

在html中运用组件

<body>
    <app></app>　　<!-- 此处app的组件为入口js main.js中定义的组件名 -->
    <script src="build.js"></script>　　<!-- 此处引用的js为webpack打包生成的js文件 -->
</body>

1.2.2 main.js

在这个文件中定义js，引入vue和App.vue

import Vue from 'vue'     //引入之后就可以直接new Vue({ })使用了
import App from './App.vue'　　//引入主组件
    
new Vue({
　　el:'body',
　　components:{
　　　　app:App //App是上面import引入的App；app是自定义的名字，返给html中运用的组件标签
　　}
});

1.2.3 App.vue

App.vue（官方规范，一般组件文件的首字母大写）
在这个文件中定义html、js、css，格式为：

<template>
    <h1>welcome Vue</h1>
    <h2 @click="change">{{msg}}</h2>
    <my-menu></my-menu>　　<!-- 引用的其他组件，然后在html中运用 -->
</template>
<script>
    import Menu from './components/Menu.vue'　　//在此引入其他子组件

    export default{　　// 这个导出的模块和vue中的component的方式一模一样，这里面可以直接给数据data，定义方法methods等等
        data(){
            return {
                msg:'welcome Vue ^_^'
            }
        },
        methods:{
            change(){
                this.msg='wahaha'
            }
        },
        components:{
            'my-menu':Menu　　//引入其他子组件，在此定义赋值
        }    
    }
</script>
<style>
    body{
        background: #ccc
    }
</style>

1.2.4 Menu.vue

在当前目录的components文件夹下面有一个Menu.vue组件

<template>
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>
</template>
<script>
    
</script>
posted @   上善若泪  阅读(771)  评论(0)  编辑  收藏  举报
编辑推荐：
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek：免费 AI 助力你的知识管理，让你的笔记飞起来！
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示