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 defaultsetup() 的结构。

  • 自动引入 :变量和方法自动暴露给模板,无需像传统的 return 那样返回对象。

  • 更好地优化:由于它是编译时的语法糖,Vue 的编译器可以做更多优化,减少运行时开销。

    <template>

    {{ inputValue }}

    </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>
相关推荐
10年前端老司机3 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程7 小时前
2025前端面试题
前端·面试
前端小趴菜058 小时前
React - createPortal
前端·vue.js·react.js
晓13139 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo9 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴10 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78911 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼11 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原11 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf11 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js