见证自己学习,成长的记录

用于帮助我们映射state中的数据为计算属性//借助mapState生成计算属性：sum、school、subject（对象写法）//借助mapState生成计算属性：sum、school、subject（数组写法）},用于帮助我们映射getters中的数据为计算属性//借助mapGetters生成计算属性：bigSum（对象写法）//借助mapGetters生成计算属性：bigSum（数组写法）},3用于帮助我们生成与actions对话的方法，即：包含的函数methods:{

首先在store里面定义getters，在里面进行逻辑处理，它有一个参数是state，里面有存放的数据，通过return返回最终处理好的结果概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。在store.js中追加getters配置......//创建并暴露store......getters})1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。2. 在store.js中追加getters配置//js代码。

/引入Vue核心库//引入Vuex//应用Vuex插件//准备actions对象——响应组件中用户的动作//准备mutations对象——修改state中的数据//准备state对象——保存具体的数据//创建并暴露storeactions,mutations,state})2 在main.js中创建vm时传入store配置项......//引入store......//创建vmnew Vue({el:'#app',store})

1 初始化数据、配置actions、配置mutations，操作文件store.js//引入Vue核心库//引入Vuex//引用Vuex//响应组件中加的动作// console.log('actions中的jia被调用了',miniStore,value)},//执行加// console.log('mutations中的JIA被调用了',state,value)//初始化数据sum:0//创建并暴露storeactions,mutations,state,})

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件。

