qq_40992225的博客

可以使用width属性来定义列宽。

json-server是一个 Node 模块，运行 Express 服务器，你可以指定一个 json 文件作为 api 的数据源。通俗来说， json-server模拟服务端接口数据，一般用在前端人员可以不依赖后端的API开发，而在本地搭建一个JSON服务，快速生成一个REST API风格的后端服务。

在外层嵌套template（页面渲染不生成dom节点），在这一层先进行v-if判断，然后在内部再进行v-for循环如果判断条件出现在循环内部，把需要v-for的值先在computed计算属性中过滤一次。

这个请求方式默认的就是get请求，当然我们也可以直接设置请求方式，此时还是将其设置为get请求，最终的效果没有什么变化。但是我们不能在这里接收结果，我们需要把这个结果给调用者传出去，而且这里也有可能会出现异常，我们也需要把这个异常传出去。在开发中，有的时候需要发送两个请求，并且这两个请求最终都达到以后再做一个功能（发送多个并发请求，同时到达以后再做进一步的处理）（相当于拦截了config，但是没有给它返回，最终还是拿不到这个config，内部发送请求的时候，它里面所有的信息都拿不到了）

在vue-cli 2.x项目中，进入build文件夹，找到webpack.base.conf.js，编辑文件 ，并找到resolve字段的配置项（webpack.config.js 是基于webpack（开源的前端打包工具）的配置文件。虽然我们知道了文件被藏到什么地方，但一般我们不修改node_modules中的文件。所以我们可以在项目的根目录下创建一个vue.config.js文件，用来配置路径别名，它会被 @vue/cli-service 自动加载，前提是该文件一定要存在于项目的根目录下。

开发依赖的目的是为了减少插件在安装依赖时node_modules的所占的内存，提升安装依赖的速度，节省线上及其的硬盘资源以及部署上线的时间。

如果在下方有一个单独的TabBar组件，你如何封装自定义TabBar组件，在APP中使用让TabBar出于底部，并且设置相关的样式TabBar中显示的内容由外界决定定义插槽flex布局平分TabBar自定义TabBarItem，可以传入 图片和文字定义TabBarItem，并且定义两个插槽：图片、文字。给两个插槽外层包装div，用于设置样式。填充插槽，实现底部TabBar的效果传入 高亮图片定义另外一个插槽，插入active-icon的数据。

通过history.pushState 使用它做页面跳转不会触发页面刷新，使用window.onpopstate 监听浏览器的前进和后退，再做其他处理。URL的hash也就是锚点(#), 本质上是改变window.location的href属性.history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面.因为 history.back() 等价于 history.go(-1)history.forward() 则等价于 history.go(1)这三个接口等同于浏览器界面的前进后退。

将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易。

如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLICLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架。Vue CLI是一个官方发布 vue.js 项目脚手架。使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置Vue CLI的使用安装Vue脚手架Vue CLI2初始化项目Vue CLI3初始化项目Vue CLI2详解目录结构详解简单总结Runtime-CompilerRuntime-only为什么存在这样的

以上代码其实等价于下面的get方法的。计算属性一般实现的是Get方法，set方法是不需要实现的，所以一般直接不用它，它是一个只读属性。我们可以从控制台中看到，fullName打印了一次，但是getFullName打印了4次，由此可知，我们的计算属性的性能比较高，所以能使用计算属性就使用计算属性。但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}此时我们就可以使用计算属性（因为是属性，在使用计算属性的时候就不用写括号）如果非要写上set方法，我们。

通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦：注意，虽然这里的 < Footer> 组件可能根本不关心这些 props，但为了使 < DeepChild> 能访问到它们，仍然需要定义并向下传递。如果组件链路非常长，可能会影响到更多这条路上的组件。

EventBus 是中央事件总线，不管是父子组件，兄弟组件，跨层级组件等都可以使用它完成通信操作。兄click设置点击事件，用$emit设置通道传参给中转站，弟通过 $on接收来自中转站的参数。任意关系的组件之间的传参可以通过 vue-router 来完成。...

