一叶凉夏

vueX1.vueX的使用流程： 简单的使用公共资源 首先在vueX的 store文件夹中，找到 index.js文件，在里面的state中设置公共存储的值比如name 在其他组件中就可以使用this.$store.state.name来对name进行使用 修改公共资源 在其他组件中，需要用this.$store.patch('change')派发一个action 在index.js中，改写actions()方法提交一个commit，去触发mutations，提交一个变化 然后在mutations()方法中对state()方法内容去改写 注意：mutations中，只允许写同步代码，异步代码需要放到action中去写 直接上项目代码： 有一个store文件夹，用于设置vuex，入口文件为index.js 1234567891011121314151617181920/** * vuex状态管理入口 */import storage from '../utils/storage';import mutations from...

axios1.当需要接受多个网络请求的时候123456789101112axios.all([axios({ url:'..'}),axios({ url:"..", params:{ type:"sell", page:5 }})]).then(axios.spread((res1,res2)=>{ console.log(res1); console.log(res2);})) 其中axios.spread()是可以将两个请求的返回值作为参数传入，而不需要使用数组的形式 2.设置默认全局配置12axios.defaults.baseURL = "http:123.207.32.32:8000"axios.defaults.timeout = 5000 3.创建axios实例1234const instance =...

ES61.闭包与立即执行函数：具体例子可见：https://zhuanlan.zhihu.com/p/22465092 123456789var btns - document.getElementsByTagName('button');for(var i = 0; i <btns.length; i++){ (function (num){ btns[num].addEventListener('click',function(){ console.log('第'+num +'个按钮被点击'); }) })(i) //其中(function(){})()被称为立即执行函数} 那么用上箭头函数的话，上述的箭头函数应该可以改为： ((num)=>{…})(i) 那么这个例子就可以改为： 123456789var btns -...

5.171.编程范式：vue使用的是声明式编程，你不需要知道他需要显示什么东西就可以了，并不需要自己写如何实现 而之前的js，jQuery使用的是命令式编程，你需要一步步的将执行步骤写好，他才能正常运行。 2.git brush切换路径：cd /d/Git_Repositor 接着就是初始化仓库： git init 3.git仓库使用： 初始化一个仓库，使用git init命令 添加文件到git仓库中： 使用命令 git add，可以反复多次使用，添加多个文件； 使用命令git commit -m "" 掌握工作区的状态 git status 该指令可以看出你当前的工作区是否有修改后的文件，和有没有修改。 git diff 如果git status告诉你有文件被修改过，该指令可以查看修改的内容。 回退前进版本 HEAD指向的版本就是当前版本，因此，Git允许我们在版本的历史之间穿梭，使⽤用命 令git reset --hard commit_id。 可以用git log查看提交历史，确定回退到哪个版本 用git...

HTTP协议1.http报文http请求由四部分组成： method：常为get或者是postget主要是请求服务器资源，而post则是向服务器发送html表单 url：常为要获取资源的路径，就是很明显的元素资源的url http协议的版本号 为服务端表达一些信息的可选头部headers 对于post请求，body中会包含发送的资源 响应报文： http协议版本号 状态码：显示对应请求执行是否成功，以及失败原因 状态信息：状态码描述信息，可以由服务器端自行设定 header，与请求类似 可选，响应报文包含资源body更为常见 2.url也就是网址 基本组成：scheme://host[:port#]/path/.../[?query-string][#anchor] scheme：访问服务器以获取资源时要使用哪种协议，http.https等 host：http服务器的ip地址 port#：端口号 path：访问资源的路径 query-string：发给http服务器的数据 anchor：锚

swiper插件用法 首先进行安装 1npm install swiper vue-awesome-swiper@2.6.7 --save 然后可以在main.js中全局注册 12345678910import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'// import style (>= Swiper 6.x)import 'swiper/swiper-bundle.css'// import style (<= Swiper 5.x)import 'swiper/css/swiper.css'Vue.use(VueAwesomeSwiper, /* { default options with global component } */) 或者是组件内局部注册 1234567891011121314151617import { Swiper,...

v-bind绑定css1.绑定class直接上官网的例子： 1<div :class="classObject"></div> 首先，该div绑定了一个数据对象为classobject 然后将这个对象通过计算属性进行改写 123456789101112data: { isActive: true, error: null},computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } ...

5.201.变更方法（触发响应式的方法）： push() pop() shift() unshift() splice() sort() reverse() 使用这些方法对数组进行操作，会使页面更新。 变更方法会==改变原始数组== 2.替换数组：替换数组会返回一个新的数组，如（filter()、concat() 和 slice()） 3.由于 JavaScript 的限制，Vue 不能检测数组和对象的变化：==待补充== 补充： 在vue中，有时候你修改了数组的某一项值或索引时，视图并未如你想的那样发生变化，虽然你修改了数组但是视图上显示的还是未修改时的值。 12345//由于 JavaScript 的限制，Vue 不能检测以下变动的数组：//（1）当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue//（2）当你修改数组的长度时，例如：vm.items.length = newLength 官方的解决方案： 12345//...

5.301.插槽slot如果想更好的进行组件复用，那么插槽就是必不可少的，有了插槽，就可以自由定义组件内的各种标签， 在复用的时候，使用默认的公用的标签，然后通过插槽，再自定义特有的功能样式 12345678910111213141516<div class="app"> <!--<cpn><span slot="center">hahha</span></cpn>从Vue2.6已经废弃--> <cpn> <template v-sort:center> <span>hahaha</span> </template> </cpn></div><template id="cpn"> <div> <slot...

5.181.箭头函数：==函数声明尽量使用箭头函数的方式== 绝大多数情况下都可以用=> 代替function来声明函数。 =>函数的作用已经完全包围了function，并且this指向清晰。 vue react里 this是一个高频使用的model。 vue里就出现了一种=>代替不了function的情况： 在声明data和生命周期函数中如：mounted，created等的情况下，依然要用function或函数名+()的方式来声明函数。 （这个跟vue作者尤雨溪当年在google angular项目组的一个bug有关，他在这里规避掉了箭头函数声明的情况） 更简短的函数并且不绑定this 1234567891011121314151617181920212223var elements = [ 'Hydrogen', 'Helium', 'Lithium', ...