vue

vue的hover事件

使用Vue来实现鼠标悬停效果。可以使用事件处理器v-on指令(简写为:@)来完成。为标签绑定mouseenter以及mouseleave事件即可。<template><div><ul><templatev-for="(item)initems"><li@mouseo...
开发笔记·2022-11-17

vue项目中使用v-if判断数组长度length报错

Error in render: "TypeError:Cannotreadproperty'length'ofundefined"解决方法:shopListData.attrs!==undefined&&shopListData.att...

vue深度监听对象

watch:{picker:{//为对象名handler(){//对象内数据变化会执行此方法document.getElementById('nowColor').style.color=this.picker.color},deep:true//深度监听申明字段}} ...
开发笔记·2022-05-19

Vue过滤器的使用

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>vue过滤器</title></head><body><divid='app'><h1>{{...
开发笔记·2022-05-11

vue导航条怎样去掉#

VUE默认是hash浏览模式,换成history可以去掉#exportdefaultnewRouter({mode:'history',routes:[]}) ...
开发笔记·2021-04-26

Vue(4)- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用

一、获取原生的DOM的方式  在js中,我们可以通过id、class或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加ref属性,通过this.$refs获取,如下:<divid="app"></div><scriptsrc="https://cdn...

Vue(3)- 安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用

一、安装脚手架1、下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装。2、安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图:3、查看版本,如下图:4、在成功安装node.js(即能够成功查看版本如上图)的前提下,再安装淘宝npm(http://n...

Vue(2)- v-model、局部组件和全局组件、父子组件传值、平行组件传值

一、表单输入绑定(v-model指令)  可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。  详细用法参见官方文档:https://cn.vuejs.org/v2/guide/forms.html二、局部组件和全局组件1、了...

Vue(1)- es6的语法、vue的基本语法、vue应用示例,vue基础语法

一、es6的语法1、let与var的区别  ES6新增了let命令,用来声明变量。它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效。如下代码:{  leta=10;  varb=1;}a//ReferenceError:aisnotdefined.b//1  上面代码在代码块之中,分别...
代码星球·2021-02-25

在vue-cli生成的项目中使用karma+chrome进行单元测试

用vue-cli生成项目时,如果选择了单元测试,那么会采用karma+mocha作为单元测试框架,默认使用的浏览器是PhantomJs。 Karma是一个基于Node.js的JavaScript测试执行过程管理工具(TestRunner)。可启动所有主流Web浏览器作为测试容器,运行时会启动一个web服务器,...

在vue-cli搭建的项目中在后台mock接口中支持req.body和req.cookies

在《vue-cli搭建的项目中增加后台mock接口》中实现了后台mock,但是前端post的t数据都要在mock的后台接口中使用req的接收数据事件获取http协议body中的数据。req.on('data',function(chunk){//接收字节数据});req.end('data',function(){//...

在vue-cli搭建的项目中增加后台mock接口

用vue-cli搭建一个前端开发环境确实是极其方便,在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互,特别在敏捷开发中,前后端都要提前确定业务接口并进行打桩,在开发过程中基本是没有现成的后台可以调用,基本上都是自己写mock进行模拟。在vue-cli搭建的项目中,框架上用的是express的web框架...

vue-router有哪几种导航钩子( 导航守卫 )?

问题一:vue-router有哪几种导航钩子(导航守卫)?1、全局守卫: router.beforeEach2、全局解析守卫: router.beforeResolve3、全局后置钩子: router.afterEach4、路由独享的守卫: beforeEnter5、组件内的守卫...

vue如何禁止弹窗后面的滚动条滚动?

methods:{//禁止滚动stop(){varmo=function(e){e.preventDefault();};document.body.style.overflow='hidden';document.addEventListener("touchmove",mo,false);//禁止页面滑动},/**...

vue-cli工作中如何自定义一个过滤器?

文件结构:.├──src│├──filter││├──filter.js│││└──main.js└──...过滤器们放在filter文件夹下filter/filter.js:这个文件主要是写了过滤器实现的方法,然后export进行导出。functionfilterOne(n){returnn+10;}function...