vue重修
文章平均质量分 57
zhangyizuishuai
这个作者很懒,什么都没留下…
展开
-
大文件的断点续传再次理解
<template> <div id="app"> <h1>App3</h1> <el-upload drag action :auto-upload="false" :show-file-list="false" :on-change="changeFile" :on-success="handleSuccess"> <i class="el-icon-upload"></i>原创 2021-01-02 20:12:49 · 235 阅读 · 0 评论 -
多文件上传
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- import Vue before Element --><原创 2020-12-18 08:21:02 · 142 阅读 · 0 评论 -
cookie跨域限制问题这属于浏览器的兼容问题
当遇到前端携带cookie访问后端却失败的时候,在谷歌高版本就需要设置如下↓进入谷歌浏览器,输入chrome://flags↓然后在搜索输入框内输入samesite↓前两项默认为Default,我们需要把它改成Disabled↓这是因为谷歌限制了cookie的跨域↓需要我们把这个跨域限制解决了才可以种下setcookie↓...原创 2020-11-13 16:36:50 · 511 阅读 · 0 评论 -
原生js以及vue通过自定义指令实现懒加载的原理
如下是vue通过自定义指令实现懒加载IntersectionObserver 配合自定义指令的钩子 bind 去实现vue的懒加载<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&原创 2020-11-07 11:27:03 · 387 阅读 · 0 评论 -
Vuex的相关内容
// vuex// 全局状态管理// 1.多个组件共享状态 多个组件使用同一个数据// 2.任何一个组件发生改变 其他组件也要跟着发生相应的变化// ###基本使用方法// 一.创建全局状态管理的实例// 二.注册// 三.在组件里使用全局状态值// a.获取渲染全局状态值// b.修改全局状态值// ### 最简版// a.在组件里通过$store.state获取全局状态管理并且进行渲染// b.通过$store.commit方法触发mutation 修改全局状态值 整个页原创 2020-11-06 18:55:29 · 98 阅读 · 0 评论 -
VUE组件化开发中组件内部的Data为什么是一个函数?
VUE组件化开发组件内部的Data为什么是一个函数?• data :在组件中必须是一个函数(为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次,就分配几个内存地址,他们的地址都不一样,所以每个组件中的数据不会相互干扰,改变其中一个组件的状态,其它组件不变。)这个是详细链接• https://www.cnblogs.com/yuerdong/p/11395410.html...原创 2020-11-06 18:54:25 · 130 阅读 · 0 评论 -
vue.config.js配置路径别名等
超级低配版【有别名用法说明】@表示src目录relative modules报错是相对路径地址写错了/表示根目录一般根目录为public目录var path = require("path")function resolve(dir) { return path.join(__dirname, dir)}module.exports = { lintOnSave: false, //关闭eslint文件 devServer: { proxy: { //配置代理服务器原创 2020-11-06 18:52:42 · 3434 阅读 · 0 评论 -
Vue当中动态绑定类名
Vue当中动态绑定类名 123 <!-- 动态绑定类名方法有三种 一种是对象的写法[对象写法一般用在布尔值的判断上] <button class="zy-button" :class="{'is-plain':plain}"> index===currentIndex这个返回一个布尔值,如果是false则不加is-plain这个类名,如果为true则加 <button class="zy-button" :class="{'is-原创 2020-11-04 11:44:20 · 1034 阅读 · 0 评论 -
前端须知的xss攻击
xss攻击用户在表单中输入JavaScript脚本,以及a标签并且a标签内部嵌套一个img标签,通过这种方式获取用户的cookie或者写循环导致用户页面卡顿。在提交表单的时候,如果用户在文本框内输入了循环的脚本,比如写了一个定时器死循环,这样把js代码发送到后端或者前端运行的话会导致服务器消耗性能或者前端网页卡顿一般解决这个问题的话,我们前端解决的方案就是编译提交文本框的内容,并且把js脚本转化为文本的形式,或者把一些关键字比如...原创 2020-11-04 11:40:56 · 394 阅读 · 0 评论 -
vuecli当中.env.development和.env.development文件的作用
原创 2020-11-04 11:34:46 · 2563 阅读 · 0 评论 -
Vue当中scope局部样式的实现原理
当你在单个组件的style标签的内部加上了scoped,在编译的时候就会给当前组件的html标签加上一个data-v-hash的属性并且属性的值是哈希值,我们的样式中用选择器去选到对应的哈希值,从而达到但组件样式的局部化.VUE和React当中key的作用使用key的场景:同级别同类型的节点的时候需要加key虚拟DOM虚拟DOM其实就是把标签的信息,属性,text这些内容以对象的形式储存起来显示diff算法:在数据发生更新改变的时候,diff算法会对比DOM(对象)前后状态,然后找出差异,只更新原创 2020-11-03 00:48:34 · 1186 阅读 · 0 评论 -
VUE当中hash路由的原理
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hash路由的原理</title></head><body> <h1>原创 2020-11-03 00:46:13 · 680 阅读 · 0 评论 -
axios的全局配置★拦截器
axios的全局配置axios.defaults.baseURL=="http://localhost:2005/api/aab"//配置基础路径axios.defaults.timeout=5000//配置请求时间如果在规定时间内没有返回结果就报错// timeout设置最大响应时间,左边设置的是5秒。// 就是如果向后端请求如果五秒都没有回来响应就会自动断开请求。axios.get("http://localhost:2005/api/aab", { params: {原创 2020-11-03 00:38:11 · 478 阅读 · 0 评论 -
axios迸发请求
axios的迸发请求方案一利用Promise的all处理 // axios迸发请求 axios.all([axios.get("http://localhost:2005/api/aab", { params: { id: "1", name: "马嘉宁" } }), axios.post( "http://localhost:2005/api/ppt", 'id=1&name=马嘉宁原创 2020-11-03 00:33:46 · 86 阅读 · 0 评论 -
axios重修
axiosaxios的cdn<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>axios是异步请求的工具axios是基于Promise对ajax的封装axios发送get无参请求 axios({ url:"http://localhost:2005/api/aab", method:"get" }).then(func原创 2020-11-03 00:32:10 · 81 阅读 · 0 评论 -
vue组件封装之三方案封装dialog组件
三种思路封装dialog组件封装dialog组件需要知识有1.插槽【匿名插槽,具名插槽】2.transition动画,以及CSS3的动画【因为用到了CSS3所以会有兼容性的问题】如果考虑兼容就需要另想动画效果的方案。3.props传参4.style标签当中的scope的用法以及详细解释【深度选择器方面的知识】.5方案的三种写法其实就是子组件控制父组件的三种方案【后来又多想到了一个方案就是子传父的】然后又想到了VueX(多方案无非就是子父传参的多总方式,还有事件总线等等等等)1.sync修饰符原创 2020-10-23 09:51:06 · 1981 阅读 · 0 评论 -
Vue当中的sync修饰符
vue当中sync修饰符在vue当中如果父组件写了修饰符sync,那么在子组件如果想改变修饰符sync修饰的父组件属性,那么就在子组件里触发一个函数// 吧并且在函数内部写this.emit方法("update:参数1","参数2")参数一是你在父组件中sync修饰的属性名,参数二是你要把父组件中sync修饰符修饰的属性改为什么值。sync的原理:子组件当中写this.emit方法("update:参数1","参数2") 参数一是你在父组件中sync修饰的属性名,参数二是你要把父组件中sync修饰符修原创 2020-10-23 09:36:21 · 121 阅读 · 0 评论 -
vue组件封装之按钮封装★
vue实战当中的按钮封装用到的知识点1.动态绑定类名方法 动态绑定类名方法有三种 一种是对象的写法 <button class="zy-button" :class="{'is-plain':plain}"> index===currentIndex这个返回一个布尔值,如果是false则不加is-plain这个类名,如果为true则加 <button class="zy-button" :class="{'is-plain':index===curre原创 2020-10-22 15:45:52 · 1703 阅读 · 0 评论