-
Vant Radio 单选框介绍
所属栏目：[教程] 日期：2023-04-20 热度：8073
Vant 单选框 Radio组建主要用于单选框调用，圆型单选框、方型单选框、角色单选框等。
引入
import Vue from 'vue';
import { RadioGroup, Radio } from 'vant';
Vue.use(Radio);
Vue.use([详细] -
Vant PasswordInput 密码输入框浅析
所属栏目：[教程] 日期：2023-04-20 热度：1247
带网格的输入框组件，可以用于输入支付密码、短信验证码等，通常与数字键盘组件配合使用
引入
import Vue from 'vue';
import { PasswordInput, NumberKeyboard } from 'vant';
Vue.use(Pa[详细] -
Vant NumberKeyboard 数字键盘运用
所属栏目：[教程] 日期：2023-04-20 热度：2618
数字键盘，提供两种样式风格，可以与密码输入框或自定义的输入框组件配合使用
引入
import Vue from 'vue';
import { NumberKeyboard } from 'vant';
Vue.use(NumberKeyboard);
默认样式[详细] -
Vant Field 输入框组件
所属栏目：[教程] 日期：2023-04-20 热度：1863
表单中的输入框组件
引入
import Vue from 'vue';
import { Field } from 'vant';
Vue.use(Field);
基础用法
可以通过v-model双向绑定输入框的值，通过placeholder设置占位提示文字
<[详细] -
Vant Picker 选择器分析
所属栏目：[教程] 日期：2023-04-20 热度：1204
提供多个选项集合供用户选择，支持单列选择和多列级联，通常与 弹出层 组件配合使用
引入
import Vue from 'vue';
import { Picker } from 'vant';
Vue.use(Picker);
基础用法
Picker 组[详细] -
Vant 风格指南
所属栏目：[教程] 日期：2023-04-20 热度：1141
在参与 Vant 开发时，请遵守约定的单文件组件风格指南，指南内容节选自 Vue 官方风格指南。
组件的 data 必须是一个函数。
// bad
export default {
data: {
foo: 'bar'
}
}
// good[详细] -
Vant多语言切换
所属栏目：[教程] 日期：2023-04-20 热度：9212
Vant 默认采用中文作为语言，如果需要使用其他语言，可以参考下面的方案。
多语言切换
Vant 通过 Locale 组件实现多语言支持，使用 Locale.use 方法可以切换当前使用的语言。
import { Locale } from '[详细] -
Vant Button 按钮组件
所属栏目：[教程] 日期：2023-04-20 热度：9763
使用Vant Button 按钮组件，需要先进行引用。
Vue.use(Button);
按钮类型
按钮支持 default、primary、info、warning、danger 五种类型，默认为 default。
<van-button type="primary">主要按钮</van-button[详细] -
Vant Cell 单元格分析
所属栏目：[教程] 日期：2023-04-20 热度：9785
使用Vant Cell 按钮组件，需要先进行引用。
在app.json或index.json中引入组件，详细介绍见快速上手
"usingComponents": {
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell[详细] -
Vant Image 图片
所属栏目：[教程] 日期：2023-04-20 热度：7258
增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示
import Vue from 'vue';import { Image } from 'vant';
Vue.use(Image);
基础用法与原生img标签一致，[详细] -
Vant Layout 布局分析
所属栏目：[教程] 日期：2023-04-19 热度：8831
Layout 提供了van-row和van-col两个组件来进行行列布局
引入
import Vue from 'vue';
import { Col, Row } from 'vant';
Vue.use(Col);
Vue.use(Row);
基本用法
Layout 组件提供了24列栅[详细] -
Vant Popup 弹出层浅析
所属栏目：[教程] 日期：2023-04-19 热度：784
弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示
引入
import Vue from 'vue';
import { Popup } from 'vant';
Vue.use(Popup);
基础用法
通过v-model控制弹出层是否[详细] -
Vant 内置样式介绍
所属栏目：[教程] 日期：2023-04-19 热度：5527
Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。
当文本内容长度超过容器最大宽度时，自动省略多余的文本。
<!-- 最多显示一行 -->
<div class="van-ellipsis">这是一段最多显示一行的文[详细] -
Vant Calendar 日历
所属栏目：[教程] 日期：2023-04-19 热度：9425
日历组件用于选择日期或日期区间，2.4 版本开始支持此组件
引入
import Vue from 'vue';
import { Calendar } from 'vant';
Vue.use(Calendar);
选择单个日期
下面演示了结合单元格来使用[详细] -
Vant Checkbox 复选框功能介绍
所属栏目：[教程] 日期：2023-04-19 热度：1121
Vant CheckBox 复选框主要支持一些常规复选框功能的使用。
引入
import Vue from 'vue';
import { CheckBox, CheckBoxGroup } from 'vant';
Vue.use(CheckBox);
Vue.use(CheckBoxGroup);[详细] -
Vant DatetimePicker 时间选择
所属栏目：[教程] 日期：2023-04-19 热度：1895
时间选择器，支持日期、年月、时分等维度，通常与 弹出层 组件配合使用
引入
import Vue from 'vue';
import { DatetimePicker } from 'vant';
Vue.use(DatetimePicker);
选择完整时间[详细] -
Element 美化 Todo 项目
所属栏目：[教程] 日期：2023-04-19 热度：9825
Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。
编写路由
首先，我们需要定义两个路由，分别是待办事项列表页面和添加待办事项页面。我们[详细] -
Vue 项目打包部署
所属栏目：[教程] 日期：2023-04-19 热度：8947
在项目编写完成之后，我们在项目的根目录下运行以下命令：
npm run build
打包结束之后，我们可以看到项目目录里面多了一个 dist 文件夹，这个文件夹里面就是我们项目打包之后的代码。
Node 服务部署
我们在[详细] -
Vue 第三方库的使用
所属栏目：[教程] 日期：2023-04-19 热度：1861
学会使用第三方库，可以说是前端工程师最基本的技能。其实，使用第三方库非常简单，绝大部分库的文档中都会教我们如何使用。
在 Vue-cli 创建的项目中，我们可以使用以下命令进行安装：
npm install element-u[详细] -
Vue-Cli 项目文件结构浅析
所属栏目：[教程] 日期：2023-04-19 热度：2826
我们介绍了 Vue-Cli 初始化项目，本小节我们一起来分析以下 Vue-Cli 创建项目的文件结构。
首先我们先看以下用 Vue-Cli 创建项目的整体结构：
项目相关的代码，我们都放在 src 的文件夹中，该文件夹中的结构如[详细] -
Vuex Modules使用方法
所属栏目：[教程] 日期：2023-04-19 热度：4136
在复杂的大型项目中，如果将所有的数据都存在一个 state 对象中，那将使得 store 对象变得非常大，难于管理。这时候，使用 module 将变得异常重要。Modules 并非难点，接下来我们就一步步介绍 modules 的使用。
基[详细] -
Vuex Action简介
所属栏目：[教程] 日期：2023-04-19 热度：3663
Action 类似于 Mutation，不同的是：Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。在 vuex 的使用过程中，我们可以将多个 Mutation 合并到一个 Action 中，也可以通过 Action 进[详细] -
定义 Vuex mutation
所属栏目：[教程] 日期：2023-04-19 热度：729
Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
const s[详细] -
Vuex Getter分析
所属栏目：[教程] 日期：2023-04-19 热度：9057
Vuex 允许我们在 store 中定义 “getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，而且只有当它的依赖值发生了改变才会被重新计算。— 官方定[详细]
-
Vuex State 创建数据仓库
所属栏目：[教程] 日期：2023-04-19 热度：7576
我们已经给大家写了一个简单的示例，大家一定还记得 Vuex.Store({...}) 这个方法。在 Vuex 中，我们通过该方法创建一个数据仓库，并把数据 state 传入。例如：
const store = new Vuex.Store({
state: {
[详细]
