vue系列2--文件的组成个功能

Posted 2021-01-06 callmelx

首先在上一个博客中，我们初始化了一个基本的项目

src目录：

main.js是真个项目的入口。

我们来看一下基础项目中main.js中所具备的东西。

<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld />
</div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue"
export default {
name: ‘App‘,
components:{
HelloWorld
}
}
</script>

<style>

</style>

可以看出 一个组件的使用需要三个步骤：

1.引入组件： import 部分

2.加载视图：template:‘<app / >‘

3.将组件的名字注入：compenet:

app.vue：根组件，所有的组件都嵌套在这里面。

解释一下HelloWorld使用的流程。

1.首先根组件中要使用的Helloworld组件，所以第一步引入是必须的，在js中引入要使用的helloworld组件。

import HelloWorld from ‘./component/HelloWorld‘

注意前面HelloWorld是自定义的名称，可以随意起，但是这个会注入到组件名字里。component中

2.加载视图:template是vue的表示，template会把里面的东西替换。这个具体作用的坑以后再添吧，毕竟我也是刚开始。

3.讲import 的组件的名字注入到组件中，componet就像一个加工厂，我们把表示放到里面，然后我们就可以将他当做标签使用了。<HelloWorld>