在修改数据之后立即使用这个方法，获取更新后的DOM。这简单来说就是谁先挂载Promise对象的问题，在调用 $nextTick方法时就会将其闭包内部维护的执行队列挂载到Promise对象，在数据更新时Vue内部首先就会执行 $nextTick方法，之后便将执行队列挂载到了Promise对象上，其实在明白Js的Event Loop模型后，将数据更新也看做一个 $nextTick方法的调用，并且明白 $nextTick方法会一次性执行所有推入的回调，就可以明白执行顺序的问题了。（看不懂这句人话的，可以看上面）

生命周期函数

在这个项目里面，我们发现并不是这样的，一旦有我们程序的时候就加载下面的30条数据，有了这30条数据，我们到时候就会创建一些image元素，一旦创建完这个元素，下面的图片早就加载好了，所以项目上的图片都不是懒加载。如果说这个项目做完以后它是跑在移动端的，我们一般会使用 fastclick这个插件，它可以减小项目中某些东西在移动端点击的延迟。项目做完以后，我们可能要对其进行部署，不管是在哪里部署，它也是在服务器里面执行某个命令，也是需要对我们项目进行打包的。图片需要现在在屏幕时，再加载这张图片。...

一旦调用Vue.use本质上是调用括号里面的toast对象的install，也就是index.js里面导入的obj，也就是会执行obj.install.所以我们可以在这个install函数里面把所有要预备的东西全部预备好。我们将toast组件封装到一个插件里面，然后安装这个插件，一旦安装了这个插件，我们就先把这个组件创建出来，并且把这个组件在最开始的时候就添加到body里面。但是，这个toast我们不仅想在detail中使用，还想在CartBottomBar里面使用，购物车里面有个去计算。......

如果我们不想通过上面方法调用，我们想直接通过this.addCart(product).then(res)这种方法，但是this.是调用自己的方法，但是它自己并没有这种方法，所以它可以将actions.js里面addCart的方法映射到detail里面。我仔细看了一下，我觉得最大的可能是命名的问题，因为我这个定义的函数名字也叫addCart，在actions里面也是叫addCart，所以这里的addCart调用的时候定义不明，这里的dispatch接收，所以我们可以在后面添加then。...

新建CartBottomBar，将其导入到cart，注册使用。

在cart文件夹里新建一个子组件，childComps，新建CartList.vue。我们在Cart.vue中一共要做三件事情导航商品列表底部汇总下面我们将商品列表单独封装一个组件CartList.vue，将这个组件在Cart中导入，注册，使用但是我们发现了购物车里面不能滚动，此时还是因为scrollHeight的原因，没有及时更新高度。此时我们在cartList中新建一个activated函数购物车前面有一个按钮，我们对其做了一个封装。...

购物车里面有个小括号，用来存放购物车中衣服的数量，这里面的数字来自Vuex，因为我们要根据vuex里面的cartList里的数量来显示括号里的数量是多少。但是这样写也并没有减少多少代码，我们想直接把getters.js中的cartLength转成计算属性，直接在Cart.vue中使用。在store文件夹中新建一个getters.js，导入到index.js。如果拿cartLength的地方比较多的话，我们可以将其封装为一个getter.然后在我们的Cart.vue中cartLength修改如下。......

将商品添加到购物车要先监听购物车点击在DetailBottomBar.vue中监听然后在Detail.vue的detail-bottom-bar标签中在methods中我们需要从详情页拿到商品的数据，然后在购物车里面显示，所以我们可以通过Vuex首先安装vuex然后在store文件夹中新建index.js然后在main.js里面做一个导入。再到但是实际上能不能像上面这样做呢？不能，任何修改state里面的东西都要通过mutations然后在Detail.vue的methods中。...

但是在我们的首页里面也用到了回到顶部，如果在重新在Detail里面在写一遍代码，就显得有些多余了，这时我们就想到了mixin（混入），将两个组件之间的这个公共组件进行抽取。特别注意，只能抽取像生命周期里面的函数内容，像是methods里面它仅仅会抽取那些大的函数，函数内部的东西是不能再抽取了。然后在首页和详情页里面使用。其中要注意在detail和home里面的显示与隐藏放到了methods中的contentScroll()函数里面，一般是不能抽取的。要在上面template里面应用。...

