国外网站建设的步骤如何制作自己的网页链接

响应式

在 Vue 3 的中，ref() 和 reactive() 都是用来创建响应式数据的，但它们的使用方式和适用场景不同。

1. ref()：适用于基本类型

ref() 适用于基本类型（如字符串、数字、布尔值），也可以用于对象，但需要 .value 访问值。

<script setup>
import { ref } from 'vue';const count = ref(0);const increment = () => {count.value++; // 需要 .value 访问和修改
};
</script><template><div><p>Count: {{ count }}</p> <!--无需 count.value --><button @click="increment">+1</button></div>
</template>

2. reactive()：适用于对象

reactive() 适用于对象、数组、Map、Set，不需要 .value，可以直接修改。

<script setup>
import { reactive } from 'vue';const state = reactive({count: 0
});const increment = () => {state.count++; // 直接修改，不需要 .value
};
</script><template><div><p>Count: {{ state.count }}</p><button @click="increment">+1</button></div>
</template>

总结: ref适用于简单的数据(基本数据类型),reactive适用于对象,数组等

视图渲染技术

插值表达式

插值表达式:最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 ,即双大括号{{}}

语法格式：{{数据}}

插值表达式是将数据渲染到元素的指定位置的手段之一 插值表达式不绝对依赖标签,其位置相对自由 插值表达式中支持javascript的运算表达式（比如） 插值表达式中也支持函数的调用

文本渲染

为了渲染双标中的文本,我们也可以选择使用v-text和v-html命令

v- 这种写法的方式使用的是vue的命令 v-的命令必须依赖元素,并且要写在元素的开始标签中 v-***指令支持ES6中的字符串模板 插值表达式中支持javascript的运算表达式 插值表达式中也支持函数的调用 v-text可以将数据渲染成双标签中间的文本,但是不识别html元素结构的文本 v-html可以将数据渲染成双标签中间的文本,识别html元素结构的文本

属性渲染

想要渲染一个元素的 attribute，使用 v-bind指令

• 插值表达式不能直接放在标签的属性中,要渲染元素的属性使用v-bind

• v-bind可以用于渲染任何元素的属性,语法为 v-bind:属性名='数据名', 可以简写为 :属性名='数据名'

事件渲染

使用 v-on 来监听 DOM 事件，并在事件触发时执行对应的 Vue的JavaScript代码。

用法：v-on:click="handler" 或简写为 @click="handler" vue中的事件名=原生事件名去掉on 前缀 如:onClick --> click handler的值可以是方法事件处理器,也可以是内联事件处理器

条件渲染

v-if：

• v-if='表达式'只会在指令的表达式返回真值（true）时才被渲染

• 也可以使用 v-else 为 v-if 添加一个“else 区块”。

• 一个 v-else 元素必须跟在一个 v-if 元素后面，否则它将不会被识别。

双向绑定

页面上的数据由于用户的操作造成了改变，也会同步修改对应的响应式数据，双向绑定一般用于表单标签。

格式：v-model:value=”数据”，一般省略:value，写为v-model=”数据”，此时的数据还是指value值

2.vue生命周期

Vue 2 主要生命周期：

创建阶段：`beforeCreate` → `created`
挂载阶段：`beforeMount` → `mounted`
更新阶段：`beforeUpdate` → `updated`
销毁阶段：`beforeDestroy` → `destroyed`

Vue 3 变化：

beforeCreate 和created被 setup() 取代
beforeDestroy 和 destroyed 变为 onBeforeUnmount 和 onUnmounted
其他生命周期改为 onXxx 形式

Vue 的 Promise 介绍

在 Vue.js 开发中，Promise 主要用于处理 异步操作，如 API 请求、延迟执行任务等。Vue 本身没有专门的 API 来创建或管理 Promise，但它可以与 JavaScript 的原生 Promise 以及 Vue 生态系统（如 Vue Router、Vuex、Pinia 等）很好地结合使用。

---

1. Promise 基本用法

function getData() { return new Promise((resolve, reject) => 
{ setTimeout(() => 
{ resolve("数据加载成功"); }, 2000); }); }getData() .then((data) =>{ console.log(data); // 2秒后打印 "数据加载成功" }) .catch((error) => 
{ console.error("错误:", error); });

• resolve 函数：在回调函数中调用 resolve()，Promise 状态会从 pending 变为 resolved（成功）。
• reject 函数：在回调函数中调用 reject()，Promise 状态会从 pending 变为 rejected（失败）。

---

2. async 和 await

async 和 await 是 JavaScript 处理异步代码的方式，它们基于 Promise，可以让代码更清晰易读。Vue 组件中的 异步请求（如 API 请求），通常会用 async/await 来管理。

async

1. async 关键字用于标识一个异步函数，返回值是一个 Promise。
2. 方法如果正常 return 结果，Promise 状态就是 resolved，返回值就是 resolve 的值。
3. 方法中如果抛出异常，则返回的 Promise 状态就是 rejected。

await

1. await 关键字用于等待 Promise 解析，返回 Promise 成功的结果。
2. await 右侧如果是一个普通值，则直接返回该值。

   let res = await "张三"; // res = "张三"

3. await 右侧如果是 Promise，则返回 Promise 成功的结果。

   let res = await Promise.resolve("张三"); // res = "张三"

4. await 右侧如果是失败状态的 Promise，那么 await 会直接抛异常。
5. await 关键字必须在 async 修饰的函数中使用，但 async 函数中可以没有 await。
6. await 后面的代码会等待 await 执行完毕后才继续运行。

Axios

Axios 是一个基于 Promise 的 HTTP 请求库，常用于 Vue、React 等前端框架中，来处理 API 请求。

发送 GET 请求

import axios from 'axios';axios.get('https://jsonplaceholder.typicode.com/todos/1') .then(response => { console.log(response.data); // 获取数据 }) .catch(error => { console.error("请求出错:", error); });

发送 POST 请求

axios.post('https://jsonplaceholder.typicode.com/posts', {title: 'Vue Axios',body: '使用 Axios 发送 POST 请求',userId: 1
})
.then(response => {console.log(response.data);
})
.catch(error => {console.error("请求出错:", error);
});