随笔分类 - 前端
测试要会的前端技能~
摘要：Vue属性绑定 属性绑定指的是Vue中属性绑定到变量，实现MVVM Vue属性绑定语法 v-bind语法 <a v-bind:href='url'></a> 缩写方式 <a :href='url'></a> 原生JS操作属性的方法（DOM操作） getAttribute：获取html标签的属性 se
阅读全文
摘要：如何使用Vue实现一个简单计算器 功能分析 计算A和B的加和，显示到最终计算结果一栏。 思路 两个input输入框，分别使用v-model绑定a和b 计算按钮绑定事件，实现计算逻辑 将结果绑定到对应位置 例子 <div id='app'> <form> <div> <!--敲击delete键，调用h
阅读全文
摘要：Vue中的事件修饰符 1) .stop 阻止冒泡 <input type='button' @click.stop='handle1()'/>VUE方式阻止冒泡</input> 2) .prevent 阻止默认行为 <a href="https://blog.csdn.net/ccgshigao?s
阅读全文
摘要：事件绑定 一个复杂的前端应用，离不开用户交互，而用户交互离不开事件绑定。 Vue中事件绑定语法 //1. v-on指令语法： <input type='button' v-on:click='num++' /> //2. 简写方式(常用）： <input type='button' @click='
阅读全文
摘要：MVVM 含义：数据变化影响视图，视图变化反过来又影响数据。 M（model）：即data中的数据变量 V（view）：即所写的模块（dom元素） VM（view-model）：实现model和view的控制逻辑 实现过程： DOM listeners：监听View的变化，及时告知给Model。 D
阅读全文
摘要：什么是响应式 html5中响应式：屏幕尺寸变化导致样式的变化。 数据的响应式（数据变化导致页面内容的变化） 什么是数据绑定： 数据绑定：将数据填充到HTML标签中，html的视图和数据相互作用，相互影响。 v-once：只编译一次，可以理解HTML中标签变为只读（数据变化不会在影响视图变化）。 <d
阅读全文
摘要：前言 前一篇讲了v-cloak指令，今天来进行v-text,v-html,v-pre这三个指令的学习 数据绑定指令 v-text:用于填充纯文本 比插值表达式更加简洁，不存在闪动问题。 v-html：用于填充html片段 存在网络安全问题，容易遭到XSS工具，不应该使用在用户提交的内容上。 网站内部
阅读全文
摘要：Vue模板 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vu
阅读全文
摘要：前端渲染 前端渲染就是把数据填充到HTML标签中 过程：模版+数据->前端渲染->HTML静态内容 前端渲染方式 1. 原生js拼接字符串 方式：数据以字符串的方式拼接到HTML标签。 缺点：不规范，代码不清晰，维护麻烦 2. 前端模版引擎 方式：基于art-template，代码更加规范，标准化
阅读全文
摘要：初探 用vue实现一个“hello，world” 例子 1）原生JS的写法:DOM操作的方式 <div id='msg'></div> <script> var msg = "hello ,world" var div = document.getElementById('msg'); div.in
阅读全文
摘要：Vue概述 简介 vue是国产框架，作者尤雨溪，2014年2月份发布。 官网：https://cn.vuejs.org/v2/guide/ 其中在2015发布了vue1.0，2016发布了vue2.0，目前最新版本为vue3。 传统的JQuery和Bootstrap基本都是国外诞生的。 vue1.0
阅读全文
摘要：前言 最近在写前端代码，里面经常涉及到数组的循环取值。这里简单总结下前端中数组遍历的四种方式： 数组下标循环 for in 循环 for of 循环 foreach循环 例子 假设有如下数组：members，每个数组元素是一个字典/map,要遍历数组打印每个memberID的值。 var membe
阅读全文
摘要：背景 最近在写vue项目的时候遇到一个axios调用接口的坑，有个前端模块涉及axios去调用多个接口，然后请求完获取数据之后，再使用windows.location.href重定向到新页面，这时候却发现axios请求的接口都是出于canceled的状态。 例如： axios.get('/url1'
阅读全文
摘要：背景 公司的机器上安装了某些node包有冲突，这时候我想去清理一下现有的node包缓存，重新去安装一下node包，但是node_module的目录在哪个路径呢？ 解决方法 1. 查看node_modules的目录，执行：npm root -g 2. 查看npm的可执行文件所在目录：npm bin -
阅读全文
摘要：背景 最近用vue写一个项目，在服务器上用npm运行该vue项目的时候，执行npm run serve，整个过程执行到一半报错了：Error: ENOSPC: System limit for number of file watchers reached 原因 查了一下，是linux系统的限制导致
阅读全文
摘要：背景 最近我所在项目的进程管理工具从supervisor切换到pm2了，原因之一是因为长期二者兼容导致维护成本过大。后来经过和研发同学沟通，最终选择统一成pm2，因为pm2在windows下也可以对进程进行管理，方便他们在windows本地开发环境起服务调试。 supervisor的进程配置文件中自
阅读全文
摘要：接上篇，vue的父组件向子组件获取值，如果父组件需要主动调用子组件中的属性方法该如何实现？ 获取方法 1、 父组件中使用子组件的时候在给子组件定义一个ref属性 2、父组件可以通过this.$refs.XXX，来操作子组件中的属性和方法 子组件Sub1.vue <template> <module
阅读全文
摘要：简介 vue中组件与组件的关系存在两类：父子组件与非父子组件。 如下图所示，三个组件中就包含了父子组件与非父子组件两种情况，这里组件之间的交互主要由值传递和事件触发调用两种方式，这里先分享下父组件向子组件值传递。 方式 父组件可以向子组件传递的值有三种类型 属性变量或者纯文本 函数名 父组件自身实例
阅读全文
摘要：简介 vue中的html元素的属性和事件是支持通过变量方式动态修改，和原始js的dom操作有一些区别。这里总结一下vue的属性绑定与事件绑定的方法，以及与原生js的对比。 属性绑定 属性绑定指的是将html元素的一个属性值设置成变量。 原生的html中，比如<input type="text" />
阅读全文
摘要：前言 在vue中，请求后端接口的模块有三种： vue-resource axios fetch 这我们使用axios去请求后端接口。 安装 进入vue项目的目录，执行： npm install axios --save 使用 axios支持的http请求方法如下 axios.request(conf
阅读全文
浙公网安备 33010602011771号