Vue
文章平均质量分 69
二九君
这个作者很懒,什么都没留下…
展开
-
Vue使用nextTick获取最新的DOM
一、什么是Vue.nextTick()在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。 所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码。二、原理Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。三、应用场景在Vue生命周期的created()和mounted()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中在creat原创 2021-05-03 17:18:02 · 676 阅读 · 0 评论 -
Vue-router中的导航守卫(全局守卫、路由独享守卫、组件内守卫)
一、全局守卫1.router.beforeEach((to,from,next)=>{})2.回调函数中的参数,to:进入到哪个路由去,from:从哪个路由离开,next:函数,决定是否展示你要看到的路由页面。3. 如下例:main.js中设置全局守卫在main.js中,有一个路由实例化对象router。在main.js中设置守卫已是全局守卫。如下,判断to.path当前将要进入的路径是否为登录或注册,如果是就执行next(),展示当前界面。如果不是,就弹出alert,然后移至登录界面。转载 2021-03-02 10:53:47 · 602 阅读 · 0 评论 -
Axios框架的基本使用
一、什么是AxiosAxios就是一个基于Promise的,发送http请求的一个工具库。特点:支持Promise API拦截请求和响应。拦截请求,可以过滤请求参数;拦截响应,可以处理响应异常取消请求。请求可以手动取消二、在Vue中使用Axios1、安装Axios模块npm install --save-dev axios2、在index.js文件中引入Axiosimport axios from 'axios'new Vue({ // el: '#app', // ro原创 2021-03-02 00:07:27 · 235 阅读 · 0 评论 -
Vue-router中的路由懒加载(异步组件)
一、为什么使用路由懒加载当项目越来越大时,vue打包后的js文件也越来越大,这会是影响加载时间的重要因素。当构建的项目比较大的时候,懒加载可以分割代码块,提高页面的初始加载效率。二、懒加载的实现方式方法一 resolve这一种方法较常见。它主要是使用了resolve的异步机制,用require代替了import,实现按需加载,下面是代码示例:import Vue from 'vue'import Router from 'vue-router'// import HelloWorld from原创 2021-03-01 22:14:59 · 952 阅读 · 0 评论 -
Vue中this.$set的用法(解决数组、对象修改后不更新问题)
一、this.$set实现什么功能,为什么要用它?当你发现你给对象加了一个属性,在控制台能打印出来,但是却没有更新到视图上时,也许这个时候就需要用到this.$set()这个方法了,简单来说this.$set的功能就是解决这个问题的啦。官方解释:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’).二、怎么用它?举个例子:1.Vu原创 2021-03-01 21:53:19 · 30044 阅读 · 1 评论 -
Vue中mode hash和history的区别
对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义。前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求。为了达到这一目的,浏览器当前提供了以下两种支持:hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括原创 2021-03-01 20:21:47 · 267 阅读 · 0 评论 -
Vue中的watch以及watch和computed的区别
一、 watch是什么?监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值,用一个函数取代。简洁的说:watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。二、应用基本用法:当firstName值变化时,watch监听到并且执行watch中的firstName函数<div> <p>FullName: {{fullName}}</p> <p>FirstN原创 2021-02-26 21:24:14 · 2109 阅读 · 0 评论 -
Vue中的组件通信(六种方法详解)
一、关于组件通信组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。组件可以有以下几种关系:父子关系, 兄弟关系,隔代关系(可能隔多代)。本文总结了vue组件间通信的几种方式,如props、$emit/$on、vuex、$parent / $children、$attrs/$listeners和provide/inject。图示如下:二、组件通信的方式:方法一、props/$emit父组件A通过props的方式向子组件B传递,B t原创 2021-02-23 22:20:41 · 2781 阅读 · 0 评论 -
Vue插件的简单封装与使用(Toast插件)
一、组件和插件的区别与联系区别组件的使用频率往往大于插件组件的作用范围往往小于插件联系插件可以封装组件,组件可以暴露数据给插件二、 创建目录结构并初始化插件└── components └── toast ├── Toast.vue └── index.js Toast.vue:<!-- Toast.vue --><template> <div class="toast" v-show='isshow'> <div>原创 2021-02-23 20:14:54 · 602 阅读 · 0 评论 -
Vuex的基本使用与概念解析
一、什么情况下应该使用 Vuex?Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果不打算开发大型单页应用,应用够简单,最好不要使用 Vuex。一个简单的 store 模式就足够了。但是,如果需要构建一个中大型单页应用,就要考虑如何更好地在组件外部管理状态,Vuex 是不错的选择。二、基本使用在 Vue 的单页面应用中使用,需要使用Vue.use(Vuex)调用插件。将其注入到Vue根实例中。import Vuex from 'vuex'Vue原创 2021-02-22 23:36:15 · 337 阅读 · 0 评论 -
vue-router使用路由嵌套,二级路由
一、嵌套路由的使用场景:在选项卡中,顶部有多个导航栏,中间的主体显示的是内容;这个时候,整个页面是一个路由,然后点击选项卡切换不同的路由来展示不同的内容,就是中间的主体显示的是内容就是页面路由下的子路由,这就是路由中嵌套路由。二、使用方法:1.在router下的index.js配置路由映射,使用children数组来定义子路由{ path: '/home', component: Home, meta:{ title:'首页' }, // 路由嵌套原创 2021-02-19 23:11:50 · 702 阅读 · 0 评论 -
v-bind和v-model
一、v-bindv-bind可以动态绑定标签中属性的值,为单向绑定,当data值发生变化时才会变化 例如:<a v-bind:href="url">网络测试</a> //v-bind绑定href。new Vue({ ... data { url: "http://www.baidu.com" }})还可以通过v-bind来动态绑定类名:语法为:v-bind:class="{类名:布尔值}<h2 v-bind:class="{active:t原创 2021-02-08 22:52:40 · 933 阅读 · 0 评论 -
Vue组件中的data必须是一个函数
组件是可复用的Vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响。该组件被复用了三次,但每个复用的地方组件内的count数据相互不受影响,它们各自维护各自内部的count。能有这样效果正是因为上述例子中的data不是一个单纯的对象,而是一个函数返回值的形式,所以每个组.原创 2021-02-05 15:52:30 · 166 阅读 · 0 评论 -
Vue的生命周期和生命周期函数
一、什么是生命周期和生命周期函数每个Vue实例在被创建之前都要经过一系列的初始化过程,也就是说从开始创建、初始化数据、编译模板、挂载DOM、渲染-更新-渲染、卸载等这一系列过程,我们称为Vue 实例的生命周期。而生命周期函数就是提供给我们在Vue生命周期不同的时刻进行操作的机会。官方文档图如下:二、Vue提供的生命周期函数1、beforeCreate(创建前)表示实例完全被创建出来之前,vue 实例的挂载元素$el和数据对象 data 都为 undefined,还未初始化。2、create原创 2021-02-03 22:06:57 · 444 阅读 · 0 评论 -
Vue中的MVVM
一、为什么会有MVVM框架?在过去的10年中,我们已经把很多传统的服务端代码放到了浏览器中,这样就产生了成千上万行的javascript代码,它们连接了各式各样的HTML 和CSS文件,但缺乏正规的组织形式,这也就是为什么越来越多的开发者使用javascript框架。比如:angular、react、vue。浏览器的兼容性问题已经不再是前端的阻碍。前端的项目越来越大,项目的可维护性和扩展性、安全性等成了主要问题。当年为了解决浏览器兼容性问题,出现了很多类库,其中最典型的就是jquery。但是这类库没有实原创 2021-02-03 12:00:15 · 3526 阅读 · 0 评论 -
浅谈Vue响应式原理
一、Vue中的响应式Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。二、响应式的基本原理1.通过Object.definePropert来实现监听数据的改变和读取(属性中的getter和setter方法) 实现数据劫持2.观察者模式(发布者-订阅者)观察者(订阅者) – Watcher:update():当事件发生时,具体要做的事情目标(发布者) – Dep:①subs 数组:存储所有的观察者②原创 2021-02-02 22:34:27 · 28625 阅读 · 2 评论