vue
文章平均质量分 69
雪爪鸿泥
好好学习,天天向上
展开
-
前端跨域解决方案
一、什么是跨域在前端领域中,跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax 只能使用同源的限制。跨域本质是浏览器基于同源策略的一种安全手段。什么是同源策略同源策略(Sameoriginpolicy),是一种约定,它是浏览器最核心也最基本的安全功能。所谓同源(即指在同一个域)具有以下三个相同点:协议相同(protocol)主机相同(host)端口相同(port)同源策略限制以下几种行为:Cookie、LocalStorage 和 IndexDB 无法读取DOM和JS对象无原创 2021-01-05 15:07:03 · 76 阅读 · 0 评论 -
对于 MVVM 的理解
对于 MVVM 的理解MVVM 表示的是 Model-View-ViewModelModel:模型层,负责处理业务逻辑以及和服务器进行交互。View:视图层,负责将数据模型转化为 UI 显示出来,可以简单的理解为 HTML 页面。ViewModel:试图模型层,用来连接 Model 和 View ,是 Model 和 View 之间的桥梁。每当V层获取或者保存数据的时候,都要由VM层做中间的处理,从而交给M层。前端页面使用 MVVM 的思想,主要是为了使前端开发更加方便。因为 MVVM 提供了原创 2020-12-31 15:22:04 · 4414 阅读 · 1 评论 -
Vue 中组件和插件有什么区别?
我们在 vue 开发的时候,经常会用到组件和插件,name组件和插件有什么区别呢?现在就来总结一下。一、组件是什么?官方对组件的定义是:组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件。组件的优势降低整个系统的耦合度,在保持接口不变的情况下,我们可以替换不同的组件快速完成需求,例如输入框,可以替换为日历、时间、范围等组件作具体的实现。调试方便,由于整个系统是通过组件组合起来的,在出现问题的时候,可以用排除法原创 2020-12-29 15:59:34 · 2003 阅读 · 0 评论 -
Vue中的 $nextTick 怎么理解?
在上一篇vue中 beforeRouteLeave 生命周期函数中我们使用了$nextTick,那么什么是 $nextTick?一、NextTick 是什么?官方对其定义是:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。我们可以理解成,Vue 在更新 DOM 时是异步执行的,当数据发生变化的时候, vue 将开启一个异步更新队列,试图需要等队列中所有数据变化完成之后,再统一进行更新。举例说明一下:HTML 结构<div id="a原创 2020-12-29 14:55:44 · 629 阅读 · 0 评论 -
vue中 beforeRouteLeave 生命周期函数
beforeRouteLeave需求描述在使用 element-UI的table 的时候,有这么一个需求。从一个页面切换到另一个页面,再切回来的时候,滚动条的位置不变。需求:滚动浏览列表页,出现滚动条,点击用户名之后,跳转到商铺管理(发生路由跳转)。从商铺列表返回到信息列表之后,列表页还是之前所浏览的位置,而不是到列表页的顶部。解决方案:使用 beforeRouteLeave 来记录路由跳转之前滚动条的位置使用keepAlive来缓存信息列表状态,路由切换到信息列表的时候回触发 activat原创 2020-12-29 14:32:10 · 54705 阅读 · 6 评论 -
vue 中为什么不建议 v-if 和 v-for 一起使用
在实际开发中,会遇到这样的情况,需要先判断是否满足条件,然后再循环渲染列表,此时就涉及到了 v-if 和 v-for 一起使用的问题。相信你们也遇到过,当将两者同时都写在一个标签里面的时候,就会出现红线警告,原因是什么呢?怎么去解决呢?下面本文就这个问题进行解释。一、作用v-if 指令用于在满足条件下的渲染内容。这块内容只会在表达式为true 的时候才会被渲染。v-for 指令是用一个数组来渲染列表。v-for 指令需要使用 item in list 形式的特殊语法,其中 item 是迭代的每一项的元原创 2020-12-29 11:17:16 · 1115 阅读 · 1 评论 -
vue 中的 keep-alive
一、什么是 Keep-alivekeep-alive 是 vue 中的内置组件,能够在组件切换过程中将状态保留在内存中,防止重复的渲染 DOM;keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们;keep-alive 可以设置一下 props 属性:include - 字符串或者是正则表达式。只有名称匹配的组件才能被缓存exclude - 字符串或者是正则表达式。max - 数字。最多可以缓存多少组件实例。关于 keep-alive 的基本用法<keep-原创 2020-12-28 17:04:36 · 5264 阅读 · 0 评论 -
vue 项目中对 axios的封装
一、axios 是什么axios 是一个轻量的 HTTP 客户端。基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端。自Vue2.0起,尤大宣布取消对 vue-resource 的官方推荐,转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选特性:从浏览器中创建 XMLHttpRequests从 node.js 创建 http请求支持 Promise API拦截请求和响应转换请求数原创 2020-12-28 14:28:29 · 224 阅读 · 1 评论 -
vscode+vetur0.31.0,无法格式化.vue文件
https://blog.csdn.net/jsjcmq/article/details/110926639https://blog.csdn.net/centor/article/details/81172101原创 2020-12-25 15:26:33 · 397 阅读 · 1 评论 -
vue 中 scoped 的原理
之前写 vue 页面的时候,使用的是 快捷方式,打出 vue 之后使用 tab 键,就可以快捷的创建出 vue 页面的 template,script 和 style,之前一直有注意到 style 中有一个 scoped 的属性,但是一直不知道是干啥的。今天一个前辈给我讲了,所以记录下来,以供日后复习。原创 2020-12-25 14:53:02 · 376 阅读 · 0 评论 -
vue v-for 中 :key 的作用
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有唯一 id。这个特殊的属性相当于 Vue 1.x 的 track-by ,但它的工作方式类似于一个属性,所以你需要用 v-bind 来绑定动态值(在这里使用简写):先来讲一个例子:现在假设你有三个子组件,每个子组件里面有一个「有状态的」孙子组件。点击第二个,将第二个删除,将会出现什么情况?页面中会显示 序号为0 和3 吗?不会,会出现下面的结果:原创 2020-12-25 10:25:33 · 3582 阅读 · 2 评论 -
vue 是什么?webpack 是什么?
vue 是什么?vue 是一套用于构建用户界面的渐进式框架。框架和库之间的区别库和框架的区别1、库:也就是我们说的插件,是一种封装性很好的特定方法的集合,对项目的侵入性很小,提供给开发者使用,控制权在使用者手上,如果某个库无法完成某些需求,可以很容易的切换到其他的库实现需求。2、框架:是一套架构,会基于自身特点向用户提供一套相当完整的解决方案,而且控制权在框架本身。对项目的入侵性较大,使用者要按照框架规定的某种特定规范进行开发,项目如果需要更换框架,则需要重新架构整个项目。目前的框架有哪些?库有原创 2020-12-24 16:56:17 · 539 阅读 · 1 评论 -
vuex 中的 dispatch 和 commit 的使用
简而言之dispatch 异步操作 this.$store.dispatch(‘actions的方法’,arg); 调用 actions 里面的方法。commit 同步操作 this.$store.commit(‘mutations的方法’,arg);调用 mutations 里面的方法。use.jsimport { login, logout, getInfo } from '@/api/user'import { getToken, setToken, removeToken } from原创 2020-12-02 11:36:36 · 2335 阅读 · 2 评论 -
vue-scroll的使用以及不滚动的问题
vue-scroll 的使用引入npm install vue-scroll --save-devmain.jsimport Vue from 'vue';import vuescroll from 'vuescroll';import vuescroll from 'vuescroll/dist/vuescroll.css';用法把需要滚动的内容用 vuecscroll 包裹起来即可<div class="detail-page"> <vue-scroll原创 2020-11-03 16:50:37 · 1534 阅读 · 0 评论 -
vue 中快速初始化页面快捷键
code-首选下-用户代码片段-新建全局代码片段-在输入框中新建名称为vue.json删除json文件内容,把下面的内容复制粘贴上{ "Print to console": { "prefix": "vue", "body": [ "<!-- $0 -->", "<template>", " <div></div>", "</template>",原创 2020-09-25 16:41:58 · 1577 阅读 · 0 评论 -
关于token 和 cookie、session 的用法选择
目的:保持登录状态不同:token(维持状态):前端和后台接口存在跨域问题,使用。cookie(客户端记录状态)和session(服务端记录状态):前端和后台接口之间不存在跨域问题,使用登录/退出功能...原创 2020-09-25 16:39:27 · 190 阅读 · 0 评论 -
去除全局的console.log
在开发中,经常会调试的时候增加console.log,但是打包后我们希望不显示console.log解决方式:路径:build/webpack.prod.conf.js代码:new UglifyJsPlugin({ uglifyOption:{ compress:{ warnings:false, drop_debugger:true, drop_console:true, p转载 2020-09-24 11:28:09 · 825 阅读 · 0 评论 -
webpack的安装
https://jingyan.baidu.com/article/a3a3f811230ee58da3eb8a6e.html原创 2020-09-24 11:29:21 · 67 阅读 · 0 评论 -
组件
一、定义Vue组件什么是组件:组件的出现,就是为了拆分 vue 实例代码量,能够让我们以不同的组件来划分不同的功能模块,将来根据功能的需要,调用对应的组件。组件化和模块化的区别:模块化:是从代码逻辑的角度进行划分,方便代码分层开发,保证每个模块的功能单一组件化:是从UI界面的角度进行划分,前端的组件化,方便UI组件的重用1.1 创建组件的方式一<div id="app">...原创 2020-04-19 16:52:47 · 114 阅读 · 0 评论 -
Vue实例的生命周期
生命周期钩子 = 生命周期函数 = 生命周期事件创建期间的生命周期函数:beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,但是还没有开始 编译模板beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中mounted:此时...原创 2020-04-19 16:48:40 · 82 阅读 · 0 评论 -
v-for、v-if、v-show
一、Vue指令之v-for和key属性1、迭代数组 <li v-for="(item, i) in list">索引:{{i}} --- 姓名:{{item.name}} --- 年龄:{{item.age}}</li>2、循环对象数组<p v-for="(item,i) in list">id:{{item.id}}--姓名:{{item.name}...原创 2020-04-19 16:45:51 · 165 阅读 · 0 评论 -
路由
一、什么是路由后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区...原创 2020-04-19 16:44:34 · 473 阅读 · 0 评论 -
动画
一、使用过渡类名实现动画1.1 HTML结构<div id="app"> <input type="button" value="toggle" @click="flag=!flag"/> <!--使用transition把要做动画的元素包裹起来--> <transition> <h3 v-if="flag" v-colo...原创 2020-04-19 16:40:12 · 108 阅读 · 0 评论 -
vue-resource发起get、post、jsonp请求
1、vue-resource发起get请求1 get请求定义getInfo(){ //当发起get请求之后,通过.then 来设置成功的回调函数 this.$http.get('http://localhost/day05/code/08-ajax-post.html').then(function(result){ //通过result.body 获得服务器返回的成功数据 cons...原创 2020-04-19 16:33:42 · 152 阅读 · 0 评论 -
过滤器、按键修饰符、自定义指令
1、定义一个 Vue 全局的过滤器 filter过滤器调用的格式: {{ name | 过滤器名称}}实例:将msg中的某个字符串进行替换<p> {{ msg | msgFormat }} </p> //调用过滤器//定义一个Vue 全局的过滤器,名字叫做 msgFormatVue.filter('msgFormat',function(ms...原创 2020-04-19 16:32:02 · 91 阅读 · 0 评论 -
Vue Devtools安装成功后无法启用Vue.js的问题
解决方法:1、打开允许访问文件网址的开关2、设置配置文件3、设置配置文件,将production===> development ,此时F12打开控制台,就会出现Vue4、解决成功...原创 2020-04-19 16:23:44 · 829 阅读 · 0 评论 -
在Vue中使用样式
一、vue中通过属性绑定为元素设置class样式<!--方式一:直接传递一个数组,class要用v-bind做数据绑定--><!--<h2 :class="['thin','italic']">{{ msg }}</h2>--> <!--方式二:三元表达式--><!--<h2 :class="['red',...原创 2020-04-19 16:18:55 · 488 阅读 · 0 评论 -
Vue初体验
一、Vue概况1、Vue.js是最火的一个框架,React(除了开发网站,还可以开发手机APP)是最流行的一个前端框架,Vue与Angular,React成为前端的主流框架!2、Vue.js是一套构建用户界面(客户端)的框架,只关注视图层,3、MVVM(Model-View-ViewModel)层是前端视图层的开发层思想,主要是把每个页面分成了M、V和VM层,VM是MVVM的核心思想。M保存...原创 2020-04-19 16:16:33 · 60 阅读 · 0 评论