qq_46071321的博客

解决首页中Better-Scroll可滚动区域的问题问题的产生如何解决这个问题？如何监听图片加载完成？代码展示防抖操作 问题的产生 Better-Scroll在决定有多少区域可以滚动时，是根据scrollHeight属性决定的。 scrollHeight属性是根据放在Better-Scroll的content中的子组件的高度 但是我们的首页中，刚开始在计算scrollHeight属性时，是没有将图片计算在内的。所以，计算出来的结果是错误的。 后来图片加载出来之后有了新的高度，但是scrollHeight属性

<template> //如果直接在组件上@click是监听不到的，下面是错误做法 <back-top @click="backClick"/> //正确做法：.native ——监听组件根元素的**原生事件** <back-top @click.native="backClick"/> </template> <script> import BackTop from "@/components/content/backTop/BackTop";

实现局部滚动的两种方法效果展示CSS方法BScroll方法踩坑 效果展示 CSS方法 <ul class="content"> <li>分类列表1</li> <li>分类列表2</li> <li>分类列表3</li> ... <li>分类列表100</li> </ul> //css .content{ height: 150p

一、 //network/request.js import axios from "axios"; export function request(config,success,failure){ //1.创建axios的实例 const instance = axios.create({ baseURL:'http://123.337.33.33:8000', timeout:5000 }) //发送真正的网络请求 instance(config) .then

Vuex是做什么的 官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 Vuex也集成到Vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能 状态管理到底是什么？ 其实，你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。 那你可能会想，为什么

