2.vue编写APP组件

二、编写APP组件

2.1基本语法

1）先把src里的默认文件删掉

2）创建main.ts和App.vue这两个文件

 <!--App.vue-->
 <!-- 组件结构 -->
<template>
  <div class="app">
    <h1>Hello Vue</h1>
  </div>
</template>


<script>
    export default{
      name:"App"                 //组件名称
    }
</script>

<!-- 组件样式 -->
<style>
  .app{
    background-color: burlywood;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>

//main.ts
//引入createApp用于创建应用
import {createApp} from 'vue'
//引入App根组件
import App from './App.vue'

//创建app并挂载到index.html中id为'app'的div中
createApp(App).mount('#app')

<!--index.html-->
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
      <!--引入main.ts-->
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

效果：

在这里插入图片描述

总结：

vite项目中，index.html是项目的入口文件，在项目最外层。
加载index.html后，vite解析<script type=“module” src='xxxx’>指向的JavaScript
vue3中是通过createApp函数创建一个应用实例

2.2示例

<!--index.html-->
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
      <!--引入main.ts-->
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

//app.vue
<!-- 组件结构 -->
<template>
  <div class="app">
    <h1>Hello Vue</h1>
    <Persion/>
  </div>
</template>


<script>
    //引入Persion
    import Persion from './components/Persion.vue'
    export default{
      name:"App",                 //组件名称
      components:{Persion}       //注册组件
    }
</script>

<!-- 组件样式 -->
<style>
  .app{
    background-color: burlywood;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>

//components/Persion.vue
<!-- 组件结构 -->
<template>
  <div class="person">
      <h2>姓名：{{name}}</h2>
      <h2>年龄：{{age}}</h2>
     
      <button @click="showTel">查看联系方式</button>
      <button @click="changeName">修改姓名</button>
      <button @click="changeAge">修改年龄</button>
  </div>
</template>


<script>
    export default{
      name:"Person",                //组件名称
      data(){
        return{
          name:'sally',
          age:'18',
          tel:'13388888888'
        }},
      methods:{
        showTel(){
          alert(this.tel)
        },
        changeName(){
          this.name='ying'
        },
        changeAge(){
          this.age=28
        }

      }
      
    }
</script>

<!-- 组件样式 -->
<style>
  .app{
    background-color: burlywood;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>

//main.ts
//引入createApp用于创建应用
import {createApp} from 'vue'
//引入App根组件
import App from './App.vue'

//创建app并挂载到index.html中id为'app'的div中
createApp(App).mount('#app')