Vue Vant

Vue Vant

1.Vant 概述

请添加图片描述
Vant是一个轻量,可靠的移动端组件库,2017开源

目前 Vant 官方提供了 Vue 2 版本Vue 3 版本微信小程序版本,并由社区团队维护 React 版本支付宝小程序版本

课程中使用Vant 2.x版本可以浏览网站

https://youzan.github.io/vant/v2/#/zh-CN/

2.Vant的优势

ElementUI是开发电脑浏览器页面的组件库

而Vant是开发移动端显示页面的组件库

酷鲨商城前台设计的是手机来访问,所以使用移动端更合适也就是使用Vant

3.Vant特性

  • 🚀 性能极佳,组件平均体积小于 1KB(min+gzip)

  • 🚀 65+ 个高质量组件,覆盖移动端主流场景

  • 💪 使用 TypeScript 编写,提供完整的类型定义

  • 💪 单元测试覆盖率超过 90%,提供稳定性保障

  • 📖 提供完善的中英文文档和组件示例

第一个Vant程序

1.创建Vue项目

参考第四阶段创建Vue项目的比较创建Vue项目

首先确定一个文件夹创建Vue项目

G盘下创建一个文件夹vue-home

进入文件夹在地址栏输入cmd,打开dos命令行

G:\vue-home>vue create demo-vant

具体选项,参考之前阶段创建Vue的笔记

2.添加\安装Vant支持

我们创建一个Vue项目,Vue项目不会自动支持Vant

我们需要将Vant添加到Vue项目中

进入到我们刚刚创建的项目的文件夹

G:\vue-home>cd demo-vant

运行安装\添加Vant支持的npm命令

G:\vue-home\demo-vant>npm i vant@latest-v2 -S

运行结束后可能有警告,无视掉

最终看到的提示可能是

added 5 packages in 3s

到此为止,当前Vue项目,就支持Vant功能了

我们利用idea打开这个项目即可

https://gitee.com/jtzhanghl/vant2202.git

3.添加Vant引用

如果想在Vue项目中开始使用Vant的功能

还需要在Vue项目代码中添加Vant的引用

Vue项目的src/main.js中,添加如下引用,启用Vant功能

// 添加Vant引用
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant)

添加了上面的引用,当前Vue项目就可以使用Vant组件了

为了实时运行项目,我们启动Vue项目

在idea的Terminal中编写启动代码

G:\vue-home\demo-vant>npm run serve

打开浏览器

输入localhost:8080

进入移动端页面调试模式

以Google浏览器为例按F12进入调试模式后点击移动端调试即可
请添加图片描述

4.按钮组件

在HomeView.vue中修改代码为

<template>
  <div class="home">
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
  </div>
</template>

打开页面,就可以看到按钮

5.表单页面

使用表单组件实现登录页面

是Vant直接提供的组件

请添加图片描述
在AboutView.vue页面中编写代码如下

<template>
  <div class="about">
    <van-form @submit="onSubmit" @failed="myFail">
      <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    onSubmit(values) {
        // 提交成功的方法
      console.log('submit', values);
    },
    myFail(errorInfo){
        // 提交失败的方法
      console.log(errorInfo);
    }
  },
};
</script>

注意@submit和@failed这两个事件的绑定关系

6.area省市区选择

先在views文件夹下创建AreaView.vue文件

编写代码如下

<template>
  <div>
    <van-area title="省市区选择" :area-list="areaList" />
  </div>
</template>

<script>
const areaList = {
  province_list: {
    110000: '北京市',
    120000: '天津市',
  },
  city_list: {
    110100: '北京市',
    120100: '天津市',
  },
  county_list: {
    110101: '东城区',
    110102: '西城区',
    // ....
  },
};
export default {
  data(){
    return{areaList}
  }
}
</script>

新建的页面要设置路由才能访问

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/area',
    name: 'area',
    component: () => import('../views/AreaView.vue')
  }
]

通过输入路径http://localhost:8080/area

访问省市区选择页面

只有少量数据

如果需要真实的全国省市区数据,我们需要直接引入

使用npm命令如下

G:\vue-home\demo-vant>npm i @vant/area-data

下面我们修改AreaView.vue的代码

引用安装好的全国数据,并绑定确认按钮,输出选择的省市区的信息

<template>
  <div>
    <van-area title="省市区选择" :area-list="areaList"
      @confirm="showArea"/>
  </div>
</template>

<script>
import {areaList} from '@vant/area-data'
export default {
  data(){
    return{areaList}
  },
  methods:{
    showArea(area){
      console.log(area);
    }
  }
}
</script>

7.商品列表

我们的电商网站一定会需要商品列表

移动端Vant直接支持了商品列表的格式

我们也不需要大范围的修改

创建ListView.vue

代码如下

