深圳市宣传片制作公司_今天的最新疫情_国产系统2345_市场调研报告最佳范文

逻辑

vue变量动态绑定

v-model="inputValue"和const inputValue = ref('')双向绑定

<template><div><input v-model="inputValue" placeholder="输入文本" /><p>你输入的内容是: {{ inputValue }}</p></div>
</template><script>
import { ref } from 'vue';export default {setup() {const inputValue = ref(''); // 创建一个响应式引用return {inputValue, // 将其返回，以便在模板中使用};},
};
</script>

<script setup> 是 Vue 3 中推出的组合式 API 的语法糖，使代码更加简洁和直观。

特点：

• 更简洁：你不需要显式地调用 setup() 函数，所有的代码都直接在 <script setup> 中执行。
• 更少的模板代码：省去了 export default 和 setup() 的结构。
• 自动引入：变量和方法自动暴露给模板，无需像传统的 return 那样返回对象。
• 更好地优化：由于它是编译时的语法糖，Vue 的编译器可以做更多优化，减少运行时开销。

<template><div><input v-model="inputValue" /><p>{{ inputValue }}</p></div>
</template><script setup>
import { ref } from 'vue';// 直接声明响应式变量
const inputValue = ref('');
</script>

function结构

const submitForm = () => {const data = {description: value.value,nickname: value2.value,};
};

使用 .then() 处理异步请求

axios.post('http://localhost:5000/updateprofile', data).then(res => {const message = res.data.message;  // 假设响应中有一个 `message` 字段console.log(message);  // 打印从响应中获取到的 message}).catch(error => {console.error('请求失败:', error);});

使用 async/await 处理异步请求

const submitForm = async () => {try {const res = await axios.post('/submit', data);const message = res.data.message;  // 假设响应中有 `message` 字段console.log(message);  // 打印 message} catch (error) {console.error('请求失败:', error);}
};

从rounter(index.js)里面导入Views的各种视图

路线集合 = 路径，导入的模板名字

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';// 导入你的页面组件
import Page1 from '../views/PageOne.vue';
import RegisterForm from '../views/RegisterForm.vue';
import LoginForm from '../views/LoginForm.vue';
import ProfileForm from '../views/ProfileForm.vue';
import Updateprofile from '../views/UpdateProfileForm.vue';
import ShopForm from '../views/ShopForm.vue';
import ProductList from '../views/ProductList.vue';
import ProductDetail from '../views/ProductDetail.vue';const routes = [{ path: '/page1', component: Page1 },{ path: '/register', component: RegisterForm }, { path: '/login', component: LoginForm },{ path: '/profile', component: ProfileForm }, { path: '/updateprofile', component: Updateprofile }, { path: '/addshop', component: ShopForm }, { path: '/', redirect: '/page1' }, // 默认重定向{ path: '/ProductList', component: ProductList},{ path: '/product/:id', name: 'ProductDetail', component: ProductDetail },
];const router = createRouter({history: createWebHistory(),routes,
});export default router;

下面是一个使用 useRouter 的简单示例，展示了如何在 Vue 3 组件中使用路由功能。

<template><div><h1>欢迎来到我的应用</h1><button @click="goToAbout">去关于页</button></div>
</template><script setup>
import { useRouter } from 'vue-router';// 获取路由实例
const router = useRouter();// 定义一个函数，处理路由跳转
const goToAbout = () => {router.push('/about'); // 跳转到关于页面
};
</script>

带参数跳转 路由必须设置name:''ProductDetail"

const goToDetail = (productId) => {router.push({ name: 'ProductDetail', params: { id: productId } });
};

onMounted() 是 Vue 3 组合式 API 中的生命周期钩子，相当于选项式 API 中的 mounted() 钩子。

<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';// 定义一个 ref 来存储产品列表
const products = ref([]);// 定义 fetchProducts 函数
const fetchProducts = async () => {try {const response = await axios.get('/api/products');products.value = response.data;} catch (error) {console.error('获取产品列表失败:', error);}
};// 在组件挂载后调用 fetchProducts 函数
onMounted(fetchProducts);
</script><template><div><h1>产品列表</h1><ul><li v-for="product in products" :key="product.id">{{ product.name }}</li></ul></div>
</template>