在detail文件夹下的childComps下新建DetailBottomBar.vue，在它里面封装详情页的底部工具栏。在Detail.vue中注册，导入，使用。我们会发现我们最底部还是会有遮住的内容。在Detail中多减去49px。

这个功能就是点击了商品就跳到商品对应的位置，点击了参数就跳到参数对应的位置等。以及上下内容的联动效果。

之所以没有用deactivated，是因为activated和deactivated这两个函数都是在有缓存的情况下keep-alive里面调用的，但是我们的deactivated他是排除在keep-alive之外的，所以我们需要在destoryed里面取消。但是在我们详情页里面我本身也要也要监听事件，等图片加载完以后，本身也要做一次刷新，也就是说详情页也会监听item，并且发送事件，所以通过路由也能完成。而我们的这个 refresh()也得在某个时候把它取消掉，所以也需要对其进行保存，...

因为它和我们的GoodsList.vue排版格式类似，所以可以直接使用GoodsList。根据报错结果我们找到了GoodsListItem里面的img，为其增加一个计算属性。将我们的GoodsList导入，注册，使用。再到created()里面请求推荐数据。在detail.js中创建一个接口。data()里新建变量。...

服务器返回的并不是对应的时间，而是一串数字。它是以Unix时间元年为起点，返回对应的时间戳。比如上面的1535694719，这个数字就是一个时间戳。我们要做的就是将这个时间戳转化为对应的我们想要展示的时间。那么：如何将时间戳转成时间格式化字符串（在开发中非常常用）？因为时间戳是秒，而上面的Date对象是毫秒，所以要乘上1000。hh:hour小时(h12小时制，H24小时制)导入到Detail.vue中，注册，传入数据。但是这里面值得注意的是，时间的展示。在data()里面增加一个变量。...

1、点击商品跳转到详情页当我们点击GoodListItem中的每一个item，就跳转到对应的页面。我们首先要做的就是监听GoodsListItem的点击在GoodsListItem组件中在methods中跳转到对应的详情页我们可以先给详情页配置一个路由新建datail文件夹，新建Detail.vue，然后在router的index.js里面配置与路由相关的信息但是我们在跳转详情页的时候还需要传递一些参数，需要把点击商品的id拿到，然后根据这个id去请求更加详细的数据。这个id也就是下面对应商品的

