Hupan_Pan-CSDN博客

原创 vue中组件之间常见的通讯方式

一、props1.父组件属性传值<cu-childern title="hello word" msg="parent"/>2.子组件接收 2.1.1 props接收方式 props:{ title:{ type: String, //类型 default: "" //默认值 }, msg:{ type: String, //类型

2020-08-28 11:24:06 210

原创 vue中关于自定义input组件和CheckBox组件的v-model与父组件之间传值

input使用<template> <div> <input type="text" :value="value" @input="$emit('input', $event.target.value)" /> </div></template><script>export default { methods: { handleInputChange(e) { console.log

2020-08-27 16:30:48 630

<video src="test.mp4" controls width="400" height="300"></video>  <video src="test.mp4" controls controlslist="nodownload" width="400" height="300">&lt...

2020-08-25 15:35:15 1866

原创 vue面试题

一、对于MVVM的理解？MVVM 是 Model-View-ViewModel 的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View代表UI 组件，它负责将数据模型转化成UI 展现出来。ViewModel监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。在MVVM架构下，Vi...

2019-03-12 21:12:55 146

原创 HTML、CSS面试题

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。（2）、严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。（4）...

2019-03-08 15:43:00 330

转载创建Ajax的步骤

写Ajax步骤：1.创建Ajax对象2.连接到服务器3.发送请求4.接收返回值//1.创建Ajax对象var oAjax = new XMLHttpRequest();//非IE6var oAjax = new ActiveXobject("Microsoft.XMLHTTP");//IE6在JS中,使用没有定义的变量---报错；使用没有定义的属性---undefined做兼容：...

2019-02-18 11:50:37 1285

原创 axios配置

import axios from 'axios';import { Message } from 'element-ui';import store from '../store';// import router from '../router';// 创建axios实例const service = axios.create({ baseURL: process.env.B...

2019-01-23 11:07:41 198

翻译 vue.js中登录权限问题（代码）

一、登录页面this.$store.dispatch('LoginByEmail', this.loginForm).then(() => { this.$router.push({ path: '/' }); //登录成功之后重定向到首页}).catch(err => { this.$message.error(err); //登录失败提示错误});二、vuex中异...

2019-01-23 11:05:48 2865

原创 vue.js中关于权限登录问题

一、流程思路如图所示二、全局钩子router.beforeEach中拦截路由三、判断用户唯一标识token，然后跳转相应页面

2019-01-23 10:53:54 456

原创 Vue.set()的使用

vue.set()方法是vue中提供响应式操作的内置API，列如vue可以动态控制数据的增减，但是我们却无法做到对某一条数据的修改。这时候就需要Vue的内置方法Vue.set()来帮忙了调用方法：Vue.set( target, key, value )target：要更改的数据源(可以是对象或者数组)key：要更改的具体位置value ：重新赋的值列如：<!DOCT...

2018-12-13 10:54:13 1078

原创浏览器的cookie，localStorage,sessionStorage区别

1、WebStorageWebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制。HTML5的WebStorage提供了两种API：localStorage（本地存储）和session...

2018-11-28 15:23:10 307

原创 CSS常用图标制作

一、制作的四个三角形.css-arrow-acute { border-color: red green blue orange; border-style:solid; border-width:25px 10px 15px 30px; width:0; height:0;}二、正方形#square { width: 1...

2018-11-26 15:29:56 616

原创 vue中自定义指令

全局方式创建第一步：建立文件 eg：directive/directives.js.第二部：利用Vue.directive()建立一个全局命令，并将它暴露出来，eg：focus 自动获取聚焦. 文件中写入以下代码： 1 2 3 4 5 6 7 8 9 10 11 ...

2018-11-23 18:06:31 201

原创 vue 中定义全局过滤器

第一步：mian.js 中进行定义 Vue.filter("moneyFilter", function(value, num, type) { //value是使用过滤器是的表达式或者值,num和tyep中的参数，num和type根据项目需要判断是否传参 return "￥" + value.toFixed(num) + type...

2018-11-23 10:55:10 1856

原创关于vue中 v-model 的修饰符

一、.lazy input框失去焦点触发（惰性加载）在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：  <...

2018-11-23 10:35:09 956

原创个人在使用vue中引入jquery和bootst整理的笔记，开始看了网上很多实例方法，都基本没成功

第一步： npm install jquery --save-dev npm install bootstrap --save-dev npm install --save popper.js第二步：在webpack.base.conf.js ①：头部申明 const webpack=require('webpack'); ...

2018-11-15 10:51:34 408

原创关于rgba 兼容性问题

1 //一般的高级浏览器都支持2 background: rgba(255,255,255,0.1);4 //IE8下5 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);第二句话的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来...

2018-11-12 12:15:52 839

翻译 flex布局最后一行左对齐

最近项目布局上要求item两端对齐，而且最后一行在列不满的情况下要求左对齐，使用flex的justify-content: space-between;实现时发现最后一行不能左对齐，而是两端对齐方式，（如图）在网上查了很多资料， 1.添加几个空item（对我来说最有效的，适用于大多数场景）根据布局列数添加空item，比如每行最大n列，那么在最后添加n-2个空item即可<h...

2018-11-06 09:44:16 5728

原创前端表格实现上下移动

利用jq中的current.insertBefore(prev);current.insertAfter(next);<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"...

2018-10-17 17:34:20 1918

原创解读vue中webpack文件

一、前言vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化，引入一些插件帮我们完善功能可以将文件打包压缩，图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要，接下来我将基于webpack3.6.0版本结合文档将文件各个击破，纯干料。二...

2018-09-29 14:28:15 535

原创浅谈前端本地缓存

前端开发中的本地存储就是把一些信息存储到客户端;存储的信息不会因为页面的跳转或关闭而消失,这样就可以实现很多的功能了特点: 1.虽然存储到本地了,但是有浏览器之间的访问限制(例如其他浏览器访问不到) 2.域和域之间的限制,例如:在谷歌下访问京东,存储了京东的客户信息,然后用百度,百度是无法获取到原来在京东下存储的客户信息的案例: ·登录的时候...

2018-09-27 11:46:29 492

翻译前端面试题(2018.6)

一.谈谈对优化性能优化的认识？怎么优先加载？ 1、减少http请求，合理设置 HTTP缓存 2、使用浏览器缓存 3、启用压缩 4、CSS Sprites 合并 CSS图片，减少请求数的又一个好办法。 5、LazyLoad Images 6、CSS放在页面最上部，javascript放在页面最下面 7、异步请求Callback（就是将一些行为样式提取出来，慢慢的加...

2018-06-27 19:07:12 303

Hupan_Pan的博客

原创 HTML 常见面试题