Vue3学习 Day01
创建第一个vue项目
1.安装node.js
cmd输入node查看是否安装成功
2.vscode开启一个终端，配置淘宝镜像
# 修改为淘宝镜像源
npm config set registry https://registry.npmmirror.com
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.vuelet 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 = 18let tel = '13888888888'// 方法function changName(){name = '李四'//注意：此时这么修改name页面是不变化的}function changAge(){console.log(age)age += 1 //注意：此时这么修改age页面是不变化的}function showTel(){alert(tel)}
</script>响应式数据
基本类型的响应式数据
只能用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"})//取值不需要 .valuefunction 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对象，所以要 .valuename.value="李四";age.value=99;sex.value="男"//此时页面可以变化console.log(name,age,sex);}/* let {name,age}=personlet sex=person.sexfunction 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=str1ming.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 内容时需要使用不同的语法）。