这就意味着回到首页，首页还需要重新被创建，但是我们不希望它被重新创建，所以我们就让其不要随意销毁。我们会发现，它并没有记住home离开时的位置，我们在home里的新建destroryed(）在scroll.vue中包装一个getScroll Y（）但是结果仍然与我们预期有差别，它并没有保留下来这个状态。在我们的App.vue中加入keep-alive。我们发现一旦离开首页，首页就会被销毁。在data（）里面默认一个。在Home.vue中。...

因为原来在我们的布局上面，这个tabControl把内容都往下压了压，然后tabControl脱标了以后，下面的东西都会往上走tabControl的高度，所以会突然往上升了升。我们可以这么做，一旦我们向上滚动的时候，当我滚到两个tabControl重合的时候，就让最上面的那个tabControl显示出来，一旦到了下面的时候，就让它消失，也就是。这里的offsetTop指的是图片加载完成，加载完成以后再获取的offsetTop，也就是544这个值，之后我们在动态的绑定样式。所以我们直接监听轮播图加载。....

怎么才能将图片加载完成和我们的refresh()对应起来，第一种方法是，将我们的图片加载完成以后执行的this.scroll.refresh()这个事件传给他的父组件GoodsList，然后再通过父子组件传值将其传给Home.vue，然后首页就能通过this.$refs.scroll.refresh()拿到这个值，但是这样就特别麻烦。也就意味着我们用Vuex做了中间的一个通信，在GoodsListItem中拿到this. $store，就可以改变Vuex里面的属性，再让首页监听这个属性。......

所以我们的办法就是等图片异步加载完成以后，要做一次刷新，此时在我们加载更多的时候调用refresh（）方法，重新计算可滚动的区域。总结：第一，我们先要监听图片什么时候加载完成，第二，调用refresh（）方法进行一次刷新。也就是之前的item它加载的时候是不包含图片的，等加载完成以后时，它的高度就已经定下来了。因为我们上拉加载更多也不是在scroll组件中做，所以还是需要把这个事件传出去。此时出现了一个bug，虽然上拉加载了数据，但是它不能滚动了。我们的想要的功能是上拉时候，加载更多的数据。...

如果在backtop这个组件里面监听点击的话不太好，因为我们是在滚动区域监听点击的，是滚动的区域回到顶部，意味着我们要拿到better-scroll滚动对象。组件是不能直接监听点击的，如果我们想要监听组件点击，我们需要做一件事情，必须要加上.native原生修饰符。在我们需要监听一个组件的原生事件时，必须要给对应的事件加上.native修饰符，才能进行监听。在我们的scroll组件中，下面一句代码，将位置信息发送出来了，我们就要在home组件里面接收。当然，在这之前，我们要在data中给它一个默认属性。..

better-scroll是一款重点解决移动端 (已支持PC )各种滚动场景需求的插件。它的核心是借鉴的iscroll的实现，它的API设计基本兼容iscroll ，在iscroll的基础上又扩展了一些feature以及做了一些性能优化。better-scroll是基于原生JS实现的，不依赖任何框架。它编译后的代码大小是63kb，压缩后是35kb , gzip后仅有9kb,是一款非常轻量的JS lib。......

直接传入的是pop，已经写死了，但是在实际应用中，这里应该是一个变量。我们应该动态的来决定是哪一个类型。首先的话，我们需要内部监听点击，之前我们内部也监听点击了，但是并没有将内部发生点击这个事件传递到外面去。在methods中：如果index为0的话，默认它的currentType=‘pop’先在data中默认一个当前类型为pop。在Home.vue中接收这个点击事件。我们在TabControl中的。然后在Home.vue中。......

再将我们最新的page放入到下面 getHomeGoods(‘pop’, page)这个里面，此时这个里面的res表示的是pop的前30条数据，page:1，此时拿到这个变量是一个局部变量，函数结束以后是要被销毁的。goods:{流行[]/新款[]/精选[]}它对应的每一个都是数组，每一个数组可能保存30条，60条，90条等，它会有上拉加载更多，到时候保存的数据量是不一样的。还会出现，我流行的数据已经加载到第8页，新款加载到第5页，而精选也才加载到第三页的情况，这时，我们就需要设计数据结构了。...

其中这几句代码的意思就是，给每个titie里都添加点击事件，此时将这个点击的title的index赋值给当前的currentIndex，这时对应的active属性值为true。接受完这一数据以后，我们需要做一个展示，就用到了v-for，而且这个时候还需要注意一下，此时我们选中某一个span标签，它就会变颜色，并且有一个下边框。我们分析一下上面代码，首先我们需要接收一下相关数据，也就是这个TabControl上面要显示的内容，此时我们用titles来接受这一数据，在Home.vue中。...

我们可以通过对象的方式，后面跟上布尔值，通过修改布尔值的方式，从而达到动态绑定的效果。之后我们要做的就是监听点击，一旦我们发现了它点击了以后，我们就把点击的这个index赋值给currentIndex，进行一个展示就可以了。此时这个当前点击的小li它的布尔值就为true，这个时候就是点击哪一个那一个就变红。首先我们拿到每个li它的item和index，然后动态绑定class属性，用一个。而此时我们默认的index就是0，所以默认的第一个movies颜色会变红。它具体是怎么实现的呢？...

第一步：我们需要接受推荐信息中的数据，这时，我们要从Home.vue中传出数据，在这之前要在Home.vue中导入RecommendView.vue，注册，展示。首先我们也是直接创建一个组件RecommendView.vue中用来存放推荐信息。轮播图展示完以后，我们需要将推荐信息进行展示。......