![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
十二.vue
文章平均质量分 51
庚中
这个作者很懒,什么都没留下…
展开
-
Vue函数式组件来防抖
前言看过源码发现,我们常用的和就是一个高阶(抽象)组件。export default { name: 'keep-alive', abstract: true, ...}所有的高阶(抽象)组件是通过定义abstract选项来声明的。高阶(抽象)组件不渲染真实DOM。 一个常规的抽象组件是这么写的:import { xxx } from 'xxx'const A = () => { .....}export default { name: 'xxx',原创 2021-01-30 01:53:32 · 397 阅读 · 0 评论 -
优化:一次性全局组件注册
需要使用组件的场景:<template> <BaseInput v-model="searchText" @keydown.enter="search"/> <BaseButton @click="search"> <BaseIcon name="search"/> </BaseButton></template><script> import BaseButton原创 2021-01-29 23:35:15 · 164 阅读 · 0 评论 -
项目中优雅的使用svg
搭建环境获取图标我们使用vue-cli3搭建项目,怎么样才算优雅?首先我们在src目录下新建icons/文件夹,在icons/文件夹下建svg/文件夹,将来我们项目中的svg图标都会统一放在这里,去阿里图标库下载svg图标点击svg下载到icons/svg目录下修改文件名为qq.svg,或者是在icons/svg目录下新建一个qq.svg文件,把复制的svg代码放进去也可以,这样就获取到了一个图标,很easy.处理svg图标ue-cli对svg文件有默认的url-loader 处理,我们要使用s原创 2021-01-29 22:53:48 · 818 阅读 · 1 评论 -
优雅的导出请求接口
不知道大伙是如何定义请求接口的,就我目前这个项目而言,是这么做的:// api.jsimport http from './config/httpServer.js' /* 登入页面获取公钥 */export const getPublicKey = (data) => { return http({ url: '/userGateway/user/getPublicKey' }, data)}// 用户登录export const login = data => {原创 2020-12-19 17:09:45 · 461 阅读 · 1 评论 -
超实用的全局Vue自定义指令
Vue 自定义指令在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。批量注册的方法新建 directives/index.js 文件import cop原创 2020-12-17 10:29:43 · 1730 阅读 · 1 评论 -
vue子→父组件的$emit传值操作
父到子传值过程:在子组件son里定义一个方法,在这个方法里添加this.$emit()方法,这个方法有两个参数,第一个是string类型的自定义事件名,第二个是要传递的值,然后回到父组件模板的子组件名里用v-on绑定子组件写的自定义事件,对应的值就写父组件的方法say也可以写成say(美元event),在父组件的方法里接收这个参数,执行自己的逻辑操作即可....原创 2019-04-19 09:56:42 · 1457 阅读 · 0 评论 -
Vue内置组件之slot
先准备一个组件:现在有一个需求是:在三个p标签里加上各自的内容,怎么实现呢?总共分为两步:第一步:在html的组件中用slot属性传递值(slot属性里写键名) . <div id="app"> <jspang> <!-- 第一步:传递数值(slot属性里写键名) --> <span slot="...原创 2019-03-27 12:26:05 · 285 阅读 · 0 评论 -
vuex集中式状态管理架构
vuex是一个专门为vue.js设计的集中式状态管理架构.什么是状态?简单来说就是data中需要共用的属性.比如:我们有几个页面要显示用户名和用户等级,购物车信息,或者显示用户的地理位置.如果我们不把这些信息设置为状态,那每个页面遇到后,都会到服务器进行查找计算,返回后再显示,这样很麻烦,所以vue作者就给我们提供了vuex。一.来个小demo...原创 2019-06-21 23:13:22 · 366 阅读 · 0 评论 -
Vue-CLI脚手架的使用(重要,新的开发模式)
Vue-CLI脚手架的使用(重要,新的开发模式)什么是Vue-CLI?它是官方推出的快速构建单页应用的脚手架.0.安装vue-cli的前提是你已经安装了npm.检查是否安装npm方法:终端输入npm -v(中间有空格)1.安装全局的脚手架(检查脚手架是什么版本:vue -V,注意这里的V是大写)最新脚手架版本是3.0,安装方法如下:cnpm install -g @vue/cli...原创 2019-03-28 12:21:18 · 1936 阅读 · 0 评论 -
Vue实例事件总结($on,$once,$off,$emit)
1.什么是实例事件?实例事件就是在构造器外部调用构造器内部的数据。2.使用场景:比如构造器已经有一个加的方法,现在领导说还要做一个减的方法,而我又不想动构造器里面的信息,那就可以使用实例事件了.操作如下:3.与$on对应的还有一个$once上述代码只改一个单词$once app.$once('reduce',function(){ console.log("减的方...原创 2019-03-27 11:30:31 · 17781 阅读 · 0 评论 -
Vue实例方法总结($mount,$forceUpdate,$nextTick,$destroy)
一.$mount方法$mount方法是用来挂载我们的扩展的.二.$destroy销毁方法1.html写在app外面,注意因为是外面,所以点击要用onclick <div id="app"> <h3>扩展构造器</h3> <author></author> </div> &...原创 2019-03-27 00:13:52 · 2989 阅读 · 0 评论 -
Vue全局API之Vue.set方法
作用:改变data里面的值,如下:参数介绍:个人感觉这个方法没什么作用,我们可以直接修改app.count++也可以达到这个效果或者使用outData.count++也可以实现这个效果Vue.set方法为什么存在?答:由于Javascript的限制,Vue不能自动检测以下变动的数组:1.当你利用索引直接设置一个项时,vue不会为我们自动更新;2.当你修改数组的长度时,vue...原创 2019-03-23 23:19:10 · 736 阅读 · 0 评论 -
Vue实例入门-实例属性
什么是实例?实例就是在构造器外部操作构造器内部的属性选项和方法,它的作用是给原生的或者其他js框架提供了一个融合的接口,让Vue和其他框架可以一起使用.下面进行代码演示:1.让Vue和Jquery.js一起使用.页面显示是:我是jQuery,而不是hello Vue了。2.在构造器外面调用构造器里面的方法...原创 2019-03-26 23:07:49 · 195 阅读 · 0 评论 -
Vue选项之delimiters修改插值符
有时候我们使用"{{内容}}",当后台的插值符跟现有的插值符有冲突时,这时就要改变我们的插值符,操作如下: <body> <div id="app"> <!-- 插值符改为了es6插值形式了 --> ${num} <p><button @click="add">ADD</b...原创 2019-03-26 18:24:36 · 2411 阅读 · 0 评论 -
Vue选项之extends扩展
extends扩展和mixins很像,不同点是extends传入的是对象写法,而mixins是数组写法.<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-w...原创 2019-03-26 18:14:38 · 9303 阅读 · 1 评论 -
Vue选项之mixins混入
mixins一般有两种用途:1.当你已经写好了构造器之后,需要增加方法或者临时的活动时使用的方法,这是用混入会减少源代码的污染;下面的需求是构造器已经完成,突然要额外增加控制台打印变化的数据,操作如下:<body> <div id="app"> {{num}} <p><button @click="add"&g...原创 2019-03-26 17:48:34 · 336 阅读 · 0 评论 -
总结component和components,routes和route,router,$route和$router出现的场景
PS:总结component和components,routes和router出现场景:1.component(单数):a.在路由规则里出现过;b.在内置标签也出现过;c.全局组件注册也出现过;2.components(复数):a.组件文件夹里出现过;b.局部注册时出现过;3.routes(路由规则):a.写路由配置出现过;4.router(路由对象):a.router文件夹...原创 2019-04-20 00:27:09 · 8467 阅读 · 3 评论 -
vue-router路由管理器的使用
vue-router路由管理器的使用1.什么是router(路由)?这里的路由并不是指我们平时所说的硬件路由器,在vue里是指单页应用的路径管理器,再通俗点来说,vue-router就是我们WebApp的链接路径管理系统。有的小伙伴会有疑虑,为什么我们不能像原来一样直接用标签编写链接哪?因为我们用Vue作的都是单页应用,就相当于只有一个主的index.html页面,所以你写的标签是不起作用的...原创 2019-04-20 00:45:28 · 2633 阅读 · 0 评论 -
Vue.js面试题2
目录 1. 说一下Vue的双向绑定数据的原理 2. 解释单向数据流和双向数据绑定 3. Vue如何去除url中的 # 4. 对 MVC、MVVM的理解 5. 介绍虚拟DOM 6. vue生命周期的理解 7. 组件通信 8. 路由实现 9. v-if 和 v-show 区别 10. route和route和route和router的区别 11. NextTick 是做什么的 ...转载 2019-03-29 09:10:31 · 967 阅读 · 0 评论 -
axios封装的办法
1.建立单独的api.js2.使用原创 2019-06-18 10:06:18 · 130 阅读 · 0 评论 -
vue登录权限判断方法
在路由配置里,使用路由的全局导航守卫来判断是否登录:// 实例化对象let router = new VueRouter({ routes})// 注册导航守卫(回调函数)router.beforeEach((to, from, next) => { if (to.path === '/login') { // 登录页 不需要判断 next(); } ...原创 2019-06-20 15:14:03 · 4247 阅读 · 2 评论 -
vue-事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。.stop.prevent.captu...原创 2019-06-20 09:48:50 · 109 阅读 · 0 评论 -
async-await的原理和使用
总结:其实前面加了async的函数,当我在这个函数调用的时候进行打印发现它输出的是一个promise对象,其实这个函数的本质就是返回了一个promise对象,在这个函数里里我们加上await后,即使调用的是异步代码,它也会变成类似于同步,只有让这个异步代码执行完后,才会执行下面的同步代码来执行,这就是它的本质。<!DOCTYPE html><html lang="en">...原创 2019-06-19 00:02:12 · 4592 阅读 · 2 评论 -
cms-手机信息分享系统
这是一个移动端的信息系统,使用的是vue+mint-ui开发,效果如下:一.创建项目1.创建项目命令:vue init webpack cms2.下面是各自选项说明:在dev里面加一个–open空格,可以自动打开浏览器.3.安装mint-ui框架cnpm install mint-ui -S在main.js里面引入:// 引入mint-ui和css(记得自己引入css)...原创 2019-05-28 19:08:30 · 400 阅读 · 0 评论 -
使用Socket.io实现实时更新聊天记录
一.使用Socket.io实现实时更新聊天记录(即不同的窗口实时更新数据)实现如图:1.前言先了解什么是WebSocketWebSocket 连接本质上就是一个 TCP 连接,WebSocket会通过http请求建立,建立后的WebSocket会在客户端和服务器端建立一个持久的连接,直到有一方主动的关闭了该连接。所以现在服务器就知道有哪些用户正在连接了,这样通讯就变得相对容易了。2.So...原创 2019-05-17 23:54:57 · 2139 阅读 · 0 评论 -
京东金融项目
JDjingrong京东金融项目一.开始项目(里面的初始文件可以用来移动端初始化)1.下载初始文件,里面已整理好移动端初始样式(支持es6,引入scss+css module,自动刷新,可以用来移动端初始化),用git版本回退到ccbe7f9即可;接着在git安装插件和运行开启服务命令,最终界面显示如下代表成功.小技巧:终端ls命令可以显示当前目录文件;...原创 2019-05-23 00:34:45 · 1793 阅读 · 1 评论 -
slot的使用
1.首先,什么是slot?slot在vue里叫内容分发(也叫插槽),它写在子组件中,它作用域在父组件上的(作用域在父组件上很重要).2.slot的用法(代码演示)1.单个slot<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta...原创 2019-05-25 00:15:58 · 2193 阅读 · 0 评论 -
一键切换语言(多语言插件vue-i18n的使用)
实现效果:一.安装cnpm i vue-i18n --save二.main.js中全局引入import VueI18n from 'vue-i18n';Vue.use(VueI18n)// vue-i18n其实是一个对象,每种语言对应一个keyconst messages={ en:{ message:{ hello:"hello world" ...原创 2019-05-19 11:09:06 · 2264 阅读 · 0 评论 -
vue非父子组件的传值操作(中间件bus的使用)
非父子组件通信有两种vuex和bus.js因为vuex杀鸡不用牛刀,下面咱讲下使用 bus.js 实现非父子组件通讯:假设在工作中,有三个 .vue 文件:main.vue、Hello.vue、Hi.vue。main.vue 是主页面,Hello.vue 和 Hi.vue 类似于头部导航条和底部导航栏。现在Hi.vue 需要获取 Hello.vue 传递的信息。操作步骤如下:1.main....原创 2019-04-22 16:47:45 · 994 阅读 · 0 评论 -
Vue选项之watch侦听器
侦听器:在数据变化的监控经常使用.一.看一个监控变化的案例我们可以先看一个简单的数据变化监控的例子,例如天气预报的穿衣指数,它主要是根据温度来进行提示的,温度大于26度时,我们建议穿T恤短袖,温度小于26度大于0度时,我们建议穿夹克长裙,温度小于0度时我们建议穿棉衣羽绒服,下面来看一下实现代码:<body> <div id="app"> <...原创 2019-03-26 10:12:55 · 931 阅读 · 0 评论 -
Vue选项之methods方法的四个注意点
methods方法中有四个注意点:一.在methods方法里传入参数;1.在html里写要传入的值;<button @click="add(2)">ADD</button>2.在方法里接收;二.methods方法里的第二个参数$event:它传递的是关于鼠标的一些属性和方法三.使用native修饰符给组件绑定vue构造器里的原生事件.默认在别的组件里使用...原创 2019-03-25 23:09:24 · 15201 阅读 · 1 评论 -
Vue选项之computed计算属性
computed 属性是非常有用,在输出数据前可以轻松的改变数据.比如有一个需求:翻转数组,使新闻按照最新时间依次显示,实现如下:原创 2019-03-25 17:23:24 · 196 阅读 · 0 评论 -
vue组件详解
1.组件的两种注册方法:全局注册(全局注册后任何Vue实例都可以使用):全局注册代码:&amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;html lang=&amp;amp;amp;amp;quot;en&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp原创 2019-03-06 00:08:03 · 253 阅读 · 0 评论 -
vue学习总结(二:计算属性和侦听器)
vue学习总结:一.做官网todo项目(看代码)二.计算属性前言:模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,当模板中要处理复杂逻辑时,为了简洁,你都应当使用计算属性:二.侦听器:...原创 2019-02-22 22:27:29 · 176 阅读 · 0 评论 -
vue学习总结八(做后台管理系统5-2)
一.导航守卫的使用,实现登录判断1.首先,去main.vue里面把判断token的beforeCreate生命周期函数去掉,因为我们要在router.js路由里用导航守卫去代替:二.主页开始1.布局:使用element-ui2.逻辑开始...原创 2019-04-01 23:25:04 · 333 阅读 · 0 评论 -
vue学习总结最后一天
一.路由的使用二.vuex的使用1.Vuex 是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的数据,并以相应的规则保证数据以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。下面演示使用公共仓...原创 2019-01-21 14:14:19 · 310 阅读 · 0 评论 -
Vue面试总结
一.vue面试题目1.请说一下,vue双向数据绑定的原理?我查看了一下vue官方文档,文档提示了Vue响应式原理利用的是Object.defineProperty()方法,通过查阅文档发现它是es5推出的,这也说明了为什么vue在低版本的ie不支持的原因,实际vue是兼容到ie8以上,这个defineProperty方法的作用是为某个对象增加一个属性,同时可以增加(get和set方法),这两个...原创 2019-01-19 21:10:05 · 393 阅读 · 0 评论 -
vue学习总结(四-多个页面间使用组件)
一.Vue Router路由管理器的使用案例效果:一.使用步骤:定义一个html结构: &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;app&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;a原创 2019-01-08 21:17:00 · 263 阅读 · 0 评论 -
vue学习总结七(做后台管理系统5-1)
一.准备项目.1.将 API Server 部署到本地1. 创建一个名为 itcast 的数据库2. 将 itcast.sql 导入 itcast 数据库中,开启数据库3. 解压 api-server.zip4. 运行解压包里的bat,运行后自动会出来黑窗,5. 测试接口可以用postMan即可如下图则成功2.创建仓库,并上传到远程,命令如下-f是强行的意思.二.开始项...原创 2019-04-02 09:55:49 · 384 阅读 · 0 评论 -
vue学习总结(三,案例用vue开发网易云音乐(已实现在线播放和下载))
效果如图:完整代码:&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;原创 2019-01-07 21:38:49 · 2458 阅读 · 1 评论