VUE
I'm the future
一个灰常有前途的小牛
展开
-
Vue实现截屏下载
使用的是html2canvas官方网站: http://html2canvas.hertzen.com/主要位置:class名称,该参数传入dom节点就会对其位置进行截图(无法对画笔生成部分截屏)文件名称,自定义的文件名称例子:npm install --save html2canvasimport html2canvas from 'html2canvas'export default { methods:{ downLoad () { const $this原创 2021-08-09 11:23:01 · 291 阅读 · 0 评论 -
axios下载文件
axios({ method: "POST", url: url, data: data, params: data, responseType: 'blob' //返回是个文件 }).then(response => { download(response, data) //then直接下载,方法在下边 })// 下载文件function download (res) { let blob = new Blob([res.data.原创 2021-07-22 15:16:44 · 8208 阅读 · 2 评论 -
VUE+springboot,同时上传多个图片
VUE代码 let formData = new FormData(); formData.append("content",“上传图片的同时也可以传正常的参数” ); formData.append("file", 图片路径,图片名称)); formData.append("file", 图片路径,图片名称)); axiosExport(url地址,formData)axiosExport方法const axiosExport原创 2021-07-22 15:13:12 · 370 阅读 · 0 评论 -
vue-Router前端路由
文章目录1.什么是前端路由1.1路由器1.2后端渲染、路由1.3前端路由发展阶段前后端分离SPA单页面富应用2.url栈操作2.1创建项目2.2更改界面url不刷新界面更改url的hasehtml5的history模式3.安装使用3.1安装3.2使用3.2.1vue-router引用3.2.2vue-router使用创建路由组件配置路由关系使用路由标签默认路径url路径带有#号router-link属性配置代码控制跳转restful风格的url传值路由懒加载项目打包4.嵌套路由5.参数传递6.导航守卫7.k原创 2020-12-17 16:22:17 · 272 阅读 · 1 评论 -
VUE重复路由跳转Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to
重复跳转异常问题如果重复跳转相同的界面会产生如下的错误,这时可以自行判断跳转时拒绝跳转到相同的界面如果使用的是 this.$router.push或者router-link to,则在router下的index将异常catch住就可以了const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return originalPush.call(this, locati原创 2020-12-15 15:59:49 · 6898 阅读 · 5 评论 -
vuecli-脚手架,安装使用及目录详解
文章目录遇到的错误安装脚手架错误vue ui启动错误一、安装脚手架二、脚手架21.初始化2.工程配置说明package.jsonbuild命令解析dev命令解析package.json-lock.jsonconfig目录static目录.babelrc.editorconfig忽略配置文件eslint检查规则文件css转化配置文件(一般不会修改)index.html三、代码检查四、runtimecompiler与runtimeonly区别区别Vue程序运行过程runtimeonly,render方法详解五、原创 2020-12-10 17:53:47 · 2961 阅读 · 1 评论 -
手写vue轮播图
这是效果图,上边的vue是脚手架自动生成的github地址https://github.com/1142235090/vue-banner_template原创 2020-12-09 09:34:19 · 531 阅读 · 1 评论 -
VUE,WebPack搭建本地服务器
webpack简介中文文档地址https://www.jqhtml.com/7626.html是一个javascript应用的静态模块儿化方案,主要包含模块和打包。类似工具 grunt/gulp、rollup他们把AMD、CMDCommonJs、ES6进行转化,转化成浏览器能识别的代码或文件,这样就可以做到一个文件一个模块。webpack是为了模块化开发而使用的,文件压缩、依赖是基本的功能。简要描述:对引用的js文件进行打包,需要的函数方法就加载进来,不需要的就不加载避免为了使用一个方法要引用原创 2020-12-08 08:55:30 · 446 阅读 · 2 评论 -
VUE学习路线
文章目录1.VUE安装配置和其生命周期(估算学习时长4小时)2.VUE值绑定、表单数据双向绑定操作语法(估算学习时长2小时)3.VUE计算属性、修饰符、diff渲染机制、数组操作(估算学习时长2小时)4.Vue语法糖(估算学习时长1小时)5.组件化(估算学习时长4小时)6.Vue插槽、编译作用域及编译作用域插槽(估算学习时长3小时)7.模块化开发(估算学习时长1小时)1.VUE安装配置和其生命周期(估算学习时长4小时)连接地址2.VUE值绑定、表单数据双向绑定操作语法(估算学习时长2小时)连接地址原创 2020-11-24 18:09:17 · 955 阅读 · 0 评论 -
Vue模块化开发
commonJs模块化需要解析,例如nodejs导出语法将getInGrid 导出export function getInGrid (parameter) { return axios({ url: api.grid + '/in', method: 'get', params: parameter })}也可以这样写,但export default只能存在一个function getInGrid (parameter) { return ‘aaa‘;原创 2020-11-24 17:40:47 · 282 阅读 · 0 评论 -
Vue插槽、编译作用域及编译作用域插槽
文章目录slot插槽匿名插槽具名插槽对插槽进行命名编译作用域作用域插槽例子github 例子地址slot插槽匿名插槽模板中使用插槽则增加标签,标签内部的html代码则是默认值<template id="templates"> <div> <h1>按钮</h1> <slot><p>默认插槽</p></slot> <button v-for="(i原创 2020-11-18 17:22:31 · 593 阅读 · 0 评论 -
Vue组件化
组件化组件的使用创建组件构造器Vue.extend()创建组件构造器注册组件Vue。component()注册组件使用组件Vue实例范围使用组件全局组件与局部组件全局组件//全局组件 //1.创建组件构造器对象 const cpnC = Vue.extend原创 2020-11-18 15:57:22 · 1518 阅读 · 0 评论 -
Vue语法糖
语法糖bindhtml标签内可以使用:的方式快速将vue对象的数据和标签属性对应起来例如:title=“title”on使用@则可以将事件和事件处理方法对应起来例如@click=“click()”组件构造注册组件时第二个参数可以直接实现组件构造器就不用单独定义组件构造器了局部组件可以直接写在components中Vue.component('cpn',{ tenplate:` <div>模板</div> `})...原创 2020-11-18 14:39:21 · 462 阅读 · 0 评论 -
VUE值、表单操作语法
文章目录值操作语法Mustache 胡须语法v-oncev-for 遍历数据v-html 直接当作html加载进入v-pre 不经过编译直接添加进入dom节点v-cloak 斗篷动态绑定语法v-bind 绑定vue值和属性动态绑定并切换classv-on用法生成列表并且点击切换颜色值操作语法Mustache 胡须语法双大括号引用vue变量中的变量值message可能是data中的值也可能是计算属性方法{{message}} 单取值{{message+message}} 运算{{message}原创 2020-11-16 16:38:15 · 694 阅读 · 0 评论 -
VUE安装配置和其生命周期
文章目录安装vsCodevue生命周期vue基础 一个简单的vue和html配合使用的示例(拷贝并不能直接使用)安装vsCode可以看一下视频跟着安装https://www.bilibili.com/video/BV1GV411Z7si?p=1vue生命周期vue基础 一个简单的vue和html配合使用的示例(拷贝并不能直接使用)html示例<div id="app-5"> <h1>5.计数器</h1> click中可以原创 2020-11-16 16:32:46 · 1148 阅读 · 0 评论 -
VUE计算属性、修饰符、diff渲染机制、数组操作
计算属性html var app13 = new Vue({ el:'#app-13', computed:{ count原创 2020-11-16 17:13:36 · 393 阅读 · 0 评论