<template>
  <div>
    <van-row>
      <van-col span="8">综合</van-col>
      <van-col span="8">销量</van-col>
      <van-col span="8">价格</van-col>
    </van-row>
    <van-card
        num="2"
        price="168.00"
        desc="超10万好评热销产品"
        title="酷鲨键盘鼠标套装"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #tags>
        <van-tag type="primary">自营</van-tag>
        <van-tag plain type="primary">酷鲨物流</van-tag>
      </template>
      <template #footer>
        <van-button size="mini">按钮</van-button>
        <van-button size="mini">按钮</van-button>
      </template>
    </van-card>
    <van-card
        num="2"
        price="168.00"
        desc="超10万好评热销产品"
        title="酷鲨键盘鼠标套装"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #tags>
        <van-tag type="primary">自营</van-tag>
        <van-tag plain type="primary">酷鲨物流</van-tag>
      </template>
      <template #footer>
        <van-button size="mini">按钮</van-button>
        <van-button size="mini">按钮</van-button>
      </template>
    </van-card>
  </div>
</template>

<script>

</script>

路由代码

{
  path: '/list',
  name: 'list',
  component: () => import('../views/ListView.vue')
}

我是将军;我一直都在,。!

### 回答1: 你可以使用 vant 提供的 `van-table` 组件来绘制表格。下面是一个简单的例子: ```html <template> <van-table :columns="columns" :data="data" /> </template> <script> export default { data() { return { columns: [ { title: '姓名', key: 'name' }, { title: '年龄', key: 'age' }, { title: '性别', key: 'gender' }, ], data: [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 22, gender: '男' }, ], }; }, }; </script> ``` 上述代码中,我们通过 `columns` 属性定义表格的列信息,每一列包括 `title` 和 `key` 两个属性。`data` 属性用于定义表格的数据,每一行的数据对应一个对象,对象的属性名与 `columns` 中的 `key` 对应。 如果需要在表格中添加操作按钮或自定义内容,可以在 `columns` 中添加 `render` 属性,值为一个函数,该函数返回一个 VNode 对象。例如: ```html <template> <van-table :columns="columns" :data="data" /> </template> <script> export default { data() { return { columns: [ { title: '姓名', key: 'name' }, { title: '年龄', key: 'age' }, { title: '性别', key: 'gender' }, { title: '操作', render: (h, { row }) => { return h('van-button', { props: { type: 'primary' }, on: { click: () => { this.handleEdit(row); }, }, }, '编辑'); }, }, ], data: [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 22, gender: '男' }, ], }; }, methods: { handleEdit(row) { // 编辑操作 }, }, }; </script> ``` 上述代码中,在 `columns` 中添加了一个包含 `render` 属性的列,该属性值为一个返回按钮 VNode 的函数。`render` 函数的第一个参数是 `h` 函数,用于创建 VNode,第二个参数是当前行的数据对象。在 `render` 函数中,我们创建了一个 `van-button` 组件,并绑定了点击事件,该事件会调用 `handleEdit` 方法进行编辑操作。 ### 回答2: Vue Vant提供了一个非常简便的方法来绘制数据表格。你可以使用Vant的`van-table`组件来快速创建和展示表格数据。 首先,需要在你的Vue项目中安装Vant库。你可以通过npm或者yarn来进行安装和引入。 在你的Vue组件中,引入`vant`依赖: ```javascript import { Table } from 'vant'; ``` 然后,在你的模板中使用`van-table`来渲染表格: ```html <van-table :columns="columns" :rows="rows"></van-table> ``` 在Vue组件中,你需要定义`columns`和`rows`两个数据属性来配置表格的列和行。 `columns`是一个包含列信息的数组。对于每一列,你需要指定`title`(列标题)和`key`(对应数据的字段名)。 ```javascript data() { return { columns: [ { title: '姓名', key: 'name' }, { title: '年龄', key: 'age' }, { title: '性别', key: 'gender' }, ], rows: [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 22, gender: '男' }, ], }; }, ``` `rows`是一个包含行信息的数组。每个元素对应一行数据对象,对象属性的命名需要和`columns`中的`key`相对应。 这样,当你运行应用时,你就会看到一个包含指定列的表格,并且会根据指定的行数据进行渲染。 当然,Vant的`van-table`还有许多其他属性和功能可以进行个性化配置,你可以查看官方文档来了解更多。 ### 回答3: Vue Vant是一个基于Vue.js的UI组件库,它提供了丰富的组件和工具来帮助我们快速构建前端界面。在Vue Vant中,绘制表格非常简单。 首先,我们需要在项目中引入Vue Vant的相关文件,可以通过CDN方式引入或者通过npm安装后引入。 接下来,在Vue组件中注册Vant并引入表格组件。可以使用全局注册的方式:Vue.use(Table) 或者局部注册的方式:components:{ Table }。 在模板中,我们可以使用<vant-table>标签来创建表格。通过设置不同的属性和传入数据,可以实现不同的功能和样式。例如,使用:columns属性设置表格的列,使用:data属性传入表格的数据。 在Vue中,我们可以通过计算属性或者方法来处理表格的数据,例如从后端获取的数据进行处理、排序或者筛选等操作。 除了基本的表格功能外,Vue Vant还提供了各种扩展功能,例如分页、排序、筛选等。我们可以通过设置相应的属性和传入回调函数来实现这些功能,使表格更加灵活和易用。 总结起来,使用Vue Vant绘制表格非常简单,只需引入相关文件、注册组件,设置属性和传入数据即可。同时,Vue Vant还提供了丰富的功能和扩展,可以根据需求进行配置和定制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值