马哥私房菜

Vue3快速上手 1.Vue3简介 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0 2.Vue3带来了什么1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% …… 2.源码的升级 使用Proxy代替defineProperty实现响应式 重写虚拟DOM的实现和Tree-Shaking …… 3.拥抱TypeScript Vue3可以更好的支持TypeScript 4.新的特性 Composition API（组合API） setup配置 ref与reactive watch与watchEffect provide与inject …… 新的内置组件 Fragment Teleport Suspense 其他改变 新的生命周期钩子 data 选项应始终被声明为一 ...

ElasticSearch 简介Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的 全文搜索引擎，基于 RESTful web 接口。Elasticsearch 是用 Java 语言开发的，并作为 Apache 许可条款下的开放源码发布，是一种流行的企业级搜索引擎。Elasticsearch 是与名为 Logstash 的数据收集和日志解析引擎以及名为 Kibana 的分析和可视化平台一起开发的。这三个产品被设计成一个集成解决方案，称为 “Elastic Stack”（以前称为 “ELK stack”）。ElasticSearch 概念介绍 Elasticsearch 是面向文档型数据库，一条数据在这里就是一个文档。为了理解，可以将 Elasticsearch 里存储文档数据和关系型数据库 MySQL 存储数据的概念进行一个类比 es 的 Index 就相当于 MySql 的数据库 es 的 type 相当于 MySql 的表 es 的 Document 相当于 MySql 的一行记录 es 的 Field 相当于 MySql 的字段 ...

Django学习之初识 ================================ 参考https://www.cnblogs.com/wupeiqi https://www.bilibili.com/video/BV1NL41157ph?p=1 安装 django1pip install django 123456$ /home/conda/bin/conda env list # conda environments:#base * /home/condadjango /home/conda/envs/django 1234567891011121314151617181920$ s ...

vue3 实例 12345678910111213141516171819202122232425262728293031323334353637383940Object component: ƒ component(name, component) config: (...) directive: ƒ directive(name, directive) mixin: ƒ mixin(mixin) mount: containerOrSelector => {…} provide: ƒ provide(key, value) runWithContext: ƒ runWithContext(fn) unmount: ƒ unmount() use: ƒ use(plugin, ...options) version: "3.3.4" _component:  ...

v-model 表单输入绑定https://v2.cn.vuejs.org/v2/guide/forms.html 你可以用 v-model 指令在表单 ```<input>、<textarea> 及 <select> ```元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。 v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件： text 和 textarea 元素使用 value property 和 input 事件； checkbox 和 radio 使用 checked property 和 change 事件； select 字段将 ...

过滤器https://v2.cn.vuejs.org/v2/guide/filters.html 过滤器Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。 过滤器应该被添加在 js 表达式的尾部，由“管道”符号 竖线 表示 （和bash里面的管道符号一样）。 12345<!-- 在双花括号中 , 插值语法中 比较常用，就是格式化 输出显示的 。-->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div> 过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。 过滤器可以串联： 12{{ message | filterA | ...

vuex中的四个map方法的使用 vc组件 -> Dispatch -> Actions -> Commit -> Mutations -> Mutate -> State -> Render -> vc组件 statestore目录结构 12345678910111213141516171819202122const state = { // 这里就是存储数据的仓库，整体是一个对象，里面可以存储任何类型的， 可以继续，对象嵌套，数组嵌套 等等。};const mutations = {// 这里是个对象，定义很多 mutations 方法， mutations是同步的};const actions = {// 这里是个对象，定义很多 actions 方法， actions 里面可以异步};const getters = {// 这里是个对象，定义很多 getter 方法};// 重要的就是这里 export default { ...

mixin是什么Mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类 Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂 #Vue中的mixin先来看一下官方定义 mixin（混入），提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。 本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如 data、components、methods、created、computed等等 我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来 在Vue中我们可以局部混入跟全局混入 局部混入定义一个mixin对象，有组件options的data、methods属性 12345678910var myMixin = { created: function () { this.hello() }, methods: { hello: f ...

我们已经学过的组件通信方式 6 种 props适用于 父子组件通信 如果父组件给 子组件传递数据（传递的是一个函数），本质是子给父传递数据。如果父组件给 子组件传递数据（不是函数的情况），本质是父给子传递数据。 书写方式： 123456['tools'][type:Array]{type:Array, default:[]} 自定义事件组件自定义事件是一种组件间通信的方式，适用于：子组件 ===> 父组件 使用场景 A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。 绑定自定义事件： 第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/> 具体代码 App.vue 1234567891011121314151617181920212223242526272829303132333435<template> & ...

编译打包npm build 后的 dist 目录 就我们需要放到 nginx 服务器上的。 安装dockerUbuntu 系统、或者centos 系统 上先把 docker 环境安装好。 配置nginx配置文件主要配置 location / 和 location /api 这个地方 123456789101112131415161718192021server { listen 80; listen [::]:80; server_name localhost; location / { root /app; index index.html; } location /api { proxy_pass http://gmall-h5-api.atguigu.cn; }} 启动容器123docker run --rm -it --name nginx -p 80:80 vue-demo:0.1 然 ...

1.dist中“大”文件—-map 执行项目构建后 打开dist/js文件夹，文件是这样的。很多和js文件同名的map后缀文件，而且size还很大。 2.map是个什么玩意 source map文件是js文件压缩后，文件的变量名替换对应、变量所在位置等元信息数据文件，一般这种文件和min.js主文件放在同一个目录下。 比如压缩后原变量是map，压缩后通过变量替换规则可能会被替换成a，这时source map文件会记录下这个mapping的信息，这样的好处就是说，在调试的时候，如果有一些JS报错，那么浏览器会通过解析这个map文件来重新merge压缩后的js,使开发者可以用未压缩前的代码来调试，这样会给我们带来很大的方便！ 而这种还原性调试功能，目前只有chorme才具有。 一句话，就是压缩的js与未压缩源文件js之间的映射关系文件。（就是一个桥梁）这玩意就是辅助我调试用的，正式站其实作用不大，而且处于安全考虑，可以直接干掉。 3.如何优化 因为 是基于 vue 构建的项目，所以在vue.config.js文件中，添加productionSourceMap: false 即可 ...