随笔分类 - Vue2x
摘要：一、Vue中发送网络请求的方式 1. 传统的Ajax是基于XMLHttpRequest(XHR) 2. jQuery-Ajax 3. vue1.0x版本，推出了Vue-resource (2.0后，不再更新和维护) 4. axios 二、axios的功能特点 在浏览器中发送XMLHttpReques
阅读全文
摘要：一、Vuex是一个专门为Vue.js应用程序开发的状态管理模式 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex 也集成到Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入
阅读全文
摘要：一、Promise 是异步编程的一种解决方案 二、什么时候会处理异步事件 一种很常见的场景应该就是网络请求了。 我们封装一个网络请求的函数,因为不能立即拿到结果,所以不能像简单的3+4=7一样将结果返回。 所以往往我们会传入另外一个函数,在数据请求成功时,将数据通过传入的函数回调出去。 如果只是一个
阅读全文
摘要：一、路由概念 1.1 路由是一个网络工程中的术语，路由（routing）就是通过互联的网络把信息从源地址传递到目的地址的活动 1.2 路由器提供了两种机制：路由和传递 路由是决定数据包从来源到目的地的路径 转送将输入端的数据转移到合适的输出端 1.3 路由表本质上就是一个映射表，决定了数据包的指南
阅读全文
摘要：一、Vue程序的运行过程： 二、runtime-compiler 和 runtime-only的区别 1.程序运行流程如下所示（左侧为：runtime-compiler；右侧为：runtime-only ） 区别： runtime-only的性能更高 runtime-only的代码量较少，runti
阅读全文
摘要：1. 安装Vue脚手架 npm install -g @vue/cli 2. 上面安装的是Vue Cli3的版本，如果需要想按照Vue Cli2的方式初始化项目是不可以的。 拉取2.x模板（旧版本） Vue Cli3 和旧版本使用了相同的vue命令，所以Vue CLI2（vue-cli）被覆盖了，如
阅读全文
摘要：1. webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。 2. 不过它是一个单独的模块,在webpack中使用之前需要先安装它 npm install --save-dev webp
阅读全文
摘要：plugin是什么? plugin是插件的意思,通常是用于对某个现有的架构进行扩展。 webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等等。 loader和plugin区别 loader主要用于转换某些类型的模块,它是一个转换器。 plugin是插件,它是对we
阅读全文
摘要：■仔细阅读webpack打包的is文件,发现写的ES6语法并没有转成ES5,那么就意味着可能一些对ES6还不支持的浏览器没有办法很好的运行我们的代码。 ■如果希望将ES6的语法转成ES5,那么就需要使用babel。 而在webpack中,我们直接使用babel对应的loader就可以了。 npm i
阅读全文
摘要："devDependencies": { "css-loader": "^0.28.11", "file-loader": "^1.1.5", "less": "^3.9.0", "less-loader": "^4.1.0", "style-loader": "^0.23.1", "url-loa
阅读全文
摘要：1、loader是webpack中一个非常核心的概念。 2、webpack用来做什么呢? 在我们之前的实例中,我们主要是用webpack来处理我们写的js代码,并且webpack会自动处理js之间相关的依赖。 但是,在开发中我们不仅仅有基本的js代码处理,我们也需要加载css、图片,也包括下些高级的
阅读全文
摘要：注意：在初次使用Webpack打包的时候输入指令出现如下提示： webpack : 无法加载文件 C:\Users\XXX\AppData\Roaming\npm\webpack.ps1， 因为在此系统上禁止运行脚本 原因 powershell对于脚本的执行有着严格的安全限制，默认是不载入配置文件的
阅读全文
摘要：一、安装webpack首先需要安装Node.js, Node.js自带了软件包管理工具npm 二、查看自己的node版本: 三、全局安装webpack(这里我先指定版本号3.6.0,因为vue cli2依赖该版本) 四、局部安装webpack “--save-dev” 是开发时依赖，项目打包后不需要
阅读全文
摘要：一、Webpack官方解释 从本质上讲：webpage是一个现代的JavaScript应用的静态模块打包工具。（模块和打包） 为了可以正常运行，必须依赖node环境，node环境为了可以正常的执行很多代码，必须其中包含各种依赖的包。npm（node packages manager）工具 1.1 前
阅读全文
摘要：一、需要在html代码中引用两个js文件，并且类型需要设置为module <script src="info.js" type="module"></script> <script src="main.js" type="module"></script> 二、export指令用于导出模块中的内容
阅读全文
摘要：模块化有两个核心：导出和导入 CommonJS的导出： module.exports= { flag: true, text(a,b){ return a + b; }, demo(a, b){ return a * b; }} CommonJS的导入： //CommonJS模块 let { tes
阅读全文
摘要：组件的插槽 组件的插槽时为了让我们封装的组件更加具有扩展性 让使用者可以决定组件内部的一些内容到底展示什么 ■如何去封装这类的组件 它们也很多区别,但是也有很多共性。 如果,我们每一个单独去封装一个组件,显然不合适:比如每个页面都返回,这部分内容我们就要重复去封装。 但是,如果我们封装成一个,好像也
阅读全文
摘要：有时候需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件 父组件访问子组件：使用 $children 或 $refs (renference--引用) 子组件访问父组件：使用 $parent 一、父访问子 1. this.$children 是一个数组类型，它包含所有子组件对象
阅读全文
摘要：props用于父组件向子组件传递数据,还有一种比较常见的是子组件传递数据或事件到父组件中。 这个时候,我们需要使用自定义事件来完成。 ■什么时候需要自定义事件呢? 当子组件需要向父组件传递数据时,就要用到自定义事件了。 我们之前学习的v-on不仅仅可以用于监听DOM事件,也可以用于组件间的自定义事件
阅读全文
摘要：在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据。 其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。 这个时候,并不会让子组件再次发送一个网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)。 Vue官方
阅读全文
