Vue
♚ Painting
想要爱自己的人以及自己爱的人生活的更好,那么自己就要不断努力。
在你想要放弃的时候,想想是什么让你当初坚持走到了这里。——科比
展开
-
解决首页中Better-Scroll可滚动区域的问题(事件总线+防抖操作)
解决首页中Better-Scroll可滚动区域的问题问题的产生如何解决这个问题?如何监听图片加载完成?代码展示防抖操作问题的产生Better-Scroll在决定有多少区域可以滚动时,是根据scrollHeight属性决定的。scrollHeight属性是根据放在Better-Scroll的content中的子组件的高度但是我们的首页中,刚开始在计算scrollHeight属性时,是没有将图片计算在内的。所以,计算出来的结果是错误的。后来图片加载出来之后有了新的高度,但是scrollHeight属性原创 2021-01-17 20:42:47 · 383 阅读 · 1 评论 -
想要组件可以监听点击,需要如何做?
<template>//如果直接在组件上@click是监听不到的,下面是错误做法<back-top @click="backClick"/>//正确做法:.native ——监听组件根元素的**原生事件**<back-top @click.native="backClick"/></template><script>import BackTop from "@/components/content/backTop/BackTop";原创 2021-01-17 11:06:53 · 151 阅读 · 0 评论 -
实现局部滚动的两种方法:1.三行css代码2.使用BScroll框架
实现局部滚动的两种方法效果展示CSS方法BScroll方法踩坑效果展示CSS方法<ul class="content"> <li>分类列表1</li> <li>分类列表2</li> <li>分类列表3</li> ... <li>分类列表100</li> </ul> //css .content{ height: 150p原创 2021-01-16 18:03:59 · 2586 阅读 · 4 评论 -
axios网络请求封装
一、//network/request.jsimport 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原创 2021-01-14 20:49:27 · 87 阅读 · 0 评论 -
Vuex介绍及简单应用
Vuex是做什么的官方解释:Vuex是一个专为Vue.js应用程序开发的状态管理模式它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化Vuex也集成到Vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能状态管理到底是什么?其实,你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后,将这个对象放在顶层的Vue实例中,让其他组件可以使用。那你可能会想,为什么原创 2021-01-13 11:38:45 · 75 阅读 · 0 评论 -
初识Promise
Promise是异步编程的一种解决方案。定时器的异步事件这里,我们用一个定时器来模拟异步事件:假设下面的data是从网络上1秒后请求的数据console.log就是我们的处理方式setTimeout(function(){let data = 'Hello World'console.log(data);},1000)将其换为Promise代码:new Promise((resolve,reject) =>{setTimeout(function(){//成功的时候调用res原创 2021-01-12 12:15:44 · 100 阅读 · 0 评论 -
vue-router导航守卫
来考虑一个需求;在一个SPA应用中,如何改变网页的标题呢?网页标题是通过<title>来显示的,但是SPA只有一个固定的HTML,切换不同的页面时,标题并不会改变。在JS中修改<title>的内容:window.document.title = ‘新的标题’那么在Vue项目中,如何做呢?1.Vue中有一个created方法,可以在这个方法中设置document.title = ‘新的标题’但是这样写,不好的地方是如果这个需求是突然加的,那么我就需要在每一个vue文件中都写入原创 2021-01-09 21:43:29 · 104 阅读 · 0 评论 -
vue-router参数传递
传递参数主要有两种类型:params和queryparams的类型:配置路由格式:/router/:id传递的方式:在path后面跟上对应的值传递后形成的路径:/router/123,/router/abcquery的类型配置路由格式:/router,也就是普通配置传递的方式:对象中使用query的key作为传递方式传递后形成的路径:/router?id=123,/router?id=abc二、...原创 2021-01-09 15:58:28 · 83 阅读 · 0 评论 -
vue-router路由的嵌套使用
嵌套路由是一个很常见的功能比如在home页面中,我们希望通过/home/news和/home/message访问一些内容。一个路径映射一个组件,访问这两个路径也会分别渲染两个组件。路径和组件的对应关系如下:实现嵌套路由有两个步骤:创建对应的子组件,并且在路由映射中配置对应的子路由。在组件内部使用<router-view>标签。...原创 2021-01-09 14:51:49 · 71 阅读 · 0 评论 -
vue-router路由懒加载的使用
官方给出了解释:当打包构建应用时,Javascript包会变得非常大,影响页面的加载如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了官方在说什么呢?首先,我们知道路由中通常会定义很多不同的页面这个页面最后被打包在哪里呢?一般情况下,是放在一个js文件中但是,页面这么多放在一个js文件中,必然会造成这个页面非常的大如果一次性从服务器请求下来这个页面,可能需要花费一定的时间,甚至用户的电脑上会出现短暂的空白情况如何避免这种情况呢?使用路由原创 2021-01-08 17:40:08 · 135 阅读 · 0 评论 -
vue-router动态路由的使用
在某些情况下,一个页面的path路径可能是不确定的,比如我们进入用户界面时,希望是如下的路径:/user/aaa或/user/bbb除了有前面的/user之外,后面还跟上了用户的ID这种path和Component的匹配关系,我们称之为动态路由(也是路由传递数据的一种方式)当然,在实际开发中这个东西应该是动态获取的通过v-bind动态绑定属性再补充一个需求:拿到用户id并进行展示也可以直接这样写:...原创 2021-01-08 16:35:05 · 113 阅读 · 1 评论 -
通过代码跳转路由
//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>关原创 2021-01-08 15:42:51 · 150 阅读 · 0 评论 -
router-link补充
我们知道<router-link>中,有一个属性:to,用于指定跳转的路径。<router-link>还有一些其他属性:tag:tag可以指定<router-link>之后渲染成什么组件,比如下面的代码会被渲染成一个<button>元素,而不是<a><!--<router-link>默认会被渲染为a标签,这里的tag属性,让它渲染为button --> <router-link to="/hom原创 2021-01-08 15:25:54 · 210 阅读 · 0 评论 -
vue-router安装和配置方式以及路由默认路径
vue-router安装和配置方式认识vue-router安装和使用vue-router认识vue-routervue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面富应用。可以访问其官方网站对其进行学习:传送门vue-router是基于路由和组件的。路由用于设定访问路径,将路径和组件映射起来。在vue-router的单页面富应用中,页面的路径的改变就是组件的切换。安装和使用vue-router步骤一:安装vue-routernpm ins原创 2021-01-03 20:35:52 · 1297 阅读 · 0 评论 -
如何实现改变URL但页面不进行刷新?
URL的hashURL的hash也就是锚点(#),本质上是改变window.location的href属性。我们可以通过直接赋值location.hash来改变href,但是页面不发生刷新。HTML5的history模式:pushStateHTML5的history模式:replaceState这个方法不可以前进后退HTML5的history模式:gohistory.back()等价于history.go(-1)history.forward()等价于history.go(1)这原创 2021-01-03 18:57:04 · 441 阅读 · 1 评论 -
什么是前端渲染,什么是后端渲染?
什么是前端渲染,什么是后端渲染?后端路由阶段后端路由的缺点前后端分离阶段单页面富应用阶段后端路由阶段早期的网站开发整个HTML页面是由服务器来渲染的。服务器直接生产渲染好对应的HTML页面,返回给客户端进行展示。但是,一个网站,这么多页面服务器如何处理呢?一个页面有自己对应的网址,也就是URLURL会发送到服务器,服务器会通过正则对该URL进行匹配,并且最后交给一个控制器(Controller)进行处理。Controller进行各种处理,最终生成HTML或者数据,返回给前端这就完成了一个I原创 2021-01-03 17:44:41 · 598 阅读 · 4 评论 -
vuecli-脚手架2和3的介绍及安装
vuecli-脚手架的介绍和安装什么是Vue CLICLI是什么意思?Vue CLI使用前提-Node安装NodeJS检测安装的版本什么是NPM呢?Vue CLI的使用安装Vue脚手架初始化项目目录结构详解什么是Vue CLI如果你在开发大型项目,那么你需要,并且必然需要使用Vue CLI使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作,那无疑效率比较低,所以通常我们会使用一些脚手架工具来帮助完成这些事情。C原创 2021-01-02 21:57:45 · 317 阅读 · 0 评论 -
runtime-compiler和runtime-only的区别
那么 .vue文件中的template是由谁处理的呢?是由vue-template-compiler处理的原创 2021-01-02 19:57:27 · 55 阅读 · 0 评论 -
搭建本地服务器
webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。不过它是一个单独的模块,在webpack中使用之前需要先安装它npm install --save-dev webpack-dev-server@2.9.3devserver也是作为webpack中的一个选项,选项本身可以设置如下属性:contentBase:为哪一个文件夹提供本地服务,默认是根文件夹,我们这里要填./dist原创 2021-01-01 21:22:38 · 135 阅读 · 2 评论 -
js压缩的Plugin
在项目发布之前,我们必然需要对js等文件进行压缩处理这里,我们就对打包的js文件进行压缩我们使用一个第三方的插件uglifyjs-webpack-plugin,并且版本号指定为1.1.1,和CLI2保持一致修改webpack.config.js文件,使用插件:打开打包后的bundle.js文件,查看是否压缩好啦,内容就是这些,如有问题欢迎加入Web前端交流QQ群:827389615,一起讨论学习吖!...原创 2021-01-01 20:00:15 · 148 阅读 · 0 评论 -
打包html的plugin
目前,我们的index.html文件是存放在项目的根目录下的。在真实发布项目时,发布的是dist文件夹中的内容,但是dist文件夹中如果没有index.html文件,那么打包的js等文件也就没有意义了。所以,我们需要将index.html文件打包到dist文件夹中,这个时候就可以使用HtmlWebpackPlugin插件。HtmlWebpackPlugin插件可以为我们做这些事情:自动生成一个index.html文件(可以指定模板来生成)将打包的js文件,自动通过script标签插入到body中.原创 2021-01-01 19:33:35 · 281 阅读 · 0 评论 -
.vue文件的处理This may cause things to work incorrectly. Make sure to use the same version for both.
//App.vue<template> <div> <h2 class="title">{{message}}</h2> <button @click="btnClick">按钮</button> <h2>{{name}}</h2> </div></template><script>export default {name: "App原创 2021-01-01 11:16:49 · 1954 阅读 · 0 评论 -
You are using the runtime-only build of Vue where the template compiler is not available.
1、npm install vue --save2.导入3.npm run build发现打包过程没有任何错误,但是运行程序,没有出现想要的效果,而且浏览器报错:这个错误说的是我们使用的是runtime-only版本的Vue4.解决办法在webpack.config.js中写入:再打包运行即可好啦,内容就是这些,如有问题欢迎加入Web前端交流QQ群:827389615,一起讨论学习吖!...原创 2020-12-31 19:32:16 · 274 阅读 · 0 评论 -
webpack—ES6语法处理
如果希望将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应原创 2020-12-31 18:10:27 · 183 阅读 · 0 评论 -
webpack-图片文件的处理
如果直接执行npm run build:读一下,意思大概是:你需要一个适当的loader来处理这个文件。所以先下载loader,这里注意一定要下载和webpack版本对应的loader,下面还要下载很多东西,@XXX,都是下载的对应版本。1.下载处理图片的url-loader2.在webpack.config.js中进行配置这个可以直接去官网复制,但是limit的默认值是8192,因为我的两张图片是9.13KB和17.31KB,如果是按默认值都会超范围,我要做的是当加载的图片大于和小于limi原创 2020-12-31 13:23:06 · 173 阅读 · 0 评论 -
webpack打包css遇到UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function问题
原因: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 (安装)这就可以啦好啦,内容就是这些原创 2020-12-31 08:58:54 · 204 阅读 · 0 评论 -
webpack打包以及遇到的Configuration file found but no entry configured. Use --help to display the CLI option
首先清楚如下文件夹各自的作用:dist文件夹:用于存放之后打包的文件src文件夹:用于存放我们写的源文件main.js:项目的入口文件mathUtils.js:定义一些数学工具函数index.html:浏览器打开展示的首页html一、webpack ./src/main.js ./dist/bundle.js这里main.js为入口函数打包方式:二、webpack1.执行 npm initpackage.json:通过npm init生成的,npm包管理的文件。原创 2020-12-30 22:14:45 · 1553 阅读 · 3 评论 -
安装webpack遇到npm ERR! code E502以及npm ERR! A complete log of this run can be found in等问题的解决办法
首先,看如下报错情况:遇到这个问题,我先去百度查了一下这四个ERR报错,解决办法有说是npm版本太老,但我觉得这应该不是我的问题所在,我是下的目前流行推荐的一个新版本,所以继续找答案,说应该用淘宝镜像。所以我就试了试首先执行下面命令:npm config set registry https://registry.npm.taobao.org再执行下面命令,看是否安装成功npm config get registry如果出现下面语句:https://registry.npm.taob原创 2020-12-30 12:58:09 · 2160 阅读 · 2 评论 -
自定义 Vue 中的 v-model 双向绑定
v-model 双向绑定实际上就是通过子组件中的 $emit 方法派发 input 事件,父组件监听 input 事件中传递的 value 值,并存储在父组件 data 中;然后父组件再通过 prop 的形式传递给子组件 value 值,再子组件中绑定 input 的 value 属性即可。子组件传值首先子组件需要一个 input 标签,这个 input 标签需要绑定 input 事件,$emit 触发父组件的 input 事件,通过这种方法子组件传递值给父组件<input type="tex原创 2020-10-05 14:29:37 · 177 阅读 · 2 评论