Vue
关注
分享
扫一扫
文章平均质量分 58
風の唄を聴け
这个作者很懒，什么都没留下…
展开
-
[Python/Vue] 基于 Flask + Vue 实现前端文件上传及下载
目录1. 文件上传1.1 前端代码1.2 后端代码2. 文件下载2.1 前端代码2.2 后端代码1. 文件上传说明使用 ElementUI 的 el-upload 组件发送的文件上传请求中包含请求头和请求参数后端接收到文件并存储到指定路径上传成功后前端给出提示信息1.1 前端代码<template> <div class="app-container"> <el-upload class="upload-demo" :sh原创 2021-07-17 15:13:22 · 6054 阅读 · 3 评论 -
[Vue] 使用 .sync 实现父子组件间数据的双向绑定
目录1. 子组件2 父组件刚写完这篇博客 [Vue] 父子组件间数据的双向绑定, 还没来得及在项目中使用就发现了一个更简单的实现方式, 本文继续以 ElementUI 的 DatePicker 组件为例, 就当是对上篇博客的补充吧主要改进的地方有两个:子组件传递数据时使用 update:myPropName 的模式触发事件父组件接收数据时使用 sync 修饰符这样做的好处是无需通过在事件上绑定方法来为父组件变量重新赋值, 使代码更简洁1. 子组件<template> <原创 2021-05-31 16:29:40 · 402 阅读 · 0 评论 -
[Vue/ElementUI] DatePicker 作为子组件与父组件实现数据双向绑定
本文主要是记录一下 ElementUI 的 DatePicker 作为子组件与父组件实现数据双向绑定的代码, 具体的代码解析可以参考 [Vue] 父子组件间数据的双向绑定子组件代码<template> <div> <el-date-picker v-model="select_date" align="right" type="date" placeholder="选择日期" @change="chan原创 2021-05-31 13:40:55 · 1013 阅读 · 0 评论 -
[Vue] 父子组件间数据的双向绑定
目录1. 创建子组件1.1 设置 template1.2 设置 model1.3 设置 props1.4 设置 data1.5 设置 methods2. 创建父组件2.1 引入并注册子组件2.2 设置 tempate2.3 设置 data2.4 设置 methods3. 完整代码3.1 子组件3.2 父组件本文以 ElementUI 的 DatePicker 组件为例, 详细记录实现父子组件间数据的双向绑定的完整过程1. 创建子组件1.1 设置 template<template>原创 2021-05-31 13:34:21 · 416 阅读 · 1 评论 -
[vue+vant] 使用 Swiper 组件轮播本地图片
目录1. 序言2. 在 assets 目录上传图片3. 在 Swiper 组件中设置图片列表4. 在页面中引用 Swiper 组件1. 序言Swiper 组件中的官方示例中, 轮播的图片是以 URL 链接的方式导入组件, 如果把示例中的 URL 链接直接换成本地图片路径, 会发现图片无法正常显示, 下面记录一下轮播本地图片的方法.2. 在 assets 目录上传图片将需要轮播的图片上传到 assets 目录下, 假设有 p1.png, p2.png, p3.png 三张图片3. 在 Swiper原创 2021-05-14 11:25:47 · 3461 阅读 · 0 评论 -
[Vue+Vant] 多页面共用底部导航栏 Tabbar
目录1. 序言2. 在 views 目录中创建页面文件3. 在 router 中配置路由4. 在 components 目录中创建组件4. 在 App.vue 中引用 Tabbar 组件1. 序言移动端 app 的底部一般有3到5个底部按钮, 每个按钮对应一个页面, 对于此种情况最直观的处理方法是在每个页面中引用底部按钮组件, 但那样会引入很多冗余代码, 也不方便代码的维护. 为了更好地处理多页面共有组件, 可以将组件设置为共用组件, 本文将以底部导航栏 Tabbar 为例记录下详细的设置过程.由于需原创 2021-05-11 14:49:07 · 7443 阅读 · 5 评论 -
[Vue+Vant] 使用 Vant 组件的详细操作流程
目录1. 序言2. 在 main.js 中注册组件3. 在 components 目录中创建组件4. 在 App.vue 中引用组件1. 序言首先创建一个基于 Vue 和 Vant 的项目, 项目的创建和配置可以参考 [Vue+Vant] 使用脚手架创建和配置项目, Vant 组件的详细参数和用法参考 Vant 官方文档 , 下面以组件 Tabbar 为例说明组件的使用流程2. 在 main.js 中注册组件在 main.js 中注册组件属于全局注册import { createApp } fro原创 2021-05-11 10:10:23 · 1874 阅读 · 0 评论 -
[Vue+Vant] 使用脚手架创建和配置项目
目录1. 安装 nodejs/npm2. 安装 vue-cli3. 安装 vant4. 安装 router5. 启动服务1. 安装 nodejs/npm下载 & 安装curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -sudo yum -y install nodejs替换 npm 源npm get registry # 查看npm config set registry http://registry.np原创 2021-05-09 16:24:31 · 770 阅读 · 0 评论 -
[Vue] 解决 v-model 在 layui-form 中双向绑定失效的问题
今天在使用 layui-form 时遇到一个坑, 就是使用 v-model 无法与 layui-form 中的下拉框内容实现双向绑定, 出现这个问题的原因不太清楚, 应该是两个框架之间在某些地方产生的冲突, 下面利用两个框架各自的特性来变相地实现双向绑定.1. layui-form 向 Vue 绑定想要实现的效果是当 layui-form 下拉框中的内容变动时, Vue 中与之绑定的变量同步变动, layui-form 的代码如下<form class="layui-form" action="原创 2021-03-06 22:49:31 · 2226 阅读 · 0 评论 -
[Vue] 使用 v-for 生成列表
假设 items 是一个双重列表, 下面的循环方式是错误的(小程序中的写法)<div class="table_tr" v-for="(items, index) in items" :key="index"> <div class="table_td">{[item[1]]}</div> <div class="table_td">{...原创 2019-06-20 16:44:08 · 2406 阅读 · 0 评论 -
Vue 中实现三级联动下拉框
<!DOCTYPE html><html lang='en'><head> <title>下拉框三级联动</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- bootstrap --> <...原创 2019-03-27 13:19:11 · 5938 阅读 · 0 评论 -
Vue/jQuery 的 GET/POST 请求
1. Vue 的 GET 请求var vm = new Vue({ el: '#app', data: { resp: {}, api_url: '/index',}, methods: { get_data(){ this.$http.get(this.api_url) .then((response) => { // 用 set 将响应...原创 2019-03-17 18:09:38 · 1362 阅读 · 0 评论