Vue3学习 Day01

创建第一个vue项目

1.安装node.js

cmd输入node查看是否安装成功

2.vscode开启一个终端，配置淘宝镜像

  # 修改为淘宝镜像源
npm config set registry https://registry.npmmirror.com

输入如下命令创建第一个Vue项目

3.下载依赖，启动项目

访问5173端口

 

第一个Vue项目的目录结构

 

我们先打开main.ts，这是我们vue工程的入口文件

在这里创建vue程序，并把它挂载到id为app的标签下（ps：这里的App.vue是我们的根组件）

再打开index.html

这里将main.js引入，并挂载了app程序到这里。

最后打开App.vue，也就是我们的根组件

 先不看其他编码的细节，我们可以大胆猜测HelloWorld.vue被挂到App.vue里面，证实了它是根组件。

简单验证

Hello.vue

<template>
    <h1>{{ msg }}</h1>
</template>
    
<script lang="ts" setup>
    let msg="Hello"
</script>
    
<style>
    
</style>

 App.vue

<template>
<Hello></Hello>
<h1>{{msg}}</h1>
<Hello></Hello>
</template>

<script lang="ts" setup>
    import Hello from './components/Hello.vue';//引入Hello.vue
    let msg="App"
</script>

<style>
</style>

 

setup概述

setup语法糖

setup函数有一个语法糖，可以让我们把setup函数从script里面独立出去

<script setup lang="ts">
  console.log(this) //undefined
  
  // 数据（注意：此时的name、age、tel都不是响应式数据）
  let name = '张三'
  let age = 18
  let tel = '13888888888'

  // 方法
  function changName(){
    name = '李四'//注意：此时这么修改name页面是不变化的
  }
  function changAge(){
    console.log(age)
    age += 1 //注意：此时这么修改age页面是不变化的
  }
  function showTel(){
    alert(tel)
  }
</script>

Vue的生命周期

 

setup函数会在beforeCreate函数前调用

响应式数据

基本类型的响应式数据

只能用ref

<template>
<!--     alt+shift+a 注释 -->
    <h1>{{ msg }}</h1>
    <!-- 在template中，不用age.value 会自动帮我们 .value -->
    <h1>年龄{{ age }}</h1>
    <button @click="f1">点我年龄+1</button>
</template>
    
<script lang="ts" setup name="Hello">
    import { ref } from 'vue';
    let msg="Hello"
    let age=ref(18)//用ref包裹,让他成为响应式数据

    function f1(){
        age.value+=1 //在script中，需要age.value才能得到它的值
    }
</script>

在js中操作数据需要 .value  在模板中不需要 

对象类型的响应式数据

可用reactive，也可用ref

reactive

    //对象类型的直接用reactive包起来即可
    let s1=reactive({
        id:"1",
        name:"张三",
        age:"28",
        sex:"男",
        classroom:"3"
    })

    //取值不需要 .value
    function changeS1Name(){
        s1.name="张十三"
    }

 ref

仍需要 .value

由下图可知，ref实现响应式对象的底层还是使用了reactive 

 

ref和reactive的区别

<template>
    <ul>
        <li>品牌:{{ car1.brand }}</li>
        <li>价格:{{ car1.price }}</li>
    </ul>
    <button @click="f1">ref改变</button>
    <br>
    <ul>
        <li>品牌:{{ car2.brand }}</li>
        <li>价格:{{ car2.price }}</li>
    </ul>
    <button  @click="f2">reactive改变1</button>
    <button  @click="f3">reactive改变2</button>
</template>

<script  lang="ts" setup>
    import { ref,reactive } from 'vue';
    //选中shift+ (
    let car1=ref({
        brand:"雪佛兰",
        price:666
    })


    let car2=reactive({
        brand:"奔驰",
        price:123
    })

    function f1(){
        car1.value={
            brand:"宝马",
            price:987
        }
    }//可以

    function f2(){
        car2={
            brand:"宝马",
            price:987
        }
/*        car2.brand="wda" */ 
    }//失效  无法获得Car的响应式对象，要改整体只能成员属性一个个地改

    function f3(){
        Object.assign(car2,{brand:"宝马",price:987})
    }//这样可以，直接分配一个新对象给car2

</script>

解构响应式对象

如果我们要处理一个有很多成员的响应式对象，且我们只希望对其中几个成员进行修改，那么就可以对其进行解构

