随笔分类 - vue
摘要:一、初识vuex1、什么是vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式;Vuex 采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 ;vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能;2、状态管理什么是状态管理:简单理解...
阅读全文
摘要:1、PromisePromise 是 ES6 中一个非常重要和好用的特性,是异步编程的一种解决方案;通常在网络请求时,我们会处理异步事件,因为不能立即拿到结果,所以往往会传入另外一个函数,在数据请求成功时,将数据通过传入的函数回调出去;如果只是一个简单的网络请求,那么这种方案不会给我们带来很大的麻烦,但当网络请求非常复杂时,就会出现回调地狱;2、网络请求的回调地狱我们来考虑下面的场景:通过一个 u...
阅读全文
摘要:一、动态路由在某些情况下,一个页面的 path 路径可能是不确定的,比如我们进入用户界面时,希望是如下的路径:/user/aaaa 或 /user/bbbb,除了有前面的 /user 之外,后面还跟上了用户的 ID这种 path 和 Component 的匹配关系,称之为动态路由(也是路由传递数据的一种方式)1、在 vue-router 的路由路径中使用“动态路径参数”(dynamic segme...
阅读全文
摘要:一、认识路由1、什么是路由路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动 — 维基百科路由器提供了两种机制, 路由和转发路由是决定数据包从来源到目的地的路径 转发将输入端的数据转移到合适的输出端2、网站发展的几个阶段(1)后端路由阶段什么是后端路由早期的网站开发,整个 H
阅读全文
摘要:1、什么是Vue CLI如果你只是简单写几个 Vue 的 Demo 程序, 那么你不需要 Vue CLI;如果你在开发大型项目, 那么你需要, 并且必然需要使用 Vue CLI;使用 Vue.js 开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情,如果每个项目都要手动完成这些工作,效率比较低,所以通常我们会使用一些脚手架工具来帮助完成这些事情;CLI 是什么意思...
阅读全文
摘要:1、关于plugin什么是 plugin plugin 是插件的意思,通常是用于对某个现有的架构进行扩展webpack 中的插件,就是对 webpack 现有功能的各种扩展,比如打包优化,文件压缩等loader 和 plugin 区别loader 主要用于转换某些类型的模块,它是一个转换器plugin 是插件,它是对 webpack 本身的扩展,是一个扩展器plugin 的使用过程通过 npm 安...
阅读全文
摘要:1、基本配置(1)安装Vue如果希望在项目中使用 Vue.js,那么必然需要对其有依赖,所以需要先进行安装:npm install vue@2.5.21 -S(2)在 main.js 中引入 vue,创建 vue 实例// 引用 vueimport Vue from 'vue'// 创建 vue 实例const vue = new Vue({ el:'#app', data:{ mess...
阅读全文
摘要:1、关于loader在之前的实例中,主要是用 webpack 来处理 js 代码,并且 webpack 会自动处理 js 之间相关的依赖,但在开发中往往不仅仅有基本的 js 代码处理,也需要加载 css、图片,也包括一些高级的将 ES6、TypeScript 转成 ES5 代码,将scss、less 转成 css,将 .jsx、.vue 文件转成 js 文件等;对于webpack本身的能力来说,对...
阅读全文
摘要:一、认识 webpack什么是Webpack?官方的解释:At its core, webpack is a static module bundler for modern JavaScript applications.从本质上来讲,webpack是一个现代的JavaScript应用的静态模块打包工具。从两个关键词模块和打包来理解 webpack前端模块化前面已经解释了为什么前端需要模块化,也...
阅读全文
摘要:一、为什么需要模块化1、JavaScript的原始功能在网页开发的早期,js 制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码很少,直接将代码写在 随着 ajax 异步请求的出现,慢慢形成了前后端的分离,客户端需要完成的事情越来越多,代码量也是与日俱增,为了应对代码量的剧增,我们通常会将代码组织在多个js文件中,进行维护,但是这种维护方式,依然不能避免一些灾难性的问题;比如全局...
阅读全文
摘要:一、插槽 slot为什么使用 slotslot 翻译为插槽,插槽的目的是让我们原来的设备具备更多的扩展性;组件的插槽,也是为了让我们封装的组件更加具有扩展性,让使用者可以决定组件内部的一些内容到底展示什么;1、slot插槽的基本使用在子组件中,使用特殊的元素 就可以为子组件开启一个插槽,该插槽插入什么内容取决于父组件如何使用; p标签 Vue s...
阅读全文
摘要:一、关于组件化1、什么是组件化人面对复杂问题的处理方式:任何一个人处理信息的逻辑能力都是有限的,但人有一种天生的能力,就是将问题进行拆解,如果将一个复杂的问题,拆分成很多个可以处理的小问题,再将其放在整体当中,会发现大的问题也会迎刃而解; 组件化也是类似的思想:如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展,但如果将一个页面拆分成一个个小的功...
阅读全文
摘要:一、计算属性我们知道,在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示: 比如我们有firstName和lastName两个变量,我们需要显示完整的名称。 但是如果多个地方都需要显示完整的名称,我们就需要写多个{{firstName}} {{lastName}}我们可以将上面的代码换成计算属...
阅读全文
摘要:一、插值操作1、MustacheMustache语法(也就是双大括号); {{message}} {{message}},tom {{firstName + lastName}} {{firstName + ' ' + lastName}} {{firstName}} {{lastName}} {{counter * 2}}2、v-once但是,在某些情况下,我们可能不希望界面随意的跟...
阅读全文
摘要:1、初识vueVue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。Vue是一个渐进式的框架,什么是渐进式的呢? 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验。 或者如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统。 比如Core+Vue-router+Vuex,也可以满足你各种各样的需求...
阅读全文