Promise是异步编程的一种解决方案。 定时器的异步事件 这里，我们用一个定时器来模拟异步事件： 假设下面的data是从网络上1秒后请求的数据 console.log就是我们的处理方式 setTimeout(function(){ let data = 'Hello World' console.log(data); },1000) 将其换为Promise代码： new Promise((resolve,reject) =>{ setTimeout(function(){ //成功的时候调用res

来考虑一个需求；在一个SPA应用中，如何改变网页的标题呢？ 网页标题是通过<title>来显示的，但是SPA只有一个固定的HTML，切换不同的页面时，标题并不会改变。 在JS中修改<title>的内容：window.document.title = ‘新的标题’ 那么在Vue项目中，如何做呢？ 1.Vue中有一个created方法，可以在这个方法中设置document.title = ‘新的标题’ 但是这样写，不好的地方是如果这个需求是突然加的，那么我就需要在每一个vue文件中都写入

传递参数主要有两种类型：params和query params的类型： 配置路由格式：/router/:id 传递的方式：在path后面跟上对应的值 传递后形成的路径：/router/123，/router/abc query的类型 配置路由格式：/router，也就是普通配置 传递的方式：对象中使用query的key作为传递方式 传递后形成的路径：/router?id=123，/router?id=abc 二、 ...

嵌套路由是一个很常见的功能 比如在home页面中，我们希望通过/home/news和/home/message访问一些内容。 一个路径映射一个组件，访问这两个路径也会分别渲染两个组件。 路径和组件的对应关系如下： 实现嵌套路由有两个步骤： 创建对应的子组件，并且在路由映射中配置对应的子路由。 在组件内部使用<router-view>标签。 ...

官方给出了解释： 当打包构建应用时，Javascript包会变得非常大，影响页面的加载 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了 官方在说什么呢？ 首先，我们知道路由中通常会定义很多不同的页面 这个页面最后被打包在哪里呢？一般情况下，是放在一个js文件中 但是，页面这么多放在一个js文件中，必然会造成这个页面非常的大 如果一次性从服务器请求下来这个页面，可能需要花费一定的时间，甚至用户的电脑上会出现短暂的空白情况 如何避免这种情况呢？使用路由

在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径： /user/aaa或/user/bbb 除了有前面的/user之外，后面还跟上了用户的ID 这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式) 当然，在实际开发中这个东西应该是动态获取的 通过v-bind动态绑定属性 再补充一个需求：拿到用户id并进行展示 也可以直接这样写： ...

//App.vue <template> <div id="app"> <!--<router-link>默认会被渲染为a标签，这里的tag属性，让它渲染为button --> <!--<router-link to="/home" tag="button" replace>首页</router-link> <router-link to="/about" tag="button" replace>关

我们知道<router-link>中，有一个属性:to，用于指定跳转的路径。 <router-link>还有一些其他属性： tag:tag可以指定<router-link>之后渲染成什么组件，比如下面的代码会被渲染成一个<button>元素，而不是<a> <!--<router-link>默认会被渲染为a标签，这里的tag属性，让它渲染为button --> <router-link to="/hom

vue-router安装和配置方式认识vue-router安装和使用vue-router 认识vue-router vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面富应用。 可以访问其官方网站对其进行学习：传送门 vue-router是基于路由和组件的。 路由用于设定访问路径，将路径和组件映射起来。 在vue-router的单页面富应用中，页面的路径的改变就是组件的切换。 安装和使用vue-router 步骤一：安装vue-router npm ins

URL的hash URL的hash也就是锚点(#)，本质上是改变window.location的href属性。 我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新。 HTML5的history模式：pushState HTML5的history模式：replaceState 这个方法不可以前进后退 HTML5的history模式：go history.back()等价于history.go(-1) history.forward()等价于history.go(1) 这

什么是前端渲染，什么是后端渲染？后端路由阶段后端路由的缺点前后端分离阶段单页面富应用阶段 后端路由阶段 早期的网站开发整个HTML页面是由服务器来渲染的。 服务器直接生产渲染好对应的HTML页面，返回给客户端进行展示。 但是，一个网站，这么多页面服务器如何处理呢？ 一个页面有自己对应的网址，也就是URL URL会发送到服务器，服务器会通过正则对该URL进行匹配，并且最后交给一个控制器(Controller)进行处理。 Controller进行各种处理，最终生成HTML或者数据，返回给前端 这就完成了一个I

vuecli-脚手架的介绍和安装什么是Vue CLICLI是什么意思？Vue CLI使用前提-Node安装NodeJS检测安装的版本什么是NPM呢？Vue CLI的使用安装Vue脚手架初始化项目目录结构详解 什么是Vue CLI 如果你在开发大型项目，那么你需要，并且必然需要使用Vue CLI 使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。 如果每个项目都要手动完成这些工作，那无疑效率比较低，所以通常我们会使用一些脚手架工具来帮助完成这些事情。 C

那么 .vue文件中的template是由谁处理的呢？ 是由vue-template-compiler处理的

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。 不过它是一个单独的模块，在webpack中使用之前需要先安装它 npm install --save-dev webpack-dev-server@2.9.3 devserver也是作为webpack中的一个选项，选项本身可以设置如下属性： contentBase:为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填./dist

在项目发布之前，我们必然需要对js等文件进行压缩处理 这里，我们就对打包的js文件进行压缩 我们使用一个第三方的插件uglifyjs-webpack-plugin，并且版本号指定为1.1.1，和CLI2保持一致 修改webpack.config.js文件，使用插件： 打开打包后的bundle.js文件，查看是否压缩 好啦，内容就是这些，如有问题欢迎加入Web前端交流QQ群：827389615，一起讨论学习吖！ ...

目前，我们的index.html文件是存放在项目的根目录下的。 在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。 所以，我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用HtmlWebpackPlugin插件。 HtmlWebpackPlugin插件可以为我们做这些事情： 自动生成一个index.html文件（可以指定模板来生成） 将打包的js文件，自动通过script标签插入到body中.

//App.vue <template> <div> <h2 class="title">{{message}}</h2> <button @click="btnClick">按钮</button> <h2>{{name}}</h2> </div> </template> <script> export default { name: "App

1、npm install vue --save 2.导入 3.npm run build 发现打包过程没有任何错误，但是运行程序，没有出现想要的效果，而且浏览器报错： 这个错误说的是我们使用的是runtime-only版本的Vue 4.解决办法 在webpack.config.js中写入： 再打包运行即可 好啦，内容就是这些，如有问题欢迎加入Web前端交流QQ群：827389615，一起讨论学习吖！ ...

如果希望将ES6语法转成ES5，那么就需要使用babel。 而在webpack中，我们直接使用babel对应的loader就可以了。 1.npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 版本如下： 2.配置webpack.config.js文件 这里你可以直接去官网copy，但是你如果下载的也是babel-preset-es2015而不是官网上的babel-preset-env，那么options中的presets应

如果直接执行npm run build: 读一下，意思大概是：你需要一个适当的loader来处理这个文件。 所以先下载loader,这里注意一定要下载和webpack版本对应的loader,下面还要下载很多东西，@XXX，都是下载的对应版本。 1.下载处理图片的url-loader 2.在webpack.config.js中进行配置 这个可以直接去官网复制，但是limit的默认值是8192,因为我的两张图片是9.13KB和17.31KB，如果是按默认值都会超范围，我要做的是当加载的图片大于和小于limi

原因：loader版本过高导致的错误 因为跟着老师视频学的，安装的webpack版本是3.6.0，所以对应的css-loader的版本是2.0.2 而我安装的css-loader版本是5.0.1 我通过在package.json中手动下调css-loader版本发现还是不行： 于是，卸载掉高版本的css-loader，重新安装 npm uninstall css-loader （卸载） npm install css-loader@2.0.2 --save-dev （安装） 这就可以啦 好啦，内容就是这些

首先清楚如下文件夹各自的作用： dist文件夹：用于存放之后打包的文件 src文件夹：用于存放我们写的源文件 main.js:项目的入口文件 mathUtils.js:定义一些数学工具函数 index.html:浏览器打开展示的首页html 一、webpack ./src/main.js ./dist/bundle.js 这里main.js为入口函数 打包方式： 二、webpack 1.执行 npm init package.json:通过npm init生成的，npm包管理的文件。

首先，看如下报错情况： 遇到这个问题，我先去百度查了一下这四个ERR报错，解决办法有说是npm版本太老，但我觉得这应该不是我的问题所在，我是下的目前流行推荐的一个新版本，所以继续找答案，说应该用淘宝镜像。所以我就试了试 首先执行下面命令: npm config set registry https://registry.npm.taobao.org 再执行下面命令，看是否安装成功 npm config get registry 如果出现下面语句： https://registry.npm.taob

v-model 双向绑定实际上就是通过子组件中的 $emit 方法派发 input 事件，父组件监听 input 事件中传递的 value 值，并存储在父组件 data 中；然后父组件再通过 prop 的形式传递给子组件 value 值，再子组件中绑定 input 的 value 属性即可。 子组件传值 首先子组件需要一个 input 标签，这个 input 标签需要绑定 input 事件，$emit 触发父组件的 input 事件，通过这种方法子组件传递值给父组件 <input type="tex