vue3学习

p3 创建vue3工程

1.创建命令

npm create vue@latest

p4 编写APP组件

入口文件是index.html
Vite 项目中， index.htm 是项目的入口文件，在项目最外层
加载index.html后，Vite解析 script type=moduleSrC=XXX 指向的javascript
Vue 中是通过 createAp 函数创建一个应用实例

p5 一个简单的效果

证明vue3可以兼容vue2

p6 选项式api与组合式api

p7 setup概述

p8-9

setup 的返回值

若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用**（重点关注）。**
若返回一个函数：则可以自定义渲染内容，代码如下：

setup(){
  return ()=> '你好啊！'
}

setup 与 Options API 的关系

• Vue2 的配置（data、methos......）中**可以访问到** setup`中的属性、方法。
• 但在setup中不能访问到Vue2的配置（data、methos…）。
• 如果与Vue2冲突，则setup优先。

p10 setup语法糖

p11 ref 基本数据类型的响应式数据

<template>
    <div class='app'>
        <h1>你好啊{{name}}</h1>
        <h1>年龄{{age}}</h1>
        <button @click="showTel">联系</button>
        <button @click="changeName">改名</button>
        <button @click="addAge">add</button>
    </div>
</template>

<script lang='ts' setup name="person">
    import {ref} from 'vue'

    let name = ref('zhangsan')
    let age = ref(18)
    let tel = 12345
    function changeName(){
        name.value = 'lisi'
    }
    function addAge(){
        age.value ++
    }
    function showTel(){
        alert(tel)
    }
</script>

<style>
    .app {
        background-color: #ddd;
    }
</style>

p12 reactive 对象类型响应式数据

<template>
    <div class='app'>
        <h1>你好啊{{person.name}}</h1>
        <h1>年龄{{person.age}}</h1>
        <button @click="changeName">改名</button>
    </div>
</template>

<script lang='ts' setup name="person">
    import {reactive} from 'vue'


    let person=reactive({name:'xiaoxiong',age:30})
    function changeName(){
        person.name='lisi'
    }

</script>

<style>
    .app {
        background-color: #ddd;
    }
</style>

p13 ref 对象类型的响应式数据

• 其实ref接收的数据可以是：基本类型、对象类型。
• 若ref接收的是对象类型，内部其实也是调用了reactive函数。