Vue
Vue相关
北海之灵
这个作者很懒,什么都没留下…
展开
-
Vue使用QuillEditor富文本编辑器问题记录
Vue在使用 QuillEditor 富文本编辑器时遇到的问题汇总。原创 2023-08-04 16:08:24 · 983 阅读 · 0 评论 -
Vue视频播放组件
Vue视频播放组件,目前用过的感觉最好用的是vue-video-player组件,用起来也非常方便。页面效果如下安装npminstallvue-video-player--save导入import'video.js/dist/video-js.css'import{videoPlayer}from'vue-video-player'使用<template> <div class="box"> <video...原创 2021-09-24 16:09:24 · 4805 阅读 · 0 评论 -
Vue拖拽调整元素顺序
Vue中通过拖拽来调整元素的顺序,开发中碰到这个需求,网上找了找资料,写个例子记录下。<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> [v-cloak]{ display: none; } .box1{原创 2021-03-11 10:34:17 · 2259 阅读 · 0 评论 -
Vue项目配置 rem适配
1.编写rem 适配文件 remConfig.jsexport default function() { // var devicePixelRatio = 1; // var scale = 1 / devicePixelRatio; // document.querySelector('meta[name="viewport"]').setAttribute('content...原创 2019-10-23 09:51:29 · 1202 阅读 · 1 评论 -
Vue中跨域以及sessionId不一致问题解决方法
在使用Vue和SpringBoot做前后端分离项目时,会出现以下问题:前端直接请求数据会出现跨域访问限制的问题。 如果登录时还需要图片验证码验证,首先需要请求获取验证码的接口,然后将验证码存入session中并返回给前端,登录时拿用户输入的验证码和session中保存的验证码比较,这时会发现session中获取不到之前存入的验证码,这是sessionId改变导致的。1.后台数据请求部分处理...原创 2018-10-23 16:05:49 · 14835 阅读 · 13 评论 -
Vue使用watch监听路由的变化
watch除了可以监听data中数据的变化,还可以监听路由的变化。 监听 $route.path属性 watch:{ '$route.path':function(newVal,oldVal){ //console.log(newVal+"---"+oldVal); if(newVal === '/login'){ consol...原创 2018-09-29 18:03:07 · 36288 阅读 · 1 评论 -
Vue使用watch监听指定数据的变化
在Vue中,可以使用watch属性来监听data中某个属性值的变化。<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head><body> <div id='app原创 2018-09-29 16:53:55 · 9492 阅读 · 1 评论 -
Vue中使用localStorage存储数据
通过下面这个案例来了解localStorage的基本使用方法。输入评论人、评论内容,点击发表评论,评论数据将保存到localStorage中,并刷新评论列表。1.先组织出一个最新评论数据对象 var comment = {id:Date.now(), user:this.user, content:this.content}2. 把得到的评论对象,保存到localStora...原创 2018-10-08 13:30:17 · 29235 阅读 · 3 评论 -
Vue 使用beforeEach实现登录状态检查
使用VueRouter的beforeEach钩子函数,可以实现导航跳转前检查登录状态的需求。1.在登录请求接口时返回用户的信息,比如 userInfo:{userId:'123', userName:'小明'},登录成功之后将userInfo存入store中。2.使用beforeEach实现登录状态检查vueRouter.beforeEach((to, from, next) =&g...原创 2018-10-04 22:49:52 · 7198 阅读 · 5 评论 -
Vue devtools的安装
1.下载devtools源码首先在github下载devtools源码,地址为https://github.com/vuejs/vue-devtools2.下载安装依赖下载完成后解压,命令行进入vue-devtools-master目录 执行npm install, 下载依赖,然后执行npm run build,编译源程序编译完成后,目录结构如下...原创 2018-10-24 17:45:04 · 495 阅读 · 0 评论 -
Vue项目使用webpack打包发布到服务器
vue开发的项目,使用webpack打包命令 npm run build 打包之后,部署到Tomcat启动之后出现部分图片不显示或其它问题,需要做如下修改。1.修改config/index.js build 节点的 assetsPublicPath属性由 '/' 改为 './' 修改 build/utils.js 文件generateLoaders函数中 添加 publ...原创 2019-01-24 15:09:35 · 2383 阅读 · 0 评论 -
Vue 购物车案例
效果如下:代码:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>购物车示例</title> <style type="text/css"> table{ border:1px原创 2019-01-01 19:37:38 · 469 阅读 · 1 评论 -
Vue 组件通信
1.自定义事件-$emit子组件用 $emit() 来触发事件,父组件用 $on() 来监听子组件的事件。<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body>原创 2019-01-06 21:02:28 · 404 阅读 · 1 评论 -
Vue 使用 slot(插槽) 分发内容
当需要让组件组合使用,混合父组件的内容与子组件的模板时,就会用到 slot,这个过程叫做内容分发(transclusion)。它有两个特点:组件不知道它的挂载点会有什么内容。挂载点的内容是由它的的父组件决定的。 组件很可能有它自己的模板。props传递数据、events触发事件和 slot 内容分发就构成了 Vue 组件的3个 API 来源,再复杂的组件也是由这3部分构成的。1.单个s...原创 2019-01-07 22:42:58 · 1687 阅读 · 1 评论 -
Vue 数字输入框组件
输入框只能输入数字,并且有两个快捷按钮,可以直接加1或减1。除此之外,还可以额设置初始值、最大值、最小值、步长,在数值改变时,触发一个自定义事件来通知父组件。 在父组件中使用<template> <div> <number-box v-model="value" :max="50" :min="0" :step="2">原创 2019-01-13 22:45:18 · 1484 阅读 · 0 评论 -
Vue 标签页组件
效果: index.html<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>标签页组件</title> <style> [v-cloa原创 2019-01-20 12:39:49 · 1659 阅读 · 0 评论 -
Vue路由的基本使用
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="../css/bootstrap.css&q原创 2018-09-26 20:07:55 · 265 阅读 · 0 评论 -
理解Promise
通过一个读取文件内容的例子来了解下 Promise。有这样一个需求,使用 nodejs 先读取文件1,再读取文件2,最后读取 文件3.一.回调地狱代码如下:const fs = require('fs')const path = require('path')function getFileByPath(fpath,succCb, errCb){ fs.readFile...原创 2018-09-10 11:43:37 · 262 阅读 · 0 评论 -
Vue在子组件中调用父组件的方法并传参
1.在父组件 methods 中定义 show 方法,供子组件调用。 methods:{ show(data){ this.datamsgFormSon = data console.log(this.datamsgFormSon) } },2. 在引用子组件的时候,将 父组件的 show 方法传递给子组件。使用的是事件绑定...原创 2018-09-06 14:49:05 · 15889 阅读 · 0 评论 -
Vue中通过属性绑定为元素设置class类样式
1.数组<h1 :class="['red','italic']">这是一个很大的H1,大到你无法想象</h1>2.数组中使用三元表达式<h1 :class="['thin','italic',isactive?'active':'']">这是一个很大的H1,大到你无法想象</h1>3.数组中嵌套对象<h1 :clas原创 2018-08-11 10:36:48 · 6655 阅读 · 0 评论 -
Vue中通过属性绑定为元素绑定style行内样式
1.直接在元素上通过:style的形式,书写样式对象<h1 :style="{color:'red','font-weight':200}">这是一个H1</h1>2.将样式对象定义在data中,并直接引用到:style中在data上定义样式data:{ styleObj1:{color:'blue','font-weight':200,'fo...原创 2018-08-11 10:56:53 · 35615 阅读 · 0 评论 -
Vue指令之 v-for的使用
1.迭代普通数组在data中定义普通数组data:{ list:[1,2,3,4,5,6]}在html中使用 v-for 指令渲染<p v-for="(item,i) in list">--索引值--{{i}} --每一项--{{item}}</p>2.迭代对象数组在data中定义对象数组data:{ list:[1...原创 2018-08-11 11:35:33 · 386614 阅读 · 15 评论 -
Vue字符串padStart和padEnd方法
ES2017 引入了字符串补全长度的函数。如果某个字符串的长度不够指定的长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。'a'.padStart(3, '0') // '00a' 'x'.padEnd(5, 'ab') // 'xabab' 'x'.padEnd(4, 'ab') // 'xaba'上面代码中,padStart()和padSt...转载 2018-08-14 19:07:29 · 1604 阅读 · 0 评论 -
Vue自定义指令
1.使用 Vue.directive()定义全局的指令其中,参数1是指令的名称,注意,在定义的时候,指令的名称前面,不需要加 v- 前缀了,在调用的时候,必须在指令名称前面加上 v-前缀来进行调用。参数2:是一个对象,在这个对象上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作。bind:每当指令绑定到元素上的时候,会立即执行这个 bind 函数,只执行一次。注意:...原创 2018-08-14 20:08:59 · 1598 阅读 · 0 评论 -
Vue之v-for循环中key属性注意事项
当Vue用 v-for 正在更新已渲染过的元素列表是,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类...原创 2018-08-11 16:14:51 · 41293 阅读 · 2 评论 -
Vue之 v-if 和 v-show 的使用
v-if 和 v-show 都能控制元素的隐藏和显示。一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 则v-if 较好。v-if 的特点:每次都会重新删除或创建元素。v-show 的特点:每次不会重新进行DOM的删除和创建操作,只是切换了元素的display:none 样式。下面是...原创 2018-08-11 16:22:40 · 814 阅读 · 0 评论 -
Vue过滤器
1.全局过滤器Vue允许你自定义过滤器,可被用作一些常见文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在JavaScript 表达式的尾部,由 "管道"符指示。过滤器的语法过滤器中的function,第一个参数,已经被规定死了,永远都是过滤器管道符前面传递过来的数据。 /*过滤器的语法*/ //过滤器中的function,第一...原创 2018-08-13 16:31:23 · 382 阅读 · 0 评论 -
Vue之v-model指令实现数据双向绑定
v-bind指令只能实现数据的单向绑定,从M绑定到V,无法实现双向绑定。使用v-model指令,可以实现表单元素和Model中数据的双向绑定,并且v-model指令只能运用在表单元素中。<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...原创 2018-08-08 17:20:12 · 2617 阅读 · 0 评论 -
Vue事件修饰符
.stop 阻止冒泡.prevent 阻止默认事件.capture 添加事件侦听器时使用事件捕获模式即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。 就是谁有该事件修饰符,就先触发谁。.self 只当事件在该元素本身(比如不是子元素)触发是触发回调.once 事件只触发一次<html> <hea...原创 2018-08-07 14:20:39 · 210 阅读 · 0 评论 -
Vue自定义按键修饰符
按键修饰符也就是Vue提供的键盘监听事件。代码如下:<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head><body> <div id='app' style原创 2018-08-13 17:12:43 · 1561 阅读 · 1 评论 -
Vue生命周期
一.组件创建期间的4个钩子函数1.beforeCreate实例完全被创建出来之前会执行这个函数,在这个阶段,data 和 methods中的数据都未被初始化,还不能访问。2.created实例已经创建出来了,如果要调用methods中的方法,或者操作data中的数据,最早只能在 created中操作。3.beforeMount模板已经编译完成,尚未渲染到页面上。在bef...原创 2018-08-25 16:36:35 · 252 阅读 · 0 评论 -
Vue创建组件的三种方式
方式一:使用Vue.extend来创建全局的Vue组件1.1 使用Vue.extend来创建组件模板对象var com1 = Vue.extend({ template:'<h3>这是使用Vue.extend创建的组件</h3>' //通过template属性,制定了组件要展示的html结构 })1.2 使用 Vue.component完成...原创 2018-09-03 16:03:54 · 4190 阅读 · 1 评论 -
Vue组件中的data必须是一个function
组件可以有自己的data,并且data必须是一个function。在下面这个例子中,data 返回了一个在外部定义的对象。并且这个组件在页面中使用了3次,点击+1时出现了如下情况:data中的count属性影响到了所有实例。<html> <head> <meta http-equiv="Content-Type" content="text/...原创 2018-09-03 17:07:33 · 1559 阅读 · 0 评论 -
Vue父组件向子组件传值以及data和props的区别
1.在父组件中定义 msg 属性 data:{ msg:'123 -我是父组件中的数据' },2.引用子组件父组件可以在引用子组件的时候,通过属性绑定的形式,把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用。把父组件传递过来的 msg 属性,绑定到子组件的 parentmsg 属性上。<com1 :parentmsg...原创 2018-09-06 11:24:18 · 28499 阅读 · 1 评论 -
Vue基础指令
1.插值表达式和v-text<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head><body><div id="app"> &原创 2018-08-06 17:47:20 · 248 阅读 · 0 评论