Vue的逻辑和代码集

逻辑

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>