weixin_43899694的博客

网络模块封装—— 封装进行网络请求的第三方框架常见网络请求模块传统Ajax （基于XMLHttpRequest [XHR]）JQuery-AjaxJSONP – 非正式传输协议（主要解决跨域问题）Ajax直接请求普通文件存在跨域无权限访问的问题Web页面上调用js文件时则不受是否跨域的影响（不仅如此，凡是拥有”src”这个属性的标签都拥有跨域的能力。如<\script&g...

vuex核心1. state单一状态树单一状态树： single sourse of truth ，也称单一数据源2. getters （类似与单个组件中的计算属性computed） more20(state){ return state.stu.filter(s => s.age > 20 ) }, length(state,getters){ ...

vuex官网state，驱动应用的数据源；view，以声明方式将 state 映射到视图；actions，响应在 view 上的用户输入导致的状态变化“单向数据流” 简图：多个组件共享状态 ：Backend : 后端Frontend：前端Dispatch：发布Devtools：vue开发的一个浏览器插件。记录每次修改state的状态。（只能跟踪同步操作）在浏览器上安装6...

vuex的作用vuex是一个专为Vuejs应用程序开发的状态管理模式采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化vuex也集成到vue的官方调试工具 devtools extension，提供如 零配置的time-travel调试，状态快照导入导出等的高级调试功能需要在多个组件间共享的状态：用户的登录状态（token），用户名称、头像、地...

promise封装异步请求已setTimeOut为例用promise之前：回调地狱// 第一次网络请求代码 setTimeout(()=>{ console.log('第一次处理的代码'); console.log('第一次处理的代码'); console.log('第一次处理的代码'); // 第二次网络请求代码 ...

创建封装上图的TabBar自定义TabBar组件，在app中使用让TabBar处于底部，并设置相关样式tabbar中显示内容由外界决定： 定义插槽，flex布局平分tabbar自定义TabBarItem，可以传入图片文字—— a. 定义TabBarItem，且定义两个插槽：图片，文字 b. 两个插槽外层包装div，用于设置样式 c.填充插槽，实现底部tabbar效果...

keep-alive 是Vue里的一个内置组件，可使被包含的组件保留状态，或避免重新渲染两个属性： include， excludeinclude： 字符串或正则表达式，匹配的组件才会被缓存exclude： 字符串或正则表达式，匹配的组件都不会被缓存eg. 要设置多个时，加逗号，不能有空格<keep-alive exclude='User,Profile'> &lt...

导航守卫： 监听导航要求点击导航后，浏览器上显示对应导航名方法1，使用在对应导航组件内使用created()eg.Home.vue:export default { name: 'Home', created(){ document.title = '首页' } }方法2，导航守卫1. 在index.js中使用beforeEach() --前置守卫(guard)...

路由跳转参数传递：params， query向组件传递数据params类型配置路由格式： /router/:id传递方式：在path后面跟上对应的值传递后形成的路径：/router/abc， /router/123query类型 （数据多时使用合适）配置路由格式：/router，即普通配置传递的方式：对象中使用 query 的 key传递后形成的路径： /router?id...

嵌套路由：eg. 在home页面中，想通过/home/news. /home/message 访问一些内容一个路径映射一个组件，访问这两个路径也会分别渲染两个组件路径和组件的关系：实现步骤：创建对应的子组件，并且在路由映射中配置对应的子路由在组件内部使用 <router-view> 标签在src - components 文件夹下新建两个.vue文件，作为子组件...

打包构建应用时，js包会很大，影响页面加载引用后直接使用：src - index.js：import Home from '../components/Home'import About from '../components/About'import User from '../components/User'Vue.use(VueRouter)const routes = [...

需求： 跳转到user界面，url为user后面接id -----> …/user/userId—— 动态路由且要在user.vue中拿到在App.vue中的有关用户的信息User.vue:<template> <div> <h2>用户组件</h2> <p> 用户信息： 用户id...

router-link默认最终渲染为a标签改变最终渲染： tag属性App.vue：<router-link to='/home' tag='button'>首页</router-link>tag=’标签名‘，最终渲染为设置的标签改pushState为replace： replace属性使前进后退不可使用<router-link to='/home' ...

三大框架的路由实现Angular： ngRouterReact：ReactRouterVue：vue-routervue-routervue-router是Vue.js官方的路由插件，和vue.js是深度集成的，适合用于构建单页面应用基于路由和组件路由用于设定访问路径，将路径和组件映射起来在vue-router单页面应用中，页面路径的改变 就是 组件的切换安装和使用...

改变url，但不进行整体的刷新1. url的hash控制台：location.hash = ‘xxx’url改变，但页面不会重新请求全套资源2. html5 的history模式2.1 pushState()pushState相当于入栈，back相当于出栈可以点浏览器的前后按钮，可返回上个页面2.2 replaceState()浏览器前后按钮不可用，不可返回到上个页面...

后端路由阶段 : 后端处理url和页面之间的映射关系后端渲染早期页面使用后端渲染： jsp/php/c#.net…请求taobao.com请求taobao/nvzhuang.com解析url taobao.com解析url taobao/nvzhuang.com渲染好的页面taobao html,css渲染好的页面nvzhuang html,css用户页面服务器后台jsp技术,渲染页面:ht...

一，参数问题基本用法： 无参，无返回值 const fun = (参数列表) => {}放入两个参数 const sum = (num1,num2) => { return num1 + num2 }放入一个参数（可省略括号） const power = num => { return num * num...

查看、修改配置的三种方案：1. vue ui 可视化界面启动配置服务器： vue ui在终端执行 vue ui导入项目，管理项目相关配置插件只显示packag.json 中写 的插件可以安装新的插件，依赖，对webpack进行配置，运行项目等2. 隐藏的配置文件在 node_modules文件夹下的 @vue文件夹 下的 cli-server文件夹 下 有webpack.co...

CLI3 与别于2

图片来源，coderwhy老师制作

vue程序运行过程：template —解析–> ast –编译–>render函数 --^virtual tree^–> UI在vue init webpack myproject 之后，有Vue build 选项： runtime compiler 和 runtime-only两种选择生成的项目区别，只在main.js中runtime compiler - ma...

视频build 和 config 里都是配置文件，从package.json阅读..."dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","build": "node build/build.js" //node xx.js , 可直接运行js文件src文件夹 放源码...

PS D:\app1\vscode-space\vue\10-webpack> vue init webpack vuecli2testvuecli2test —— 项目文件夹名称，不可有中文,不能大写报错： vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 13.229.188....

CLIcommond line interface 命令行界面，俗称脚手架Vue Cli 中文网站Vue CLI官方发布的vue.js项目脚手架使用Vue CLI 可快速搭建 Vue开发环境 以及 对应的webpack配置使用前提1. Node脚手架会生成webpack配置，而webpack又依赖Node环境2. webpackVue.js官方脚手架工具就使用了webpack...

有些配置是开发时需要的，但发布后不需要有些是发布需要的，开发时不需要创建一个文件夹build，存放配置文件build下，建几个.js文件base.config.js —— 存放 开发时 和 发布时 都需要的配置prod.config.js —— 存放 发布时 需要的配置dev.config.js —— 存放 开发时 需要的配置安装webpack-merge ，合并配置文...

webpack提供一个可选的本地开发服务器该本地服务器基于nodejs搭建，内部使用express框架可实现让浏览器自动刷新显示修改后的结果。不用每次都npm run build把文件先放到内存中，浏览器从内存中直接读取。最后发布才把文件放到硬盘安装配置：npm install webpack-dev-server@2.9.1 --save-devmodule.exports ...

plugin ：插件，对某个现有框架进行扩展plugin 和 loader 区别loader：主要用于转换某些类型的模块，是一个转换器plugin：插件，是对webpack本身的扩展，是一个扩展器plugin 使用通过npm 安装需要的plugin （ 部分插件webpack已经内置，不必安装）在webpack.config.js中的plugins进行配置eg1. Ban...

开发中的Vue写法<div id = 'app'></div>这一块div标签内不放置任何代码所有代码写在vue实例的template属性中new Vue({ el: '#app', template: ` <div> <h2> {{message}} </h2> <button>按钮...

npm下载Vue通过npm下载Vue，而不是先将Vue下载到本地，再通过script标签引入 npm install vue --save引用：import Vue from 'vue'但是会报错：原因：Vue构建最终发布版本时，构建了两类版本runtime-onle —— 代码中不可以有任何templateruntime-compiler —— 代码中可以有temp...

安装 babel-loader npm install babel-loader@7 babel-core babel-preset-es2015配置module: { rules: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { lo...

url-loader图片大小小于limit中的值 npm install url-loader --save-dev配置module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'u...

webpack 本身不具备处理 css、图片，es5，6转换 、jsx，.js转为.vue 等的能力需要给webpack扩展对应的loaderloader 使用：通过npm安装需要的loader在webpack.config.js中的module关键字下进行配置大部分loader可在webpack官网中找到并学习步骤：在入口js（main.js）中引入css文件// 依赖...

1. 生成package.json文件需要使用到package.json通过npm init 生成终端进入到对应文件夹，执行npm initpackage name: (02-配置) meetwebpack （直接敲回车默认使用括号内的名字，但有中文不支持）… 省略部分皆直接回车entry point: (webpack.config.js) index.js (没必要用we...

创一个文件夹，文件夹下，dist文件夹 —— 存放打包后的文件 （distribution）src文件夹 —— 存放源码index.htmlpackage.json —— npm init 生成的 npm包管理的文件（依赖node环境时用到）src文件夹下，main.js —— 主要js，入口jsxxx.jsyyy.js…js在终端输入:若提示 “在此系...

先安装Nodejs，Nodojs自带软件包管理工具npm安装完成后，配置路径cmd到所在文件名下，输入 node --version ，查看是否安装成功且查询版本号。全局安装webpack指定版本 3.6.0， 因为vue cli 依赖该版本输入 npm install webpack@3.6.0 -g局部安装webpack （后续需要）–save-dev` 是开发时需要，项目打包后...

webpackjs使用的静态模块打包工具目前使用前端模块化的方案：AMD，CMD，CommonJs，ES6前三者都必须依赖其他工具解析，只有ES6能被浏览器解析模块：webpack 核心 之一： 处理模块间的依赖关系js文件，css，图片，json文件等 在webpack中都可以当作模块使用打包：webpack:将webpack中的各种资源模块进行打包合并成一个或多个包（Bun...

模块化的两个核心： 导入 和 导出(了解) CommonJs标准:导出aa.js 文件中： module.exports = { flag: true, sum(a,b){ return a + b; } }导入bb.js文件中： var { test, summ } = require( './aa.js') 等同于: var he = requi...

1. 具名插槽给 slot 的 name 属性赋值，使用时要替换哪个slot就 slot= name <div id = 'app'> <cpn1><button slot="left">hi</button></cpn1> </div> <template id = 'cpn1'> ...

组件的插槽让封装的组件更有扩展性让使用者可以决定组件内部的一些内容要展示什么在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性不设默认值<div id = 'app'> <cpn1> <butto...

1. 父 访问 子两种方式：$children （不常用) ;$refs —— referencea. $children —— 不常用父组件： this.$children.<div id = 'app'> <cpn1></cpn1> <button @click='visitChi'>访问子组件</button&...