![](https://img-blog.csdnimg.cn/20190918135101160.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue基础
文章平均质量分 84
以实战为线索,逐步深入Vue开发各个环节
samllplum
有智者立长志 无志者长立志
展开
-
hooks 的定义
在 react@16.x 之前,当我们谈论 hooks 时,我们可能谈论的是“组件的生命周期”。但是现在,以 react 为例,hooks 是:一系列以 “use” 作为开头的方法,它们提供了让你可以完全避开 class式写法,在函数式组件中完成生命周期、状态管理、逻辑复用等几乎全部组件开发工作的能力。...原创 2022-07-02 09:33:38 · 3718 阅读 · 0 评论 -
computer、methods和watch(计算属性、方法和侦听器)深度理解
computed:属性最初看起来像一个方法,但事实却又不是方法。在Vue中,我们使用data来跟踪对特定属性的更改,得到一定的反应。计算属性允许我们定义一个与数据使用相同方式的属性,但也可以有一些基于其依赖关系的自定义逻辑。你可以考虑计算属性的另一个视图到你的数据。(有return返回值) methods:正如他的名字一样,它们是挂载在对象上的函数,通常是Vue实例本身或Vue组件。...原创 2020-05-12 17:49:02 · 539 阅读 · 0 评论 -
vue-router详解
路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮 => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分。三个基本的概念 route, routes, rout...原创 2020-05-12 17:48:41 · 162 阅读 · 0 评论 -
Mint UI组件快速上手,在项目中使用mint UI
一.Mint UI是什么Mint UI 是饿了么团队开源的一款基于 Vue.js 的移动端组件库Bootstrap「它是 Twitter 开源的一个 css/html 工具包」二.引入 Mint UI1、使用 cdn 的方式引入<!DOCTYPE html><html><head> <title>MintUI</t...原创 2020-05-12 17:48:09 · 585 阅读 · 0 评论 -
VUE更新版本浏览器缓存问题
1、修改webpack .prod.conf.js文件const version = new Date().getTime();output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash:8].' + version + '.js'), chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].' + version..转载 2020-05-11 15:02:02 · 2328 阅读 · 0 评论 -
vue项目中在本地模拟数据,请求数据步骤
1.先将需要模拟的数据放入mock文件夹中2.在build文件夹中,找到 webpack.dev.conf.js ,我们需要在这个js文件中配置Json//第一步 const portfinder = require('portfinder'),在后面加上const express = require('express');const app = express(); //请求s...原创 2019-05-28 11:17:31 · 3618 阅读 · 4 评论 -
Vue中axios使用详解
一:axios定义axios是什么:axios它是基于promise的http库,可运行在浏览器端和node.js中,然后作者尤雨溪也是果断放弃了对其官方库vue-resource的维护,直接推荐axios库axios的作用:axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。具备以下特征: a.从浏览器中创建 XMLHttpRequestb.从...原创 2019-05-20 10:24:35 · 9931 阅读 · 1 评论 -
使用npm安装模块时-g --save --save-dev有什么区别
在使用 npm install 安装模块的模块的时候 ,一般会使用下面这几种命令形式:npminstallmoduleName#安装模块到项目目录下 npminstall-gmoduleName#-g的意思是将模块安装到全局,具体安装到磁盘哪个位置,要看npmconfigprefix的位置,具体查看方法是在终端输入npm config edit,在弹出的文档中找到...原创 2019-05-14 21:24:24 · 418 阅读 · 0 评论 -
vue-music使用后端代理请求歌单数据接口详解
在获取歌单数据的时候,我们发现用jsonp获取接口的时候会报错,这是为什么呢?原因是qq音乐在请求头里面加了authority和refer等 ,如果我们通过jsonp实现跨域来请求数据的话 是根本不能够修改请求头的 ,如果要使用axios直接进行跨域访问是不可以的,这时候我们可以进行后端接口代理 ,客户端请求服务端的数据是存在跨域问题的,而服务器和服务器之间可以相互请求数据,是没有跨域...原创 2019-04-19 17:29:50 · 707 阅读 · 0 评论 -
vue-music实现轮播无缝滚动better-scroll
最近在写一个基于vue2.0的移动端音乐项目,昨天写到 了首页的轮播图部分,跟着视频教程写的,没想到最后却出现了一大堆错误,并且都是视频中所没有的,自己思考了很久,也不知道是怎么回事,今天早上开机之后,百度发现,原来是better-scroll的版本为题,视频中用的是老版本"better-scroll": "^0.1.15",而 我npm安装的是新版本"better-scroll": "^1.15...原创 2019-04-19 09:46:21 · 634 阅读 · 0 评论 -
vue中ref属性详解
为了访问到DOM元素的值,要用到ref属性,将以上的最外层Div改写为:<div class="menu" ref="menuBorder">就可以将class为menu的dom属性集合,即menuBorder挂载到this.refs上,通过this.refs.menuBorderj就可以访问了// html<ul> <li v-for...原创 2019-04-18 15:54:17 · 7033 阅读 · 0 评论 -
vuex详解
官方解释Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。Vue的核心部分(应用的核心是 store(仓库,一个容器),s...原创 2019-03-21 20:47:42 · 98 阅读 · 0 评论 -
Vue中slot初理解
初步理解:<Child> <span style=”color:red;”>hello world</span></Child>在组件标签Child中的span标签会被组件模板template内容替换掉,当想让组件标签Child中内容传递给组件时需要使用slot插槽;就是在组件里“占坑”,在组件模板中占好了位置,当使用该组件...原创 2019-03-17 11:27:49 · 454 阅读 · 0 评论 -
vue-router路由配置和使用步骤整理
1.路由基本概念其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮 => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分三个基本的概念 route, routes...原创 2019-03-11 11:34:59 · 1989 阅读 · 1 评论 -
v-if 和 v-show 有什么区别?
v-show 仅仅控制元素的显示方式,将 display 属性在 block 和 none 来回切换;而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时,使用v-show会更加节省性能上的开销;当只需要一次显示或隐藏时,使用v-if更加合理。...原创 2019-03-04 16:38:54 · 270 阅读 · 0 评论 -
使用WebStorm开发web前端 网页中文乱码问题的解决方案
具体方法:file -----> settings 搜索encoding在fileencoding下,将IDE Encoding,Project Encoding和下面的Default Encoding for properties file都更改为utf-8。这样,之后每次新建的文件都会默认为编码格式为utf-8,不需要再在每个文件或者每个对文件的引用中添加charset=“ut...原创 2019-01-21 17:54:31 · 1825 阅读 · 0 评论 -
vuejs的:is和is使用和区别
vue中is特性 将已写好的组件挂载到已存在的元素上,遇到某些元素,此时的组件将失去作用,比如: <ol> <ul>-----------------认<li> <table>--------------------认<tr> ...原创 2019-01-21 16:02:14 · 1445 阅读 · 0 评论 -
vue生命周期钩子函数带图详解
beforeCreate:在实例初始化之后,**数据观测(data observer) ** 和 event/watcher事件配置 之前被调用,注意是 之前,此时data、watcher、methods统统滴没有。 这个时候的vue实例还什么都没有,但是$route对象是存在的,可以根据路由信息进行重定向之类的操作。 created:在实例已经创建完成之后被调用。在这一步,实...原创 2019-01-18 10:14:04 · 608 阅读 · 1 评论 -
Vue中的join(),reverse()与 split()函数用法解析
html<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">逆转消息</button></div>Vue.jsvar app5 = new Vue({ el: '#app-5',原创 2019-01-17 22:00:02 · 5307 阅读 · 2 评论