vue原理分析（二）import App from ‘./App.vue‘

嗓子疼谁心疼

于 2024-09-04 15:04:48 发布

阅读量126

点赞数 3

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

本文链接：https://blog.csdn.net/qq_29069649/article/details/141894259

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

今天我们来分析vue原理 import App from './App.vue'

这个比较好理解，从'./App.vue'中 import App

我们来看下 ./App.vue

./App.vue 分为三个部分

<template></template>

<script></script>

<style></style>

1 template 部分

<template>

  <div id="app">

    <img alt="Vue logo" src="./assets/logo.png">

    <HelloWorld msg="Welcome to Your Vue.js App"/>

  </div>

</template>

divdiv给了个id 为app，里面包了2个元素

里面有一个img图片，alt属性和 src属性

1个HelloWorld组件组件是什么后面再将，先当作一个单标签组件配了个msg属性

2. script 部分

<script>

import HelloWorld from './components/HelloWorld.vue'



export default {

  name: 'App',

  components: {

    HelloWorld

  }

}

</script>

import HelloWorld from './components/HelloWorld.vue'

导入了HelloWorld组件

name: 'App'

配置name 'App'

components: {

HelloWorld

}

components 这里是注册组件，组件注册了才能在template中使用

3. style

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

组件的分析，我们后面细讲，这里先了解下。

在main.js 中导入了App.vue这个组件