005.VUE框架
文章平均质量分 72
vue框架基础知识介绍,部分知识点原理说明
豚豚鼠
三十而立,四十而不惑
展开
-
001-基础知识
Vue 随笔 -- 基础知识Vue 简单介绍Vue 引入Vue 内置指令Vue 自定义指令Vue 最常用的生命周期函数data & 过滤器 & 计算属性axios国际化: vue-i18n总结Vue 简单介绍Vue 作为目前最受欢迎的前端框架,上手难度低,采用 axios 作为前后台交互方式,Vue-router 作为路由,vuex 管理数据流,Vue-i18n 进行语言切换,拥有生命周期、及组件系统,采用 webpack 全家桶打包优化性能,结合 UI 框架 elementUI,让前端原创 2020-08-23 19:05:31 · 248 阅读 · 0 评论 -
002-组件
Vue 随笔 -- 组件组件介绍全局组件父子组件传值bus 总线进行传值v-model 在组件中的使用组件高级用法 slot、 name自定义树组件总结组件介绍Vue 的核心概念之一,将需求划分为多个小模块,小模块通过组件来实现,各个组件之间耦合度低,复用性高,团队成员分配任务进行各个组件编写,其他开发人员只要知道当前组件需要的入参,即可使用。全局组件通过 Vue.component 注册全局组件,传入 template、data、methods 等属性,配置组件名称,即可通过组件名称使用组件。&原创 2020-08-23 21:45:36 · 263 阅读 · 1 评论 -
003-路由
Vue 随笔 -- 路由Vue-router简单使用路由跳转路由跳转传参嵌套路由多视图路由守卫Vue-routervue-router 官网: https://router.vuejs.org/zh/guide/更多的前端项目偏向于单页面应用程序,基于MVVM模式,单页面应用程序跳转不卡顿,切换流畅等;基础知识点包括:路由跳转、路由跳转传参、嵌套路由、多视图、路由守卫等;vue-router 在项目的引入包含两种方式:通过 js 引入<script src="https://unpkg.原创 2020-08-26 23:12:28 · 264 阅读 · 0 评论 -
004-Vuex
Vue 随笔 -- VuexVuex 介绍Vuex 简单使用Vuex 使用速查states、mutations、actions总结Vuex 介绍Vuex 是什么?Vuex 官网: https://vuex.vuejs.org/zh/Vuex 是一种状态管理模式,简单讲就是通过初始化 Store,配置 state(存数据),mutations(处理数据的方法), actions(异步处理数据方法),getters(类似组件里面的 computed )等,集中处理数据;为什么要集中处理数据 ?原创 2020-08-30 21:24:05 · 197 阅读 · 0 评论 -
005-Vue CLI
Vue 随笔 -- Vue CLIVue-cli 介绍Vue-cli 安装Vue-cli 使用项目开发总结Vue-cli 介绍Vue 项目开发全家桶,使用 webpack 进行打包构建部署等,可以配置 vue-router、vuex、axios等项目所需要的的插件,是实际项目开发必备工具集。Vue-cli 官网:https://cli.vuejs.org/zh/guide/Vue-cli 安装下载 nodenodejs中文网:http://nodejs.cn/download/下载后直接下原创 2020-09-08 22:10:31 · 239 阅读 · 1 评论 -
006-v-model原理
由 属性绑定(v-bind:value=“searchText”) 配合 input事件监听(v-on:input=“searchText = event.target.value”) 实现。应用在组件上由 props: {value: xxx } ,this.$emit(‘input’, xxx ) 完成。原创 2024-03-08 15:34:31 · 683 阅读 · 0 评论 -
007-双向绑定原理
双向绑定原理双向绑定思考:一句话描述原理DocuemntFragment(碎片化文档)Object.defineProperty(数据劫持)发布订阅者模式Vue 双向绑定图示Vue 双向绑定完整实现代码双向绑定vue中 data定义的数据会添加双向绑定的功能,即数据更新后,页面内容会同步更新;页面内容更新后,数据也会同步更新。思考:初始化,如何将 data 中的数据更新到DOM模板中? - 碎片化文档页面更新,如何更新数据? - input事件监听数据变了更新页面,那如何知道数据变了呢? -原创 2024-03-08 15:42:10 · 694 阅读 · 0 评论 -
008-slot插槽
插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”,父组件可以使用指定内容来补“坑”。原创 2024-03-08 15:53:06 · 918 阅读 · 0 评论 -
009-组件的data为什么是个函数
【代码】009-组件的data为什么是个函数。原创 2024-03-10 11:18:06 · 352 阅读 · 0 评论 -
010-$nextTick
Vue 实现响应式,在 data 更新后,一定时间内,没有继续操作DOM,然后会触发浏览器渲染引擎去更新DOM,更新DOM也是需要时间的,所以。data 更新引起的 DOM更新并不是实时的。// 需要等DOM更新完成后调用init方法。Tips:显示组件,并调用组件的初始化方法。// 更新该变量,会引起 DOM 更新。原创 2024-03-10 11:36:03 · 307 阅读 · 0 评论 -
011-keep-alive详解
keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。原理: 在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中,在 render(页面渲染) 时,如果 VNode 的 name 符合缓存条件(可以用 include 以及 exclude 控制),则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。用于保留组件状态或避免重新渲染,包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。原创 2024-03-10 14:02:21 · 1015 阅读 · 0 评论 -
012-路由模式
但是history也是有缺点的,不怕前进后退跳转,就怕刷新(如果后端没有准备的话),因为刷新是实实在在地去请求服务器了,选择history模式,后端需要配置如果找不到页面,默认跳转index.html,前端处理404页面等特殊情况。原创 2024-03-10 14:11:50 · 424 阅读 · 0 评论 -
013-路由懒加载
文件中包含了所有的用户组件的js以及css代码,但用户可能根本不会浏览到某些页面,也就是说根本不需要渲染某些组件,所以vue-router 提供了一种路由懒加载机制,就是当某个路由规则匹配时,才会去加载下载并加载某个组件,此时可以提升首页的渲染速度。我们是将每个组件都分别打包了,每个组件都变成单独文件进行请求,并不是最优解,因为网络时延的存在,应将组件合理分包,进行请求,形成最优解。对比原来的引入方式,就能发现不同点:现在的 Login 是个函数,当路由规则匹配上,就会执行这个函数,才去加载此组件。原创 2024-03-10 14:24:21 · 400 阅读 · 0 评论 -
014-computed、watch
💡Tips:Vue 中,data、computed、watch、methods 各有其使用场景,使用时需要如何区别呢?原创 2024-03-10 14:33:56 · 439 阅读 · 0 评论 -
015-事件修饰符
/阻止 vue 在启动时生成生产提示。原创 2024-03-10 14:37:46 · 150 阅读 · 0 评论 -
016-父子组件生命周期执行顺序
父created - 子created - 子mounted - 父mounted原创 2024-03-10 14:41:03 · 84 阅读 · 0 评论 -
017-$route、$router
route 对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。$router 是路由实例对象,是router构造方法的实例:new Router({})。原创 2024-03-10 15:00:32 · 255 阅读 · 0 评论 -
018-VUE框架优点
简单、双向绑定、轻量级框架、组件化、结构分离、运行速度快、用户体验好。原创 2024-03-10 16:14:53 · 288 阅读 · 0 评论