![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 69
公众号-测试生财
分享各类测试技术和资源,请关注微信公众号:测试生财。
展开
-
Vue自学之路11-属性绑定
Vue属性绑定属性绑定指的是Vue中属性绑定到变量,实现MVVMVue属性绑定语法v-bind语法<a v-bind:href='url'></a>缩写方式<a :href='url'></a>原生JS操作属性的方法(DOM操作)getAttribute:获取html标签的属性 setAttribute:设置html标签的属性属性绑定的例子<div id='app'> <!--原生h.原创 2021-04-18 09:18:11 · 193 阅读 · 0 评论 -
Vue自学之路10-简单的计算器
如何使用Vue实现一个简单计算器功能分析计算A和B的加和,显示到最终计算结果一栏。思路两个input输入框,分别使用v-model绑定a和b 计算按钮绑定事件,实现计算逻辑 将结果绑定到对应位置例子<div id='app'> <form> <div> <!--敲击delete键,调用handleContent,清空用户名--> <span>数值原创 2021-04-17 08:57:40 · 258 阅读 · 0 评论 -
Vue自学之路9-vue模版语法(事件修饰符&按键修饰符)
Vue中的事件修饰符1) .stop 阻止冒泡<input type='button' @click.stop='handle1()'/>VUE方式阻止冒泡</input>2) .prevent 阻止默认行为<a href="https://blog.csdn.net/ccgshigao?spm=1010.2135.3001.5343" v-on:click.prevent="handle2()"></a>Vue中的按键修饰符.原创 2021-04-16 07:44:51 · 193 阅读 · 0 评论 -
Vue自学之路8-vue模版语法(事件绑定)
事件绑定一个复杂的前端应用,离不开用户交互,而用户交互离不开事件绑定。Vue中事件绑定语法//1. v-on指令语法:<input type='button' v-on:click='num++' />//2. 简写方式(常用):<input type='button' @click='num++' />事件函数的调用方式//1. 直接绑定函数名称:<button v-on:click='say'>Hello</butto.原创 2021-04-15 08:42:13 · 124 阅读 · 0 评论 -
VUE自学之路7-vue模版语法(双向数据绑定)
MVVM含义:数据变化影响视图,视图变化反过来又影响数据。M(model):即data中的数据变量V(view):即所写的模块(dom元素)VM(view-model):实现model和view的控制逻辑实现过程:DOM listeners:监听View的变化,及时告知给Model。Data Bindings:绑定Model到View,模型变化后View及时做变化。v-model实现数据绑定<input type='text' v-m...原创 2021-04-13 08:02:56 · 109 阅读 · 0 评论 -
Vue自学之路6-vue模版语法(数据响应式)
什么是响应式html5中响应式:屏幕尺寸变化导致样式的变化。 数据的响应式(数据变化导致页面内容的变化)什么是数据绑定: 数据绑定:将数据填充到HTML标签中,html的视图和数据相互作用,相互影响。v-once:只编译一次,可以理解HTML中标签变为只读(数据变化不会在影响视图变化)。<div id='app'> <!-- 显示的信息后续不需要修改,可以直接声明v-once,可以提高性能--> <div v-once>{{msg}.原创 2021-04-12 07:55:54 · 110 阅读 · 0 评论 -
Vue自学之路5-vue模版语法(v-text,v-html,v-pre)
前言前一篇讲了v-cloak指令,今天来进行v-text,v-html,v-pre这三个指令的学习数据绑定指令v-text:用于填充纯文本 比插值表达式更加简洁,不存在闪动问题。 v-html:用于填充html片段 存在网络安全问题,容易遭到XSS工具,不应该使用在用户提交的内容上。 网站内部数据可以使用,第三方数据不可以用 v-pre:用于填充原始信息 显示原始信息,跳过编译过程 例子<div id='app'> <!--.原创 2021-04-08 07:33:22 · 193 阅读 · 0 评论 -
Vue自学之路4-vue模版语法(v-clock)
Vue模板Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接写渲染 (render) 函数,使原创 2021-04-06 09:22:26 · 291 阅读 · 0 评论 -
Vue自学之路3-vue模版初探
前端渲染前端渲染就是把数据填充到HTML标签中过程:模版+数据->前端渲染->HTML静态内容前端渲染方式1. 原生js拼接字符串方式:数据以字符串的方式拼接到HTML标签。缺点:不规范,代码不清晰,维护麻烦2. 前端模版引擎方式:基于art-template,代码更加规范,标准化优点:可读性提高,方便后期维护缺点:没有专门的事件机制,需要和js结合3. 使用vue特有的模板语法插值表达式 指令 事件绑定 属性绑定 样式绑定 分支循环结构原创 2021-04-02 06:30:05 · 120 阅读 · 0 评论 -
Vue自学之路2-vue初探
初探用vue实现一个“hello,world”例子1)原生JS的写法:DOM操作的方式<div id='msg'></div><script>var msg = "hello ,world"var div = document.getElementById('msg');div.innerHTML = msg;</script>2)JQUERY的写法<div id='msg'></div.原创 2021-04-01 08:25:57 · 76 阅读 · 0 评论 -
Vue自学之路1-vue概述
Vue概述简介vue是国产框架,作者尤雨溪,2014年2月份发布。官网:https://cn.vuejs.org/v2/guide/其中在2015发布了vue1.0,2016发布了vue2.0,目前最新版本为vue3。传统的JQuery和Bootstrap基本都是国外诞生的。vue1.0到vue2.0,语法发生了较大变化。Vue的设计初衷Vue 只关注视图层, 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。原创 2021-03-31 07:44:43 · 220 阅读 · 0 评论 -
js循环遍历数组的方式
前言最近在写前端代码,里面经常涉及到数组的循环取值。这里简单总结下前端中数组遍历的四种方式:数组下标循环 for in 循环 for of 循环 foreach循环例子假设有如下数组:members,每个数组元素是一个字典/map,要遍历数组打印每个memberID的值。var members =[{"memberID" : 1 },{"memberID" : 2 },{"memberID" : 3 }];数组循环//通过数组下标方式访问,比较通用的原创 2020-12-16 09:04:10 · 1386 阅读 · 0 评论 -
vue中axios异步调用接口的坑
背景最近在写vue项目的时候遇到一个axios调用接口的坑,有个前端模块涉及axios去调用多个接口,然后请求完获取数据之后,再使用windows.location.href重定向到新页面,这时候却发现axios请求的接口都是出于canceled的状态。例如:axios.get('/url1') .then(function (response) { console.log(response); }) .catch(function (error) { consol原创 2020-12-11 08:48:12 · 1431 阅读 · 0 评论 -
Linux上查看node和node_modules所在位置
背景公司的机器上安装了某些node包有冲突,这时候我想去清理一下现有的node包缓存,重新去安装一下node包,但是node_module的目录在哪个路径呢?解决方法1. 查看node_modules的目录,执行:npm root -g2. 查看npm的可执行文件所在目录:npm bin -g3. 我们还可以修改npm的工作目录。npm config setprefix /usr/local博主:测试生财座右铭:专注测试与自动化,致力提高研发效能;通过测试精进完成...原创 2020-11-24 08:33:01 · 9158 阅读 · 0 评论 -
npm运行报错:Error: ENOSPC: System limit for number of file watchers reached
背景最近用vue写一个项目,在服务器上用npm运行该vue项目的时候,执行npm run serve,整个过程执行到一半报错了:Error: ENOSPC: System limit for number of file watchers reached原因查了一下,是linux系统的限制导致这个报错了,需要设置一下:fs.inotify.max_user_watches这个参数。解决方法执行:vim/etc/sysctl.conf,添加如下内容:fs.inotify.ma..原创 2020-11-19 20:41:35 · 7738 阅读 · 4 评论 -
pm2的APP日志管理插件:pm2-logrotate
背景最近我所在项目的进程管理工具从supervisor切换到pm2了,原因之一是因为长期二者兼容导致维护成本过大。后来经过和研发同学沟通,最终选择统一成pm2,因为pm2在windows下也可以对进程进行管理,方便他们在windows本地开发环境起服务调试。supervisor的进程配置文件中自带了日志切分策略;而pm2本身是没有日志管理功能的。如果某服务的运行时间过长,日志会不断堆积,最终会造成机器的磁盘空间耗尽。我调研了一下pm2的日志管理,发现有个pm2-logrotate的插件,专门对p原创 2020-11-17 08:15:02 · 1570 阅读 · 0 评论 -
vue父组件调用子组件中的属性和方法
接上篇,vue的父组件向子组件获取值,如果父组件需要主动调用子组件中的属性方法该如何实现?获取方法1、 父组件中使用子组件的时候在给子组件定义一个ref属性2、父组件可以通过this.$refs.XXX,来操作子组件中的属性和方法子组件Sub1.vue<template> <module :title="title" /> <button :click="run()"></button> </te.原创 2020-11-13 08:24:01 · 688 阅读 · 0 评论 -
vue父组件向子组件传值
简介vue中组件与组件的关系存在两类:父子组件与非父子组件。如下图所示,三个组件中就包含了父子组件与非父子组件两种情况,这里组件之间的交互主要由值传递和事件触发调用两种方式,这里先分享下父组件向子组件值传递。方式父组件可以向子组件传递的值有三种类型属性变量或者纯文本 函数名 父组件自身实例(this)例子假设有两个组件App.vue和Sub1.vue,其中App.vue为父组件,Sub1.vue为子组件。父组件App.vue<template>原创 2020-11-12 08:54:21 · 120 阅读 · 0 评论 -
vue入门:属性绑定与事件绑定
简介vue中的html元素的属性和事件是支持通过变量方式动态修改,和原始js的dom操作有一些区别。这里总结一下vue的属性绑定与事件绑定的方法,以及与原生js的对比。属性绑定属性绑定指的是将html元素的一个属性值设置成变量。原生的html中,比如<input type="text" />,这里的type的值就是text。在vue中,我们可以把text设置成一个变量:input_type。可以写成<input :type="input_type" />,这里原创 2020-11-06 08:10:46 · 876 阅读 · 0 评论 -
vue踩坑:axios使用this指针
前言在vue中,请求后端接口的模块有三种:vue-resource axios fetch这我们使用axios去请求后端接口。安装进入vue项目的目录,执行:npm install axios --save使用axios支持的http请求方法如下axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.opt原创 2020-11-05 07:56:13 · 975 阅读 · 0 评论 -
npm run serve失败:重新生成node_modules/.bin
背景最近在开发一个前端项目,这个项目是从老的git工程拷贝过来的,在执行npm run serve的时候,报错说找不到vue-cli-service命令,但是原来的那个项目这么操作是没有问题的。报错:code: 'MODULE_NOT_FOUND', xxx/node_modules/.bin/vue-cli-service出问题了。node_modules/.bin的作用执行npm run,可以看到当前的package.json里面定义了三个可以执行的脚本命令,npm执行过程.原创 2020-10-12 08:13:03 · 2472 阅读 · 0 评论 -
linux下的node版本管理利器:nvm
nvm是一款node版本管理工具,简单来说,如果你想在一个环境下安装多个node版本,并向自由地切换相关版本,那你就需要使用nvm进行版本管理,有点类似pyenv,也是一款python版本管理工具。如机器上已安装过node环境,请先卸载再安装nvm,以防冲突。centos清理方式:#卸载npm sudo npm uninstall npm -g#卸载nodesudo yum remove nodejs npm -y#清除残留文件cd /usr/local/lib &&.原创 2020-08-05 08:19:31 · 1771 阅读 · 0 评论