![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue实战
文章平均质量分 66
Vue实战日常
BaiMoci
这个作者很懒,什么都没留下…
展开
-
vue-router 的全局导航钩子函数__BaiMoci
模块一:全局导航钩子函数 1、vue router.beforeEach(全局前置守卫) beforeEach的钩子函数,它是一个全局的before 钩子函数, (before each)意思是在 每次每一个路由改变的时候都得执行一遍。 它的三个参数: to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性: path params query hash fullPath matched name meta(在matched下,但是本例可以直接用) from: (Route原创 2021-08-30 11:12:08 · 1201 阅读 · 0 评论 -
MVVM的概念、原理及实现__BaiMoci
代码实现来源于珠峰公开课mvvm原理的讲解。此文在此记录一下,通过手写几遍代码加深一下自己对mvvm理解。 1、MVVM的概念 model-view-viewModel,通过数据劫持+发布订阅模式来实现。 mvvm是一种设计思想。Model代表数据模型,可以在model中定义数据修改和操作的业务逻辑;view表示ui组件,负责将数据模型转换为ui展现出来,它做的是数据绑定的声明、 指令的声明、 事件绑定的声明。;而viewModel是一个同步view和model的对象。在mvvm框架中...原创 2021-08-30 11:06:11 · 769 阅读 · 0 评论 -
Vue安装及环境配置__BaiMoci
一、安装node.js 官网:https://nodejs.org/en/download/ 历史版本:https://nodejs.org/en/download/releases/ 下载完毕后,可以安装node,建议不要安装在系统盘 二、设置nodejs prefix(全局)和cache(缓存)路径 1、在nodejs安装路径下,新建node_global和node_cache两个文件夹 2、设置缓存文件夹 npm config set cache "D:\vueP...原创 2021-08-30 10:54:03 · 907 阅读 · 0 评论 -
Vue生命周期解析__BaiMoci
详解Vue Lifecycle 先来看看vue官网对vue生命周期的介绍 Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。 每一个组件或者实例都会经历一个完整的生命周期,总共分为三个阶段:初始化、运行中、销毁。 实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate钩子函数,这个时候.原创 2021-08-30 10:24:27 · 79 阅读 · 0 评论 -
Vuex简单理解__BaiMoci
概念 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 安装 HTML 中使用 script 标签引入 <script src="vue.js"></script> <script src="vuex.js"></script> 2.Vue项目中使用 npm 下载安装(需要安装 Node 环境) // 下载 npm...原创 2021-08-30 10:14:58 · 135 阅读 · 0 评论 -
Vue中ref和$refs的介绍以及使用方法示例__BaiMoci
前言 在JavaScript中需要通过document.querySelector("#demo")来获取dom节点,然后再获取这个节点的值。在Vue中,我们不用获取dom节点,元素绑定ref之后,直接通过this.$refs即可调用,这样可以减少获取dom节点的消耗。 ref介绍 ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向该子组件实例 通俗的讲,ref特性就是为元原创 2021-08-26 15:35:19 · 2635 阅读 · 0 评论 -
简单理解Vue nextTick__BaiMoci
Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下。其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick。 一、示例 Vue实例 点击前 点击后 二、应用场景 下面了解下nextTick的主要应用的场景及原因。 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中 在c...原创 2021-08-26 14:45:30 · 106 阅读 · 0 评论 -
Vue配置axios跨域代理__BaiMoci
Vue使用axiso、axios配置跨域 一、Vue-cli使用axios 1、安装命令:cnpm install axios --save 2、main.js引入全局使用 Import axios from ‘axios’ Vue.prototype.$axios = axios 3、组件或页面中使用 methods: { testAxios1:function(){ console.log('test...原创 2021-08-26 10:21:55 · 1197 阅读 · 2 评论