11、vue3

一、为什么要学 Vue3

1.1 为什么要学 Vue3

11、vue3_第1张图片

1.2 Vue3的优势

11、vue3_第2张图片

1.3 Vue2 选项式 API vs Vue3 组合式API

11、vue3_第3张图片

Vue3 组合式API vs Vue2 选项式 API

11、vue3_第4张图片

二、create-vue搭建Vue3项目

2.1 认识 create-vue

11、vue3_第5张图片

2.2 使用create-vue创建项目

  1. 前提环境条件
    已安装 16.0 或更高版本的 Node.js
    node -v
  2. 创建一个Vue应用
    npm init vue@latest
    这一指令将会安装并执行 create-vue
    11、vue3_第6张图片

三、熟悉项目目录和关键文件

3.1 项目目录和关键文件

关键文件:

  1. vite.config.js - 项目的配置文件 基于vite的配置
  2. package.json - 项目包文件 核心依赖项变成了 Vue3.x 和 vite
  3. main.js - 入口文件 createApp函数创建应用实例
  4. app.vue - 根组件 SFC单文件组件 script - template - style
    变化一:脚本script和模板template顺序调整
    变化二:模板template不再要求唯一根元素
    变化三:脚本script添加setup标识支持组合式API
  5. index.html - 单页入口 提供id为app的挂载点
    11、vue3_第7张图片
    main.js
import './assets/main.css'

// new Vue() 创建一个应用实例 => createApp()
// createRouter() createStore()
// 将创建实例进行了封装,保证每个实例的独立封闭性
import { createApp } from 'vue'
import App from './App.vue'

// mount 设置挂载点  #app(id为app的盒子)
createApp(App).mount('#app')

App.vue


<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
script>

<template>
  
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    div>
  header>

  <main>
    <TheWelcome />
  main>
template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
style>

四、组合式API - setup选项

4.1 setup选项的写法和执行时机

1.执行时机,比beforeCreated还要早
2.setup函数中,获取不到this(this是undefined)
11、vue3_第8张图片
App.vue

<script>
// setup
// 1.执行时机,比beforeCreated还要早
// 2.setup函数中,获取不到this(this是undefined)
export default {
  setup(){
    console.log('setup函数', this)
  },
  beforeCreate(){
    console.log('beforeCreate函数')
  }
}
script>

<template>
  <div>学习vue3div>
template>

运行结果

4.2 setup选项中写代码的特点

11、vue3_第9张图片
App.vue

<script>
// setup
// 1.执行时机,比beforeCreated还要早
// 2.setup函数中,获取不到this(this是undefined)
// 3.数据 和 函数,需要在 setup 最后 return ,才能模板中应用
//    问题: 每次都要return,好麻烦?
// 4.通过 setup 语法糖简化代码
export default {
  setup () {
    // console.log('setup函数', this)
    // 数据
    const message = 'hello Vue3'
    // 函数
    const logMessage = () => {
      console.log(message)
    }
    return {
      message,
      logMessage
    }
  },
  beforeCreate(){
    console.log('beforeCreate函数')
  }
}
script>

<template>
  <div>{{ message }}div>
  <button @click="logMessage">按钮button>
template>

数据 和 函数,需要在 setup 最后 return ,才能模板中应用
问题: 每次都要return,好麻烦?=> 语法糖

4.3

你可能感兴趣的:(Vue,vue.js,前端,javascript)