vue
文章平均质量分 53
缘飞梦
这个作者很懒,什么都没留下…
展开
-
vue 中使用htmlcanvas生成多张图片,并转成压缩包,并下载到本地
htmlcanvas生成多张图片压缩并下载到本地原创 2021-11-30 17:05:05 · 2097 阅读 · 2 评论 -
vue使用iview解决多级菜单如何渲染问题
1、当不确定菜单有多少层级的时候,第一时间就想到使用递归的方式渲染菜单,下面我们来看看如何实现。2、使用ivew菜单组件,目前项目也用的是这个框架,不熟悉的小伙伴可以先看看这个菜单组件,熟悉的小伙伴我们继续向下看。3、我的实现思路,判断没有子菜单单的时候,使用组件的正常渲染,如果有子菜单,那就需要加载这个组件 <left-menu-nav />,继续帮我们循环,走下一步<Menu ref="user" accordion ..原创 2020-09-28 12:13:11 · 1028 阅读 · 1 评论 -
vue对提示框的封装
使用Modal Message 方法如下const root = process.env.VUE_APP_URL;import axios from "axios";import { Modal,Message } from "view-design"; deleteRow(url, ids) { return new Promise((resolve, reject) => { Modal.confirm({ title: "删除提示",原创 2020-08-21 16:31:16 · 806 阅读 · 0 评论 -
vue 中表格 拖拽排序
vue+iview 表格 拖拽排序,代码如下<Table border ref="selection" :columns="columns" :data="data" :draggable ="true" @on-drag-drop="onDragDrop" > </Table>js 代码如下onDragDrop(first, end) { //转成int型,方便后转载 2020-08-21 16:28:14 · 1473 阅读 · 0 评论 -
vue学习做项目流程
1、知道有哪些指令和修饰符,如何使用。2、路由动态传值和取值3、定义子组件,父子组件之间传值4、bus中间站,传值和取值5、vuex的使用6、如何在项目中使用其他的框架(echarts、jquery)7、搭建项目的框架,配置路由,完成页面的编写8、封装的接口如何调用9、如何在vue挂载一个框架,然后全局可以使用10、熟练使用elementUI的任何一个模块小功能:如何上传文件、如何拖拽生成一个图、如何拖动时间轴显示当前的数据。1、使用ElementUI...原创 2020-07-09 16:53:53 · 460 阅读 · 0 评论 -
vue实现部分页面导入底部 vue配置公用头部、底部,可控制显示隐藏
vue实现部分页面导入底部 vue配置公用头部、底部,可控制显示隐藏在app.vue文件里引入公共的header 和 footerheader 和footer默认显示,例如某个页面不需要显示header可以使用 this.$emit('header',false);来控制header不显示例如:test页面不需要显示header,在页面被创建的时候广播(this.$emit)告诉上级不显示header,并且在当前页面写自己的header代码,就可以了app.vue<...转载 2020-07-09 16:48:22 · 1402 阅读 · 0 评论 -
iView表格(table)渲染(render)
零、render1、语法以下分别定义了:标签名称,(样式,事件等综合内容),显示内容render: (h, params) => { return h('span', { style: { color: '#FF7D41' }, on:...转载 2020-04-22 17:06:42 · 5000 阅读 · 0 评论 -
vue自定义组件实现底部导航栏动态切换
我们都知道vue的两大特性:组件化和数据驱动,今天我们就来说说关于vue组件开发,最近由于开发一款移动端商城,底部的导航栏就利用组件化实现的,下面先看看效果图:实现这个功能我们需要知道父子组件之间的传值方式:简单来说,子组件通过props方法接受父组件传来的值,子组件通过$emit方法来向父组件发送数据。(具体案例可以看我之前写的博客https://blog.csdn.net/qq_...原创 2020-04-02 11:32:28 · 5015 阅读 · 0 评论 -
vue最新面试题
最近在面试,总结几个重点的面试题:一、vue父子组件之间的传值:简单来说,子组件通过props方法接受父组件传来的值,子组件通过$emit方法来向父组件发送数据。(具体案例可以看我之前写的博客)。二、vue生命周期函数:beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestr...原创 2019-07-01 18:28:50 · 174846 阅读 · 4 评论 -
vuex实现购物车的增加减少移除
1.store.js(公共的仓库)import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { carList: [] //购物车的商品 }, mutations: { // 加 ...原创 2019-06-19 15:12:30 · 9963 阅读 · 0 评论 -
Vue非父子组件之间的通信
// 注册一个空的js,作为中转站bus.jsimport Vue from 'vue'export default new Vue()A组件:非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果。$emit发送事件<template> <div @click="eleValue...原创 2019-05-31 17:07:12 · 325 阅读 · 0 评论 -
Vue自定义指令实现拖动滑块验证功能
<template> <div> <div class="movebox"> <div class="movego"></div> <div class="txt" id="txt">拖动滑块验证</div> <div class="move moveBe...原创 2019-05-31 16:56:57 · 383 阅读 · 0 评论 -
vue中轮播图的使用
下载:npm install swiper --save-dev网址:swiper4.0使用入口:http://www.swiper.com.cn/usage/index.html<template> <div class="MoveImg"> <div class="swiper-container"> <div...原创 2019-04-28 17:23:21 · 938 阅读 · 0 评论 -
vue 中请求接口的两种方法
vue 项目安装axios:cnpm install axios --saveimport axios from 'axios' 哪个文件需要用到就在哪个文件中引入安装qs:npm install --save axios vue-axios qs import qs from 'qs' qs 用来解决vue中post请求以 a=a&b=b 的格式ma...原创 2019-04-28 17:19:03 · 32549 阅读 · 0 评论 -
vue父子组件之间传值,动态改变搜索框标题
子组件:<template> <div id="child" > <div> <span>{{childName}}</span><br /> <div class="divWidth"> ...原创 2019-04-28 17:13:34 · 981 阅读 · 0 评论 -
Vue面试中,经常会被问到的面试题/Vue知识点整理
一、对于MVVM的理解?MVVM 是 Model-View-ViewModel 的缩写。Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。View代表UI 组件,它负责将数据模型转化成UI 展现出来。ViewModel监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。在MVVM架构下,Vi...转载 2019-04-15 16:51:03 · 1466 阅读 · 0 评论 -
vue 的axios请求数据2种方式 很重要
show:function(){ //post 方式 //赋值给变量self //使用axios 请求后台的数据 get和post的两种方式 var self=this; var url='xxxx.json'; axio...原创 2018-10-19 10:28:25 · 1966 阅读 · 0 评论 -
vue elementUi安装脚手架(大全)
一.安装node.js首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。只是这样安装的 node 是固定版本的,如果需要多版本的 node,可以使用 nvm 安装http://blog.csdn.net/s8460049/article/details/52396399安装完成后,可以命令行工具中输入node -v和npm -v,如果能显示...原创 2018-10-18 10:42:14 · 6116 阅读 · 0 评论 -
vue实现登陆功能
最近在学习vue,发现了vue的好多坑,比如怎么更好的获取input框输入的值而减少获取dom节点的消耗 ,以及怎么绑定一个函数,去执行业务逻辑。1、首先说说怎么获取input框的值vue中提供了一个ref属性,这里需要在html代码中用ref属性来绑定这个input框,再通过js代码来获取input的值:HTML代码:<input type="text" v-model=...原创 2018-09-10 16:04:24 · 17027 阅读 · 1 评论