创建第一个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.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>响应式数据
基本类型的响应式数据
只能用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 内容时需要使用不同的语法）。
