创建第一个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.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>

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"})//取值不需要 .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 内容时需要使用不同的语法）。