![](https://img-blog.csdnimg.cn/20191016205219837.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
VUE
vue及相关生态
Garrettzxd
没有那么多可以说的
展开
-
vue与react区别
最近一段时间使用react + typeScript开发新对项目,说实话体验不是很好一是可能由于之前一直使用vue + js,对比react两个框架还是有明显差别对二是可能一次性接受太多的新知识,消化不完,react + typeScript做图片处理项目,很多图片图形处理在前端完成所以大家新项目做技术选型的时候还是要慎重一些,一次改变太大并不利于新项目的开发,因此可以现在不重要的模块...原创 2020-02-23 19:58:49 · 669 阅读 · 2 评论 -
vue响应式对象
在vue中与视图中绑定的数据,其数据的变化会驱动视图的更新,这是因为vue是响应式那么有没有那么一种情况数据的变化视图没有变化呢?答案肯定是有的,例如对象的属性变化vue并不能监听到,因此数据的变化并不能驱动视图更新vue也提供了$set方法来更新对象属性值的变化,但是也会有奇怪的现象比如<template> <div class="test"> ...原创 2020-02-21 20:59:16 · 1302 阅读 · 0 评论 -
location.hash详解
了解vue-router原理中更新URL但不重载页面原理之一location.hash1.存在形式及意义一般情况下为URL后 "#" 及其后面一部分组成,如http://www.test.com/#/something,其中http://www.test.com为真实的路径,而#/something则为网页中的位置,称之为锚点在访问锚点时会自动跳刀锚点所在的网页位置,通常有两种方式作为锚点<...原创 2018-06-12 21:20:57 · 15837 阅读 · 0 评论 -
VUE keep-alive理解分享
在vue中keep-alive能够被经常使用到,下面总结下使用方法、技巧、概念1.通常用来包裹组件使用,本身没有意义,不会产生任何可视的元素,与component一起使用<keep-alive> <component :is="view"></component></keep-alive>2.在包裹组件时可以默认缓存组件,所谓...原创 2019-03-04 21:35:35 · 732 阅读 · 0 评论 -
vue过滤器filters
在vue中有个类似实例组件中computed的资源选项,那便是过滤器filters,为什么说类似呢,因为他们都可以对已有的数据进行加工再返回加工后的数据,但是两者又有着明显的区别,下面先阐述什么是vue过滤器1.用途:常在v-bind与{{}}里使用2.本质:是声明的函数,最终返回结果3.声明:可在实组件例局部声明也可在全局声明 使用方法如下声明过滤器<temp...原创 2018-08-06 22:18:42 · 438 阅读 · 0 评论 -
vue高级组件之provide / inject
在vue中不同组件通信方式如下1.父子组件,通过prop2.非父子组件,通过vuex或根vue转载器 通常是以上两种情况,然而还有一种比较特殊的情况,即孙子组件或更深层次的组件通信1.下面是a.vue<template> <div class="test"> <son prop="data"></son> </原创 2018-08-04 09:30:06 · 35303 阅读 · 9 评论 -
利用vue-router改善数据获取
有时候我们会对用户有个性化设置,比如在A页面用户可以选择性的展示若干个模块,是否展示的判断标准存在数据库,因此路由到这个页面时需要调用接口获取数据判断到底是哪些模块要显示,哪些是不需要显示的正常情况下在路由导航到此页面创建完成时调用接口获取数据会有不好的用户体验,此时会有页面抖动现象<template> <div class="text"> <span...原创 2018-07-31 22:26:47 · 488 阅读 · 0 评论 -
vue实现路由切换改变title
由于vue项目通常是单页应用,因此在入口文件index.html只有一个title,单页所展示的若干页面只是随着路由的切换而在同一个index.html上不同的渲染而已,因此此时的title属性是不会随着页面的切换而变更的那么想实现路由切换title变换可以通过vue-router的导航守卫来实现,最简单的的目录结构可如下所示├── index.html├── main.js├── api│...原创 2018-07-12 21:37:55 · 3668 阅读 · 0 评论 -
vuex代码结构
vuex是一套相对独立的代码,因此可以抽象出到单独的文件夹里,那么比较好的代码结构是啥样的?话不多说,以下是vuex比较好的代码结构├── index.html├── main.js├── api│ └── ... # 抽取出API请求├── components│ ├── App.vue│ └── ...└── store ├── index.js ...原创 2018-07-06 21:34:19 · 728 阅读 · 0 评论 -
vuex基础理解
vuex是vue的一个插件,下面要从以下三方面来初步了解以下vuex1.vuex是什么官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化通俗解释:官方解释我不会自己去看?还要你解释(手动滑稽),于是就有了通俗解释,vuex可以把它理解为是在项目内全局声明的一些通用变量(注意是可以理解为...原创 2018-07-05 20:43:07 · 317 阅读 · 0 评论 -
vue-router导航守卫
导航守卫这个名字听起来略微有点中二(手动滑稽)回归正题,导航守卫大体上分为以下三类:1.全局守卫钩子2.独享守卫钩子3.路由组件守卫钩子下面详细说明以上三种守卫钩子包含的方法及调用时序1.全局守卫钩子全局守卫顾名思义是在路由全局执行,即在路由切换时无差别的执行钩子(如果声明的话)全局守卫钩子函数有三种const router = new VueRouter({...});//全局前置守卫rou...原创 2018-07-03 22:37:48 · 874 阅读 · 0 评论 -
vue-router路由信息对象属性
vue路由对象为this.$route,下面详细列一下该对象属性的详细信息属性名类型读写说明$route.pathstaring只读当前路由的名字(一般为#后面的部分,但不包含query查询值)如:http://example.com/#/login?name=aathis.$route.path; //输出“/login”$route.queryobject只读可访问携带的查询参数如:th...原创 2018-07-02 20:48:37 · 7152 阅读 · 3 评论 -
vue-router传参
vue-router可以在切换时携带参数从A页面到B页面由此可以实现两个页面之间的通信,vue-router目前可用路由方式如下1.普通路由,没有携带任何参数const router = new VueRouter({ routes: [ { path: '/', component: Hello }, ]})2.动态匹配路由const router = new VueRoute...原创 2018-06-29 21:15:28 · 291 阅读 · 0 评论 -
vue插件初探
vue插件很多,也有官方插件,vue插件定位并不死板,按照官方说法是如此的先上vue插件文档,不熟悉的可自行查阅先vue插件官方文档插件一般有一下几种(来自官方文档)1.添加全局方法或者属性2.添加全局资源:指令/过滤器/过渡等3.通过全局 mixin 方法添加一些组件选项4.添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现5.一个库,提供自己的 API,同时提供上面提...原创 2018-06-20 21:45:15 · 238 阅读 · 0 评论 -
HTML5 history详解
最近研究vue-router单页转跳而不向服务器请求的原理,主要是HTML5 history以及hash的应用,支持history时使用history模式下面详细学习了一下常用的history相关的API常用API:1.history.length:返回当前页面所产生的历史记录个数,即在同一个浏览器tab下产生的历史记录;2.history.pushState(state,...原创 2018-06-11 20:45:37 · 5241 阅读 · 0 评论 -
Vue子组件状态更新
背景:在一个页面多次重复的使用同一个子组件(比如在列表里根据数据不同重复渲染该子组件)时,由于数据的改变子组件状态未能得到及时的更新例子如下:数据以表格的形式显示出来,循环的渲染若干行表格,七中有一列是引入子组件如下所示 子组件如下:export default{ props: ['name'], data() {原创 2017-12-11 20:53:06 · 12589 阅读 · 0 评论 -
Vue获取分发内容的宽度
Vue在需要获取分发内容的宽度(内容不换行的情况下)子组件有默认的内容(即在父组件没有分发内容时也会有内容)例: 这里是子组件默认内容 父组件分发到子组件的内容直接在子组件mounted函数中获取时获取不到detial正确的值:document.getElementById("detial").offsetWidth此时的offsetWidth为父组件分发原创 2017-11-15 21:43:17 · 2625 阅读 · 0 评论 -
Vue 插槽分发内容
1.在Vue工程化开发中是以组件为单位的2.组件个人理解是将常用或通用的代码片段独立起来,需要时引用该组件避免重复的codeing3.但是在Vue开发中很多是部分结构一样,如在一个Vue应用中每个页面整体外围框架相同但是内容各有差异(header,body,footer结构一样,但是内容差异)4.这时候可以将通用的结构封装起来,将不同的内容通过Vue插槽分发到指定的位置,即可避免复制同原创 2017-11-02 22:15:18 · 764 阅读 · 0 评论