<template>
姓名<h1>{{name }}</h1>
<br>
年龄<h1>{{ age }}</h1>
<br>
性别<h1>{{ sex }}</h1>
其他我们不想实时修改的属性<h1>{{ person.others }}</h1>

<button @click="changeMsg">修改</button>
</template>

<script lang="ts" setup>
    import { reactive,toRefs,toRef} from 'vue';
    let person=reactive({
        name:"张胜男",
        age:22,
        sex:"女",
        others:"其他属性..."
    })
    //将解构出来的成员编程ref响应式对象
    let {name,age}=toRefs(person)//解构多个
    let sex=toRef(person,"sex")//解构单个

    function changeMsg(){
        //因为解构出来的是ref对象，所以要 .value
        name.value="李四";
        age.value=99;
        sex.value="男"
    //此时页面可以变化
        console.log(name,age,sex);
    }

/*     let {name,age}=person
    let sex=person.sex
    function changeMsg(){
        name="李四";
        age=99;
        sex="男"
        
        //    李四，99，男
        //    但是页面上的姓名和年龄并没有改变
        //    这是因为解构出来的成员并不是响应式的
        
        console.log(name,age,sex);
    } */

</script>

 计算属性

模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑。

它的格式如下：

    const 我们要计算的属性=computed(function(){
        ...
        return  计算结果
    })

 案例

<template>
姓<input v-model="xing">
<br>
名<input v-model="ming">
<br>
姓名<span>{{ name }}</span>
</template>


<script lang="ts" setup>
    import { computed,ref } from 'vue';
    let xing=ref("yang")
    let ming=ref("wei")
    let name=computed(function (){
        return xing.value.slice(0,1).toUpperCase()+xing.value.slice(1)+"-"+ming.value
    })


</script>


<style>
span{
    border: 1px solid red;
}
</style>

计算属性优于函数调用的地方在于它有缓存机制，刷新页面时函数会重新计算，计算属性检查调用的变量的值，没有变动的话直接返回上次计算的结果。 

此外，计算属性的值是只读的

要对他实现可读可写要在computed函数里面提供get和set方法 

<template>
姓<input v-model="xing">
<br>
名<input v-model="ming">
<br>
姓名<span>{{ name }}</span>
<br>
<button @click="changeValue">对计算属性的直接写操作会调用set方法,并且值会给到set方法的形参，但是还是得通过更改调用的变量值才能复写</button>
</template>


<script lang="ts" setup>
    import { computed,ref } from 'vue';
    let xing=ref("yang")
    let ming=ref("wei")
    let name=computed({
        get(){
            return xing.value.slice(0,1).toUpperCase()+xing.value.slice(1)+"-"+ming.value
        },
        set(val){
            let[str1,str2]=val.split("-")
            xing.value=str1
            ming.value=str2
        }
    })
    function changeValue(){
            name.value="Li-si"
    }
</script>

 对计算属性的直接写操作会调用set方法,并且值会给到set方法的形参，但是还是得通过更改调用的变量值才能复写

tips

1.快捷键

alt+shift 多行写

alt+shift+a 注释

shift+（     用（）包裹

2.别名插件

引入一个拓展插件，让Hello.vue被引入App.vue的时候可以起别名

 在vite.config.js中引入

 

3.v-model（适用表单元素）和v-bind(适用表单属性)

 数据绑定方向

• v-model：是双向数据绑定。它不仅能够将 Vue 实例中的数据渲染到页面上，还能够监听用户的输入，并将用户输入的数据更新回 Vue 实例中的数据。这种双向绑定特别适用于表单元素，如 <input>、<select> 和 <textarea>。
• v-bind：是单向数据绑定。它主要用于将 Vue 实例中的数据绑定到 HTML 元素的属性上，但不会自动将用户输入的数据更新回 Vue 实例。虽然通过配合事件处理可以实现双向绑定，但 v-bind 本身只负责单向的数据流。

 适用范围

• v-model：主要用于表单控件或自定义组件的双向数据绑定。它会自动根据控件类型（如文本、单选按钮、复选框、选择框等）选择正确的方法来更新元素。
• v-bind：几乎可以用于绑定任何 HTML 元素的属性，包括但不限于 class、style、href、src 等。此外，它还可以用于绑定表达式和 HTML 内容（尽管绑定 HTML 内容时需要使用不同的语法）。