vue
LTIven
爱闻,爱问,爱文
展开
-
vue中如何对象和数组数据的变化产生响应式
做checkbox多选功能的时候遇到了一个坑,逻辑怎么看都对,但是就是有bug,最后发现数组那里值变了页面勾选没有重新渲染。换了关键词搜索找到了相关方法。其实之前读文档教程的时候看到过这里,但是只有真的使用之后才会有最直接的感触。-------------------------------------------数组更新检测变异方法Vue 包含一组观察数组的变异方法,所以它们也将会触...转载 2019-11-19 09:38:31 · 1545 阅读 · 0 评论 -
如何在vue项目中获取dom节点
一、问题由来在vue项目中,我需要获取一个dom的offsetHeight、scrollHeight等,但是不知道如何在vue中获取一个dom节点。毕竟是新手,所以在看了很多大佬的博客外,打算做一个小的总结,以便梳理知识,和大家共勉以及一起进步。二、3种方法1、利用js原生的获取dom节点的方法:document.getElementById等2、可以在vue项目中引入jquery,具体怎...原创 2019-11-14 21:42:14 · 4505 阅读 · 0 评论 -
vue中获取dom元素
最近在项目中要用到拦截器,坦白说是第一次听说这玩意,所以资料查了好久,现在也算是明白了拦截器的作用。我的理解就是拦截每一次你的请求和响应,然后进行相应的处理。比如一些网站过了一定的时间不进行操作,就会退出登录让你重新登陆页面,当然这不用拦截器你或许也可以完成这功能,但是会很麻烦而且代码会产生大量重复,所以我们需要用到拦截器在src目录下的api目录创建一个js文件import axios fr...转载 2019-11-14 14:29:53 · 489 阅读 · 0 评论 -
vue中的修饰符的应用
修饰符.lazy在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:<!-- 在“change”时而非“input”时更新 --><input v-model.lazy="msg" >...转载 2019-09-20 10:38:04 · 97 阅读 · 0 评论 -
v-if与v-show二者性能比较
先来说说v-ifv-if:根据表达式的值在DOM中生成或者移除一个元素,值是false就会在DOM中删除,反之会克隆相应元素到DOM中 支持加在<template>标签上再说说v-showv-show是根据表达式的值来显示或者隐藏元素,根据的是display的值 不支持加在<template>标签上划重点在切换v-if的时候,vue内部有一个局部编译/卸载的过...转载 2019-09-20 09:53:39 · 559 阅读 · 0 评论 -
Vue双向绑定原理,教你一步一步实现双向绑定
当今前端天下以 Angular、React、vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋。所以我们要时刻保持好奇心,拥抱变化,只有在不断的变化中你才能利于不败之地,保守只能等死。最近在学习 Vue,一直以来对它的双向绑定只能算了解并不深入,最近几天打算深入学习下,通过几天的学习查阅资料,算是对它的原理有所认识,所以自己动手写了...转载 2019-09-18 22:15:02 · 156 阅读 · 0 评论 -
vue中的sync
Hello!大家好今天给大家讲一下我最近了解到的一些新的东西在这里给大家分享一下。一:.sync官方推荐使用一种update:my-prop-name 的模式来替代事件触发,目的是为了优雅而不粗鲁的实现父子组件间的双向绑定!先来完成一个小功能:通过父组件按钮将子组件显示出来。父组件代码(通常的做法): <template> <div> &...转载 2019-09-18 10:34:37 · 420 阅读 · 0 评论 -
v-model实现原理和详情
以下示例是用单页面的形式写的。a.vue // a.vue是父级引用组件b.vue<template><!-- 这儿是组件的父级,也就是组件的实例。实例本来应该定义事件来监听子组件的一切“异动”, 但v-model呢却是给组件内部加个model:{prop:...转载 2019-09-18 09:58:12 · 1518 阅读 · 0 评论 -
vuex状态持久化管理
vuex可以进行全局的状态管理,但刷新后刷新后数据会消失,这是我们不愿意看到的。怎么解决呢,我们可以结合本地存储做到数据状态持久化,也可以通过插件vuex-persistedstate。1.手动利用HTML5的本地存储方法1、vuex的state在localStorage或sessionStorage中...原创 2019-09-16 17:08:42 · 301 阅读 · 0 评论 -
vuejs+layui的使用
Vue2+VueRouter2+webpack+Axios 构建项目实战目录以及文件结构之前在项目中一直使用的是 element-ui但需要使用到流加载数据,这个 element-ui 中没有没关系,这个流加载 在layui 中有现成的,下面让我们使用 layui :官网:http://www.lay...转载 2019-09-09 01:00:53 · 1257 阅读 · 0 评论 -
在vue项目中使用图标文字
字体图标可以从阿里巴巴的矢量图标库里下载:https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4&type=1比方说我需要一个搜索图标,可以把其先添加到购物车 在项目里可以把添加过去的icon下载下来 下载下来的压缩包解压出来有这么多文件:其中有用的就这一...转载 2019-09-08 20:34:22 · 2363 阅读 · 0 评论 -
vue-cli3.0配置详解
这次给大家带来vue-cli3.0配置详解,使用vue-cli3.0配置的注意事项有哪些,下面就是实战案例,一起来看一下。新建项目12345678# 安装npm install -g @vue/cli# 新建项目vue create my-project# 项目启动npm run serve# 打包npm run build打包后的文件,对引用资源注入了预加载(preload/prefetch),...转载 2019-09-06 17:10:02 · 526 阅读 · 0 评论 -
Vue新建项目的时候,自己的一些总结
我们在之前搭建一个vue项目直接按照vue官方文档里面的安装指示npm install -g vue-clivue init webpack my-project这两行代码是指引我们创建一个vue项目,可是尴尬的是,现在vue-cli好像不好使了。 后来仔细看了一下vue的官方文档。 另附一VUE CLI的官方地址 https://cli.vuejs.org/点进去一看,大吃一惊,...转载 2019-09-04 16:48:52 · 98 阅读 · 0 评论 -
用常量替代 Mutation 事件类型之在vue组件中提交数据(报错[vuex] unknown mutation type)
vuex中为了代码看起来简洁清晰,常常使用常量替代Mutation事件类型,但是在vue组件中怎么使用常量执行提交操作,也让我纠结了半天,这里记录下。那么在vue组件中怎么执行提交操作呢,我的直观想法是这样的:这样的话会报错:[vuex] unknown mutation type: mutationTypes.SOME_MUTATION1正确的做法是:mutationTypes...转载 2019-09-04 08:46:28 · 3661 阅读 · 0 评论 -
vue学习五之绑定class、v-bind:style(对象语法、数组语法))
文章目录绑定 HTML Class内联样式在模板里内联样式不在模板里绑定返回对象的计算属性数组语法class 列表class 列表使用三元表达式class 列表使用对象语法class 综合练习用在组件上绑定内联样式v-bind:style绑定 HTML Class我们可以传给 v-bind:class 一个对象,以动态地切换 class:内联样式在模板里 <div id="div1...转载 2019-08-22 09:16:30 · 350 阅读 · 0 评论 -
Vue核心技术-1,认识Vue,js
一,前言之前写过一套AngularJs的教程,由于种种原因最终没有更新上来,现在Angular没落Vue崛起了,这次就直接写到博客这套Vue教程也将采用和Vue一样的"渐进式"方式进行更新初期以覆盖Vue核心知识点为主,后续逐渐对相关知识点进行扩充和完善主要的扩充和完善将以Vue书中作者的独到见解,Vue面试相关,Vue核心功能源码分析,实际开发应用及Vue生态圈等为方向总之,这...转载 2019-08-20 10:28:08 · 131 阅读 · 0 评论