马哥私房菜

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 即可 ...

一、介绍 Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。 每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。 实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载，只是一个空壳，无法访问到数据和真实的dom，一般不做操作 挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据，在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取 接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染，在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一 ...

# vue基础用法&基础原理整理 1. vue基础知识和原理1.1 初识Vue 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 demo容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法 demo容器里的代码被称为【Vue模板】 Vue实例和容器是一一对应的 真实开发中只有一个Vue实例，并且会配合着组件一起使用 是Vue的语法：插值表达式，可以读取到data中的所有属性 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新(Vue实现的响应式) 初始示例代码 1234567891011121314151617<!-- 准备好一个容器 --><div id="demo"> <h1>Hello，{{name.toUpperCase()}}，{{address}}</h1></div><script type="text/javascript" ...

Vuex详解from https://www.cnblogs.com/jinkai123/p/15889180.html 一、Vuex概述1.1 官方解释Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用 集中式存储管理 应用的所有组件的状态， 并以相应的规则保证状态以一种可预测的方式发生变 化 -Vuex 也集成到 Vue 的官方调试工具 devtools extension， 提供了诸如零配置的 time-travel调试、状态快照导入导出等高级调试功能。 1.2 个人理解状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人有点捉摸不透。 其实，可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。 然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。 那么，多个组件是不是就可以共享这个对象中的所有变量属性了呢？ 如果是这样的话，为什么官方还要专门出一个插件Vuex呢？难道我们不能自己封装一个对象来管理吗？ 当然可以，只是我们要先想想Vue.js带给我们最大的便利是什么呢？没错，就是响应式。 如果你自己封装实现一个对象能不能保证 ...

对象的合并 需求：设有对象 o1 , o2, 需要得到对象 o3 类似求2个集合的并集。 使用展开运算符展开运算符（spread operator）提供了一种简洁的语法来合并对象。它使用{…}包裹需要合并的对象，并将它们的属性复制到一个新的对象中。 1234const obj1 = { a: 1, b: 2 };const obj2 = { c: 3, d: 4 };const obj3 = { ...obj1, ...obj2 }; 方法1：使用JQuery的extend方法方法定义：jQuery.extend([deep], target, object1, [objectN]) 用一个或多个其他对象来扩展一个对象，返回被扩展的对象。 如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象(递归合并)。否则的话，副本会与原对象共享结构。 未定义的属性将不会被复制，然而从对 ...