Vue.js 中常见的表单、列表以及路由的使用方法

一、表单的使用方法

1.表单的介绍

Vue.js 中的表单组件用于提交用户输入的各种组件，如 <textarea>、<switch/>、<input/>、<checkbox-group/>、<slider/>、<radio-group/> 和 <picker/> 等。当表单组件中的按钮类型为 submit 时，会触发表单提交事件，需要在表单组件中添加 name 属性作为 key 以确保数据的正确传递。

2.表单的按钮类型

default：默认按钮。

primary：主控按钮。

warn：警告级别的按钮。

plain：纯文本按钮。

disabled：禁用按钮。

loading：加载中按钮。

hover-red：悬停时变为红色的按钮。

size="mini" ：最小尺寸按钮。

3.表单组件

表单组件用于提交用户输入的各种组件，如 <textarea>、<switch/>、<input/> 等。
当点击表单中的 submit 按钮时，会提交表单组件中的 value 值，因此在表单组件中需要添加 name 属性作为 key 进行标识。

实例代码：

<form @submit.prevent="handleSubmit">
  <input type="text" name="username" v-model="username" />
  <button form-type="submit">提交</button>
</form>

二、列表的使用方法

1.列表的概括

在 Vue.js 中，列表的使用主要通过 v-for 指令来实现。v-for 指令可以遍历一个数组或对象，并为每个元素生成对应的 DOM 结构。

示例代码：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} - {{ item.description }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1', description: 'Description 1' },
        { name: 'Item 2', description: 'Description 2' },
        { name: 'Item 3', description: 'Description 3' }
      ]
    };
  }
};
</script>

2.详细说明

`1.v-for` 指令

用于遍历数组或对象。在上面的例子中，v-for="(item, index) in items" 表示遍历 items 数组，item 是当前项，index 是当前项的索引。

`2.:key` 属性

用于给每个生成的元素一个唯一的标识，帮助 Vue 识别哪些元素发生了变化，从而提高渲染性能。

3. 列表项内容

在 <li> 标签内，可以使用双大括号语法 {{ }} 来显示数据。

例题

制作一个表格，如果表格有数据，则显示全部数据，如果没有数据，显示“暂无数据”

<template>
    <div>
        <h1>条件渲染指令</h1>
      <h1 v-if="isShow">表达式的值为真就能显示出来</h1>
      <div v-else>v-if不成立的时候显示</div>
      <div class="box">
        <span>学号</span><span>姓名</span><span>总分</span> 
      </div>
        <ul class="list" v-if="isShow">
         <li><span>001</span><span>cici</span><span>85</span></li>
         <li><span>001</span><span>cici</span><span>85</span></li>
         <li><span>001</span><span>cici</span><span>85</span></li>
         <li><span>001</span><span>cici</span><span>85</span></li>
         <li><span>001</span><span>cici</span><span>85</span></li> 
         <li v-for="(item,index) in lesson"  :key="index">
               {{ item.name }} {{ item.id }} {{ item.fen }}
            </li>
      </ul>  

      <div class="gray" v-else>暂无数据</div>

      <p v-show="status = 1">当status为1时显示该行</p>
    </div>
</template>
<script>

export default{
    data(){
        return{
           isShow:true,
            } 
        },
    
    methods:{
    }
};
</script>

<style scoped>
   .box{
    list-style: none;
        border: 1px solid #ccc;
        display: flex;
        justify-content: space-around;
        font-size: 16px;
        line-height: 30px;
        margin:40px  0  0 40px ;
        padding: 5px;
}
     .list li{
        list-style: none;
        border: 1px solid #ccc;
        display: flex;
        justify-content: space-around;
        font-size: 15px;
        line-height: 30px;
     }
     .list{
        margin-top:auto;
     }
     .gray{
        border: 1px solid #ccc;
        font-size: 14px;
        text-align: center;
        color: #ccc;
        padding: 20px;
        list-style: none;
        margin-left: 40px;
     }
</style>

效果图：

三、路由的使用方法

1.Vue.js 的使用

Vue.js的使用需要用vue-router 库来管理路由。

2.安装与引入

1.首先，需要安装 `vue-router` 库：

npm install vue-router

2.然后，在项目中引入并使用 `vue-router`：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import List from './components/List.vue';

Vue.use(Router);

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/list/:page',
    name: 'list',
    component: List
  }
];

const router = new Router({
  mode: 'history',
  routes
});

export default router;

解释：在上面的代码中，定义了两个路由规则：

根路径 /：对应 Home 组件。

动态路径 /list/:page：对应 List 组件，其中 :page 是一个动态参数。

3.使用路由

在 Vue 组件中，可以使用 <router-link> 和 <router-view> 来实现路由跳转和视图渲染：

<template>
  <div>
    <nav>
      <router-link :to="{ name: 'home' }">Home</router-link>
      <router-link :to="{ name: 'list', params: { page: 1 } }">List Page 1</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

4.编程式导航

除了使用<router-link>进行声明式导航外，还可以用router.push()和router.replace()进行编程式导航：

// 导航到 Home 页面
this.$router.push({ name: 'home' });

// 导航到 List 页面，并传递参数
this.$router.push({ name: 'list', params: { page: 2 } });

// 替换当前路由，不会向历史记录中添加新条目
this.$router.replace({ name: 'list', params: { page: 3 } });

5.路由对象

在组件中，可以通过 this.$route 对象来访问当前路由的信息，例如路径参数、查询参数等：

export default {
  mounted() {
    console.log(this.$route.params.page); // 输出当前页面的 page 参数
    console.log(this.$route.query.sort); // 输出当前页面的 sort 查询参数
  }
};

四、总结

通过上述内容，我们可以看到 Vue.js 中列表的使用主要依赖于 v-for 指令，而路由的管理则通过 vue-router 库来实现。通过定义路由规则、使用 <router-link> 和 <router-view> 组件、以及编程式导航方法，可以方便地实现单页应用（SPA）中的页面跳转和视图渲染。