Vue
文章平均质量分 94
vue学习笔记
CUG-GZ
这个作者很懒,什么都没留下…
展开
-
【Vue】Vue-router中的history模式和hash模式
为了构建SPA(单页面应用),Vue引入了前端路由Vue-Router,前端路由的核心就是在改变视图的同时不会向后端发起请求。Vue-Router有两种模式:hash模式和history模式。默认的路由模式是hash模式。原创 2020-08-18 17:04:32 · 428 阅读 · 0 评论 -
【Vue】Vue中的Virtual DOM
最近在一些面经,遇到了下面的四个问题,归根节点都是在说Vue的虚拟DOM,那就来学习一下相关的知识。 > 1. Vue中的模板变为视图的过程? > 2. diff算法是什么? > 3. key作用是什么?不要key会怎样? > 4. Virtual Dom(VDom)、VNode 是什么?原创 2020-08-07 12:39:16 · 384 阅读 · 0 评论 -
【Vue】Vue数据双向绑定原理
目录1. MVVM数据双向绑定 1. MVVM数据双向绑定 MVVM数据双向绑定是指:数据的变化驱动视图的更新,视图的变化驱动数据的更新,如图所示: 我们可以使用事件监听的方式来实现视图变化驱动数据的更新,通过以下四个步骤实现数据变化驱动视图的更新: 实现一个监听器 Observer ,用来劫持并监听所有属性,如果属性发生变化,就通知订阅者; 实现一个订阅器 Dep,用来收集订阅者,对监听器 ...原创 2020-07-25 20:35:43 · 641 阅读 · 1 评论 -
【Vue】组件通信
目录一、父子组件通信二、子父组件通信三、非父子组件通信四、vue-router五、多组件通信(Vuex)1. props 和 $emit 一、父子组件通信 props只能是父组件向子组件进行传值,props使得父子组件之间形成了一个单向下行绑定,父子prop的更新会向下流动到子组件中,但是反过来不行。子组件的数据会随着父组件不断更新。 在这里插入代码片 二、子父组件通信 三、非父子组件通信 ...原创 2020-07-25 01:02:34 · 264 阅读 · 0 评论 -
面试题:为什么vue组件中的data是一个函数而不是一个对象?
面试题:为什么vue组件中的data是一个函数而不是一个对象? JavaScript中的对象是引用类型的数据,当多个实例引用同一个对象时,只要一个实例对这个对象进行操作,其他实例中的数据也会发生变化。 而在Vue中,我们更多的是想要复用组件,那就需要每个组件都有自己的数据,这样组件之间才不会相互干扰。 所以组件的数据不能写成对象的形式,而是要写成函数的形式。数据以函数返回值的形式定义,这样当我们每次复用组件的时候,就会返回一个新的data,也就是说每个组件都有自己的私有数据空间,它们各自维护自己的数据,不会原创 2020-07-05 18:21:22 · 1705 阅读 · 0 评论 -
【Vue】vue-router 路由进阶
1. 概念 1.1 前后端渲染 1.1.1 后端渲染 1.1.2 前端渲染 1.2 前端路由和后端路由 1.2.1 前端路由 1.2.2 后端路由 1.2.3 前后端路由对比 1.3 vue-router 2. 路由的规则 2.1 路由的 history 模式 2.2 路由的 hash 模式 2.3 两种模式的区别 3. router-link 4. 基本使用 5. 路由重定向与别名 6. 动态路由的使用 7. 懒加载 8. 嵌套使用 9.路由传递参数 10. 导航守卫 11. keep-alive原创 2020-06-25 23:59:30 · 560 阅读 · 0 评论 -
【Vue】vue-cli 初始化项目的项目结构
目录1. vue-cli 简介2. vue-cli 安装3. vue-cli初始化项目4. 项目结构 1. vue-cli 简介 vue-cli是Vue 提供的一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。 使用vue-cli有以下几大优势: vue-cli是一套成熟的Vue项目架构设计,会跟着Vue版本的更迭而更新 vue-cli提供了一套本地的热加原创 2020-06-24 18:33:34 · 869 阅读 · 0 评论 -
【Vue】 slot插槽、具名插槽和作用域插槽
目录1. 为什么使用插槽?2. 内容插槽3. 具名插槽4. 作用域插槽5. 动态插槽名6. 具名插槽的缩写 1. 为什么使用插槽? 组件的插槽是为了让我们封装的组件更具有扩展性,让使用者决定组件内部展示的内容是什么。 有些组件之间有些区别,但是也有很多的共性,如果我们每个都去封装一个组件,这似乎并不合适,但是如果封装成一个组件,也不合理,因为每个组件之间不完全一样,有些差别,所以我们可以用插槽来解决这些问题。 最好的封装方式就是抽取组件中的共性封装起来,将不同的地方定义为插槽暴露出去,这样既可以根据使用的原创 2020-06-23 22:39:18 · 2044 阅读 · 0 评论 -
【Vue】Axios在Vue中的使用及封装
目录1. 什么是Axios?2. Axios方法的基本使用1. get方法2. post请求3. put请求4. patch请求5. delete方法3. axios方法深入3.1 并发请求3.2 1. 什么是Axios? 概念: Axios是一个基于Promise的HTTP库,它可以用于浏览器和Node.js(可以用于服务端和客户端)。 特性: 支持Promise API 可以拦截请求和响应 转换请求数据和响应数据(如,在请求时对敏感信息进行加密,响应时对响应数据进行解密) 取消请求 自动转换JSON数原创 2020-06-12 21:25:06 · 410 阅读 · 0 评论 -
【Vue】Vuex学习笔记
目录1. Vuex 概述1.1 Vuex是什么?1.2 使用Vuex有什么好处?1.3 Vuex中适合存储什么数据?2. Vuex 基本使用2.1 基本使用步骤2.2 Vuex 数据变更:Mutation2.3 Vuex 处理异步任务:Action2.4 Vuex 数据加工处理:Getter 1. Vuex 概述 1.1 Vuex是什么? Vuex 是实现组件全局状态管理 的一种机制,可以方便的实现组件之间数据的共享。 1.2 使用Vuex有什么好处? 使用Vuex统一管理状态有以下好处: 能够在Vue原创 2020-05-25 21:31:16 · 205 阅读 · 0 评论 -
【Vue】Vue生命周期
目录1. Vue生命周期是什么?2. 生命周期钩子2.1 beforeCreate2.2 created2.3 beforeMounted2.4 mounted2.5 beforeUpdata2.6 upDated2.7 beforeDestroy2.8 destroyed 1. Vue生命周期是什么? 在每个Vue实例在被创建时,都会经过创建、初始化数据、模板编译、挂载DOM,数据更新使得DOM更新、实例卸载等一系列的过程。这一系列过程就是Vue的生命周期。 简单来说,Vue实例从初始化到销毁的过程就是V原创 2020-05-24 16:50:55 · 923 阅读 · 0 评论 -
【Vue】vue-router 路由基础
vue路由基础学习笔记原创 2020-05-16 14:59:46 · 292 阅读 · 0 评论 -
【Vue】组件注册
一、组件注册 组件的名称有两种写法:短横线分隔命名法(例如:my-component-name)和驼峰命名法(例:MyComponentName) 1. 全局注册 Vue.component('component-a', { template:` <div > <button v-on:click="handle()"> 加一</button>...原创 2020-05-03 16:37:27 · 209 阅读 · 0 评论 -
【Vue】Vue基础笔记
目录1. 模板语法2. 计算属性、方法、侦听器3. 计算属性的setter和getter4. class与style绑定5. 条件渲染6. 列表渲染7. 事件处理 1. 模板语法 插值表达式:用来渲染数据 v-text:只能渲染数据 v-html:可以渲染数据,也可以解析HTML代码 v-bind:用来绑定数据和元素属性,可以简写为 : v-on:用来监听DOM事件,可以简写为 @ <...原创 2020-05-01 00:12:13 · 221 阅读 · 0 评论