接下来给我们的案例新增d点简单的动画效果，这里写两个，from(来),to(去)两个动画，编写动画其实就是定义动画 这里我定义了一个show的动画(动画名称随意，但是用的时候要对得上！vue不跟动画名进行对话，而是样式的类名作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。写法：准备好样式：v-enter：进入的起点v-enter-active：进入过程中v-enter-to：进入的终点v-leave：离开的起点v-leave-active：离开过程中。

一种组件间通信的方式，适用于任意组件间通信。引入:接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。methods(){......this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息pubsub.publish('xxx',数据)最好在beforeDestroy钩子中，用去取消订阅。

一种组件间通信的方式，适用于任意组件间通信安装全局事件总线：new Vue({......Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm},......})接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。methods(){......提供数据：his.busbus.busemit(‘xxxx’,数据)

一种组件间通信的方式，适用于任意组件间通信安装全局事件总线：new Vue({......Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm},......})接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。methods(){......提供数据：his.busbus.busemit(‘xxxx’,数据)

scoped样式作用：让样式在局部生效，防止冲突。

mixin(混入)功能：可以把多个组件共用的配置提取成一个混入对象使用方式：1 定义混入 例如：{data(){}}2 使用混入 例如：(1)全局混合 Vue.mixin(xxx) (2)mixins:[‘xxx’]

mixin(混入)功能：可以把多个组件共用的配置提取成一个混入对象使用方式：1 定义混入 例如：{data(){}}2 使用混入 例如：(1)全局混合 Vue.mixin(xxx) (2)mixins:[‘xxx’]

被用来给元素或者子组件注册引用信息（id的替代者）通过案例来演示_ref属性如图：有一个按钮，点击按钮可以输出dom元素备注：虽然vue不用我们亲自操作dom，但是有的特殊的情况下就要亲自操作dom页面就是这个样子的如果使用传统的方式，给属性一个id，再使用document,getElementById是可以操作的，但是这些代码，本身就不应该出现在vue中，这里我应该给h1id属性的，但是给错了，问题不大虽然可以实现，但是不推荐原生的html喜欢给元素id标识，在vue中有类似的办法，不过不是使用id而是r

不能随便给props里面定义无用的属性，如图，我定义了一个address属性，但是传入参数没有传，就会报错会提示存在的属性是undefined组件实例对象中这个不存在的属性也是undefined功能：让组件接收外部传过来的数据(1)传递数据(2)接收数据第一种方式(只接收):第二种方式(限制类型):props:{第三种方式(限制类型,限制必要性,指定默认值):props:{name:{type:String //类型required:true //必要性。

被用来给元素或者子组件注册引用信息（id的替代者）通过案例来演示_ref属性如图：有一个按钮，点击按钮可以输出dom元素备注：虽然vue不用我们亲自操作dom，但是有的特殊的情况下就要亲自操作dom页面就是这个样子的如果使用传统的方式，给属性一个id，再使用document,getElementById是可以操作的，但是这些代码，本身就不应该出现在vue中，这里我应该给h1id属性的，但是给错了，问题不大虽然可以实现，但是不推荐原生的html喜欢给元素id标识，在vue中有类似的办法，不过不是使用id而是r

单文件组件是在开发中用的比较多的，它的后缀都是.vue结尾的既然是.vue结尾，那么直接给浏览器是不能运行的，.vue文件是vue团队打造的特殊文件，想让.vue文件让浏览器识别并且运行，需要对它进行处理加工成纯粹的js文件，那么浏览器就认识了常用的处理加工.vue文件有两种方式1 借助webpack：自己找一些插件完成整个编译流程2 借助脚手架：这是vue官方提供的，它其实就是vue的团队拿着webpack打造完的流程和编译整个环境，我们直接拿来用即可。

在vue开发中，组件的嵌套也是会被经常使用到的，所以也应该掌握。

已经有的html元素是不能作为组件名称的，大小写都不行比如我这里把组件名称定义成了h1报错：不能使用已有的元素名称作为组件名称1 关于组件名一个单词组成：第一种写法(首字母小写)：school第二种写法(首字母大写)：School多个单词组成：第一种写法(kebab-case命名)：my-school第二种写法(CamelCase命名)：MySchool(需要在vue脚手架环境)备注：（1）组件名尽量回避HTML中已有的元素名称，例如：h2,H2都不行。

最近在写自己的项目，发现脚注不知道写什么好。思来想去，反正是自己的写着玩的项目，没必要搞什么备案号之类的。倒不如每次加载页面的时候，随机生成一句名言或者励志的话激励自己。这样的小功能实现起来还挺有意思的,如果您有更好的方式实现,欢迎留下评论。

在vue中，组件是有两种编写格式的，第一种格式叫非单文本组件，第二种格式叫单文本组件非单文本组件：一个文件中含有多个组件，也叫多文本组件，比如demo.html里面包含js,css…单文本组件（使用较多）：一个文件中只有1个组件，一个文件只有一个组件，是一一对应的,比如demo.vue注意： 非单文本组件在开发中用的比较少，一般用单文本组件比较多，但是它可以让我们学到很多东西，还是值得学习的。

现在我的两个自定义指令都是一个单词的,v-big,v-fbind,如果需要用到多个单词，比如v-binNum,这时候使用驼峰就不好使了可以看到，找不到这个指令这不是官网推荐的风格，多个单词应该-继续分割，比如v-big-num,此时在函数编写的地方需要使用原生的形式，使用单引号把key包起来，不能再用简写形式了，不然出现-(杠)会报错解决1 定义语法（1）局部指令new Vue({direvtives:{指令名：配置对象}})或 new Vue({direvtives()})

Vue过滤器的基本使用本篇将延续上文，讲述vue中过滤器的进阶操作过滤器定义：对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理，过于复杂的可以使用计算属性)语法：1：注册过滤器，Vue.filter(name,callback)或new Vue(filters:{})2：使用过滤器：{{xxx | 过滤器名称}}或v-bind:属性=“xxx” | 过滤器名称备注：1：过滤器也可以接收额外参数，多个过滤器之间可以配合使用。

除了常见的v-bind,v-for,v-if,v-on.v-model等，本次学习一些vue提供的其他内置指令v-text指令1 作用：向其所在的节点渲染文本内容2 与插值语法的区别：v-text会替换掉节点中的内容，但是插值语法不会，它会进行拼接v-html指令：1 作用：与指定节点中渲染包含html结构的内容2 与插值法与的区别（1）v-html会替换掉节点的所有的内容，{{XX}}则不会（2）v-html可以识别html标签(结构)3 严重注意：v-html有安全性问题。

这个复选框和上面爱好那个复选框是不一样的，它不需要收集value值，只需要知道是否被选择，也就是ture或false，这时候就可以安装输入框的方式去写，直接去定义字符串，而不是数组然后把全部数据填满看下这时候点击提交按钮，表单刷新了，一般都是通过ajax或者axios提供到后端，我们就打印在控制台上但是单击提交按钮会刷新表单和页面，要使用阻止默认行为，可以使用@sumbit事件去阻止表单提交@sumbit阻止默认提交行为这样点击按钮提交后就不会刷新提交表单了如果一个个属性挨个输出，这些写很麻烦一般使用aja

这里有一个细节(小技巧)：表单编写input输入框的时候，通常会配合label标签使用并加上相关的css或或者js，这样会让界面更加美观，用户体验更好，但是今天主要讲的是v-model获取不同的元素数据，就不在代码里面增加复杂的代码了，大家知道就好，我在下面简单演示下加不加的区别。这个错误和单元框一致，也是没value造成的，至于为什么是布尔值，vue获取的是这一组复选框里面的checked，所以只要选中了就是true，不然就是false。首先编写表单元素，包括：文本框，单选，多选，下拉框，文本域。

sort函数有两个参数(max,min)，如果需要升序就用max-min,如果需要降序就用min-max,需要用return把排好序的数组返回出来，排序后的数组会覆盖原来的数组。为了方便实现，给三个不同的按钮单击定义不同的数字含义，原顺序为0，降序为1，升序为2，可以定义出来这个变量，然后根据每一个按钮的单击事件传入不同的参数。既然知道了使用sort的方式，就可以完善代码逻辑了，在这里不能直接使用参数本身，而是对象里面的age属性进行排序。

这里使用filter进行过滤，使用indexOf判断是否包含内容,大概说下indexOf判断是否包含字符串的一些基本操作，如果返回-1表示不包含，如果包含会返回当前这个字符串所在的下标，所以判断是否包含，只需要知道结果是否等于-1。导致这个问题的原因是：使用filter过滤出来的新数据已经没有关于周的姓名了，这么写的逻辑就是越搜越少，persons是原数据，原数据不能直接修改，原数据里面的数据是不能改变的。监视可以实现的，computed都可以实现，下面就使用computed的方式把上面的案例实现下。

v-for指令1.用于展示列表数据2 语法 v-for=(item,index) in(of) xxx :key=“yyy”3 可遍历：数组(用的多)，对象(用的多)，字符串(用的少)，指定次数(用的少)代码奉上DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < title > 初始vue < / title >

条件渲染1 v-if写法：(1) v-if=“表达式”(2) v-else-if=“表达式”(3) v-else=“表达式”适用于：切换频率比较低的场景特点：不展示dom元素直接移除注意：v-if可以和v-else-if,v-else一起使用，但是要求结构不能打断2 v-show写法：v-show=“表达式”适用于：切换频率较高的场景注意：不展示dom元素不会被移，仅仅是控制display的属性进行显示或者隐藏3 备注。

绑定样式：1 class样式写法：class=‘xxx’ xxx可以是字符串，对象，数组字符串写法适用于：类名不确定，要动态获取对象写法适用于：要绑定多个样式，个数不确定，名字也不确定数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用2 style样式:style=“fontSize:xxx”，其中xxx是动态值，fontSzie=font-size,如果只有一个单词正常写即可，如果多个需要使用驼峰命名:style=“[a,b]”，其中a,b是样式对象。

CLI(Command Line Interface)命令行接口工具vue脚手架是vue官方提供的标准化开发工具（开发平台），帮助开发者专门做工程化开发关于脚手架版本：选择最新的即可，因为最新的可以兼容低版本，但是不要出现这样的情况：比如使用vue3.0，但是脚手架用的是1.0版本，这样肯定不行的，目前大多数企业用的还是vue2.0vue脚手架不像传统工具或者库，需要下载压缩包解压使用，而是使用命令├── public │ ├── favicon . ico: 页签图标。

可以先使用技术属性的方式编写天气案例，然后使用监视属性，通过对比，更加清晰明了我们可以使用三木运算符实现对天气的更换，如果属性为真就是炎热，为假就是寒冷但是不建议在插值语法里面做复杂操作，可以使用技术属性操作，利用插值语法获取计算属性的结果使用计算属性完善案例，同时给按钮绑定单击事件去升级案例改变天气代码到这对于这个案例基本就写完了，但是我想分享一个坑和一个使用技巧我们改下代码，注意看，现在已经不用info这个计算属性和isHot这个属性了我们单击按钮，发现vue开发工具对应的数据并没有改变，其实已经改变了

学习vue的计算属性之前，我们先写一个案例，我们先用插值语法实现，然后再使用vue的计算属性实现，经过对比，我们就能掌握计算属性的精髓和原理写一个简单的例子，姓和名分别用两个输入框控制，最后通过一个span标签拼接成一个全名首先通过简单的插值语法实现，需要注意，输入框需要使用v-model进行绑定看下页面，基本功能已经实现了这时候我又有个需求，就是不管输入框输入多少内容，我只截取前两个这个时候，我们可以直接在插值语法哪里截取，使用silce函数(start,num)从哪里开始截取，截取几位这样看，我们的需求

在vue中，我们经常会用到键盘事件，不管是我们按下某个键，其实都是一次键盘事件的调用，下面就介绍下Vue中的键盘事件先写一段代码，这里我选择的键盘事件是keyup,当然用keydown也是没问题的问题来了，什么按键都能触发事件，我们期望的是只能按下回车键才能打印输入的值， 那么：如何判断回车呢？如果我们想要绑定的按键不在vue提供的9个按键内，那该怎么办呢？比如我就想要用CapsLock(切换大小写)首先要知道：键盘上任意的一个按键都有自己的按键和编码。

vue一共给我们准备了6个事件修饰符，前三个比较常用，后三个少见，这里着重讲下前三个1.prevent:阻止默认事件(常用)2. stop:阻止事件冒泡(常用)3. once:事件只触发一次(常用)4.captrue:使用事件的捕捉模式(不常用)5.self:只有event.target是当前操作的元素时才触发事件(不常用)6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕(不常用)个人感觉，了解常见的这些时间修饰符就够用了，不常见的了解即可。用到的时候再搜索相关资料。

最近有一个想法，就是记录自己花销的时候，table中有一项内容是花销的金额。然后想在table的底部有一项内容是该金额的总计。然后我就顺着elementui的table组件寻找相关的demo，还真发现了一个这样的demo。对于这个demo，官方是这么描述的：将show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。

在使用ElementUI的表单元素时候，除了做一些简单的非空处理校验，在一些特殊的场合，还需要我们做一些自定义校验。其实ElementUI不仅提供了基本的非空校验，也对我们提供了自定义检验。在使用的时候还是遇到了一些坑，下面简单的总结分享下我主要以两个较为经典的例子举例，一个是手机号的格式，一个是密码和确认密码的判断是否相同关于表单的自定义校验ElementUI也给了demo，就是我的第二个例子大家都知道，手机号都是有一定的规则的，不是只有11位数字就是这么简单的，还要以固定格式开头等。

这几天做项目，想着用一个全国省市区插件，之前就知道有几种，比如通过JSON文件生成对应的区域下拉框，element-china-are插件，包括distpicker插件今天主要介绍的是如何使用distpicker插件实现省市级三联跳动distpicker官网ps：不知为何，我一直进不去使用起来确实很方便，但是官网进不去加上页面不太适配，就不打算再使用它了，等到哪天优化之后，再回来更新。

最近在做自己项目中，做一个非常简单的新增用户场景，但是使用原生axios发送post请求的时候，还是踩了不少坑的。唉，说多了都是泪，小小一个新增业务，在自己前后端一起开发的时候，硬是搞了好久。下面就把问题总结分享下，防止后人再踩坑。首先先看下我的接口定义吧。其实就是一个很简单的新增，参数也不复杂。

不知道大家在开发中有没有这样的经历：根据条件过滤列表数据项。这种的条件少的还好，比如根据姓名或者性别过滤，这样不仅页面会稍微美观一些，对于sql的压力以及后端的代码量也是会轻松不少的。但是条件多了，条件1，条件2，条件3…