Vue3--一个简单效果

教程

• 编码规范

  • TypeScript+组合式API+setup语法糖

• 内容

  • 核心：ref、reactive、computed、watch、生命周期...

  • 常用：hooks、自定义ref、路由、pinia、mitt...

  • 面试：组件通信、响应式相关API...

Vue3简介

• 3.3.4版本

创建Vue3工程

• 基于vue-cli创建（webpack）

• 基于vite创建（推荐）

  • 官网https://vitejs.cn

  • 构建对比图
    

  • 配置环境

  • 讲解文件夹文件

编写App组件

• 讲解src文件

  • main.ts：盆、根、创建并摆放

• 代码实现main.ts

  // 引入createApp用于创建应用
  import {createApp} from 'vue'
  // 引入App根组件
  import App from './App.vue'
  
  createApp(App).mount('#app')

• 代码实现App.vue

  <template>
      <!-- html -->
      <div class="app">
          <h1>你好</h1>
      </div>
  </template>
  
  <script lang="ts">
      // JS或TS
      export default {  //默认暴露
          name:'App' //组件名
      }
  </script>
  
  <style>
      /* 样式 */
      .app {
          background-color: #ddd;
          box-shadow: 0 0 10px;
          border-radius: 10px;
          padding: 20px;
      }
  </style>

• 总结：

  • Vite项目中，index.html是项目的入口文件，在项目最外层

  • 加载index.html后，Vite解析<script type="module" src="xxx">指向的JavaScript

  • Vue3中是通过createApp函数创建一个应用实例

一个简单的效果

• 建一个“备份”

• src下新建“components”（写个有功能的）

• 在compoments下新建Person.vue

• 代码实现Person.vue

  <template>
      <div class="person">
          <h2>姓名：{{name}}</h2>
          <h2>姓名：{{age}}</h2>
          <button>修改名字</button>
          <button @click="showTel">查看联系方式</button>
      </div>
  </template>
  
  <script lang="ts">
      export default {
          name:'Person'
          data() {
              return {
                  name:'张三',
                  age:18,
                  tel:'13888888888'
              }
          } ,
          methods:{
              changeName() {
                  this.name='zhang-san'
              },
              changAge() {
                  this.age += 1
              },
              showTel() {
                  alert(this.tel())
              }
          }
      }
  </script>
  
  <style scoped>
      .person {
          background-color: skyblue;
          box-shadow: 0 0 10px;
          border-radius: 10px;
          padding: 20px;
      }
      button {
          margin: 0 5px;
      }
  </style>

• 代码实现App.vue

  <template>
      <!-- html -->
      <div class="app">
          <h1>你好</h1>
          <Person/>
      </div>
  </template>
  
  <script lang="ts">
      // JS或TS
      import Person from './components/Person.vue'
      export default {  //默认暴露
          name:'App' ,//组件名
          components:{Person}//注册组件
      }
  </script>
  
  <style>
      /* 样式 */
      .app {
          background-color: #ddd;
          box-shadow: 0 0 10px;
          border-radius: 10px;
          padding: 20px;
      }
  </style>