前端开发
关注
分享
扫一扫
xiaohanzhu000
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vuex 最简单有效的使用
安装、使用 vuex首先我们在 vue.js 2.0 开发环境中安装 vuex :npm install vuex --save然后 , 在 main.js 中加入 :import vuex from 'vuex'Vue.use(vuex);var store = new vuex.Store({//store对象 state:{ show:fal...原创 2018-06-13 11:14:54 · 925 阅读 · 0 评论 -
Vue和Jquery.js一起使用
1、下载并引入jquery框架下载可以去官网进行下载，我这里使用的版本是3.1.1，下载好后在需要的页面引入就可以了。当然你还有很多其它的方法引入jquery，只要可以顺利引入就可以了。1<script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script>试着作一个案例，在DOM被挂载...原创 2018-07-03 12:33:15 · 8656 阅读 · 0 评论 -
VUE - 实例事件
实例事件就是在构造器外部写一个调用构造器内部的方法。这样写的好处是可以通过这种写法在构造器外部调用构造器内部的数据。我们还是写一个点击按钮，持续加1的例子。一、$on 在构造器外部添加事件。1234app.$on('reduce',function(){ console.log('执行了reduce()'); this.num--;});$on接收两个参数，第一个参数是调用时的事件名...原创 2018-07-03 13:29:18 · 306 阅读 · 0 评论 -
Vue - 内置组件 -slot 父组件向子组件传值
slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。先来定义一个<jspang></jspang>的组件，这个组件用来显示博主的一些信息。我们在Vue 构造器里的data中给出了信息，信息如下：（博客地址，网名，使用技能）1234567data:{ jspangData:{ bolgUrl:'http:/...原创 2018-07-03 13:57:43 · 6195 阅读 · 0 评论 -
CSS3的基础知识点
1、CSS背景（1）、background-size 属性background-size 属性规定背景图片的尺寸，同时适用与字体图标方面的适用（主要在移动端用到较多）。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相...原创 2018-07-16 22:50:06 · 497 阅读 · 0 评论 -
html5的localStorage操作
var Util = (function(){ var prefix = 'ficiton_reader_'; var StorageGetter = function(key) { return localStorage.getItem(prefix + key); } var StorageSetter = function(key, val) { ...原创 2018-07-04 20:25:17 · 201 阅读 · 0 评论 -
ES6 对象
<!DOCTYPE HTML><html><head> <title>对象</title> <meta charset="utf-8" /> </head><body><script>clas原创 2018-07-18 14:12:20 · 136 阅读 · 0 评论 -
getBoundingClientRect的用法
getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。1.语法：这个方法没有参数。rectObject = object.getBoundingClientRect();2.返回值类型：TextRectangle对象，每个矩形具有四个整数性质（ 上， 右 ， 下，和左 ）表示的坐标的矩形，以像素...原创 2018-07-19 23:43:02 · 490 阅读 · 0 评论 -
JS基础--HTML DOM classList 属性
页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类。添加类（add）document.getElementById("myDIV").classList.add("mystyle");为 <div> 元素添加多个类:docum...原创 2018-07-19 23:43:56 · 478 阅读 · 0 评论 -
vscode 常用配置和插件
vs code如何配置.less编译为.css安装插件 Easy LESS，保存自动编译，不需要配置 推荐了几个自认为比较好的要求配置项目比较低的VS code扩展插件：Html Snippets——html代码提示easy less——css编程/生成VS color Picker——颜色选择器live HTML Previewer——html文件运行预览SVG ...原创 2018-07-21 23:15:38 · 931 阅读 · 0 评论 -
VsCode中使用Emmet神器快速编写HTML代码
一、Emmet简述Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候，效率会特别低下，因为需要敲打很多尖括号，而且很多标签都需要闭合标签等。于是，就有了 Emmet，它可以极大的提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTM...原创 2018-07-21 23:31:51 · 763 阅读 · 0 评论 -
less 基本配置 参考
globe.less@rem:30rem;body,h1,h2,h3,h4,p{ margin:0;}body{ font-size:26/@rem; font-family: '微软雅黑'; color: #738797;}a{ text-decoration: none; color: inherit;}a:hover{ color: #f...原创 2018-07-22 00:07:28 · 1275 阅读 · 0 评论 -
史上最全的CSS hack方式一览
做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。可是啊，现实太残酷，浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协，虽然这只是个别情况。今天，结合自己的经...转载 2018-08-04 12:10:39 · 204 阅读 · 0 评论 -
Sticky footer布局
Sticky footer布局是什么？我们所见到的大部分网站页面，都会把一个页面分为头部区块、内容区块和页脚区块，当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部，而非随着文档流排布。当页面内容较多时，页脚能随着文档流自动撑开，显示在页面的最底部，这就是Sticky footer布局。图示说明当内容较少时，正常的文档流效果如下图在正常的文档流中，页面内容较少时，页脚部分不是...原创 2018-08-04 12:11:39 · 176 阅读 · 0 评论 -
js中的逻辑与（&&）和逻辑或（||）
之前有一个同事去面试，面试过程中碰到这样一个问题：在js中写出如下的答案 ：var a = 2;var b = 3;var andflag = a && b ;var orflag = a || b;问andflag 和orflag 分别是什么？起初我认为： andflag 和orflag 的值都为 true; 毕竟 && 和 || 都是...原创 2018-08-04 12:38:18 · 1130 阅读 · 0 评论 -
position: absolute 垂直居中
top:50%;margin-top:-1/2高度原创 2018-08-31 22:10:28 · 2708 阅读 · 0 评论 -
v-else-if
<div id="app5"> <div v-if="status == 'loading'"> <div style="background-color:blue">loading</div> </div> <div v-else-if="原创 2018-08-29 15:02:18 · 458 阅读 · 0 评论 -
VUE- delimiters 选项
delimiters的作用是改变我们插值的符号。Vue默认的插值是双大括号{{}}。但有时我们会有需求更改这个插值的形式。1 delimiters:['${','}']现在我们的插值形式就变成了${}。代替了{{ }}...原创 2018-07-03 11:23:12 · 7152 阅读 · 0 评论 -
VUE- Mixins 混入选项操作 和 extends
Mixins一般有两种用途：1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。一、Mixins的基本用法我们现在有个数字点击递增的程序，假设已经完成了，这时我们希望每次数据变化时都能够在控制台打印出提示：“数据发生变化”.代码实现过程:123456789101112131415...原创 2018-07-03 11:04:44 · 618 阅读 · 0 评论 -
koa2
1.搭建一个最简单的KOA服务器。们初始化生产package.json 文件 npm init -y生成package.json后，安装koa包npm install --save koaindex.jsconst Koa = require("koa")const app = new Koa();app.use(async(ctx)=>{ ctx.body = "hello,worl...原创 2018-06-30 17:15:18 · 934 阅读 · 0 评论 -
async/await 接收 Promise 对象
<!doctype html><html><head><meta charset="utf-8"><title>Promise</title></head><body></body></html><原创 2018-06-30 17:17:39 · 2522 阅读 · 0 评论 -
Vue2.0内部指令
Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。1.v-if v-else v-show 指令v-if用来判断是否加载html的DOM<div id="app"> <div v-if="isLog...原创 2018-07-01 23:18:39 · 521 阅读 · 0 评论 -
Vue案例之拖拽
Vue拖拽<div id="box"> HTML 位置 <br>x:{{val.x}} <br>y:{{val.y}} <div v-drag="greet" id="drag" :style="style&am原创 2018-07-02 15:08:37 · 1206 阅读 · 0 评论 -
HTML5 拖拽
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/><meta charset=&原创 2018-07-02 16:52:07 · 159 阅读 · 0 评论 -
VUE directive 自定义指令
1.Vue.directive 自定义指令<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.min.js"&原创 2018-07-02 18:09:57 · 268 阅读 · 0 评论 -
Vue的生命周期（钩子函数）
<script type="text/javascript"> var app=new Vue({ el:'#app', data:{ message:1 }, methods:{ jia:functio...原创 2018-07-02 20:54:12 · 357 阅读 · 0 评论 -
Template 制作模版
一、直接写在选项里的模板直接在构造器里的template选项后边编写。这种写法比较直观，但是如果模板html代码太多，不建议这么写。javascript代码：123456789 var app=new Vue({ el:'#app', data:{ message:'hello Vue!' }, template:` <h1 s...原创 2018-07-02 21:14:00 · 355 阅读 · 0 评论 -
vue 组件 component
全局化注册组件Vue.component('panda',{ template:`<div style="color:red;">全局化注册的jspang标签</div>` })局部注册组件局部注册组件和全局注册组件是向对应的，局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。 <script type="te...原创 2018-07-02 22:35:33 · 375 阅读 · 0 评论 -
Js获取当前日期时间及其它操作
创建时间对象var now= new Date(); 常用方法： JS获取当前时间var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDat...原创 2018-07-02 22:48:51 · 166 阅读 · 0 评论 -
JS 数组
创建数组var a=new Array(元素1，元素2，元素3，元素4,........)var a=[1,2,3,4];遍历数组的元素1) for 循环(2) while();(3) for...in 循环将遍历对象的所有可枚举属性。//for in更适合遍历对象，不要使用for in遍历数组for(var i in a){document.write(a[i]+"|");} //1|2|3...原创 2018-07-02 23:04:43 · 248 阅读 · 0 评论 -
String 对象方法
var a="abcdc";var b="a+d+c"; 对象作用例子charAt(num)返回在指定位置的字符alert(a.charAt(3));//dcharCodeAt(num)返回指定位置的字符的Unicode编码alert(a.charCodeAt(3));//100fromCharCode()接受一个或多个指定的Unicode值，然后返回一个或多个字符串。alert(String.f...原创 2018-07-02 23:10:57 · 220 阅读 · 0 评论 -
VUE - propsData Option 全局扩展的数据传递
propsData 不是和属性有关，他用在全局扩展时进行传递数据。扩展标签已经做好了，这时我们要在挂载时传递一个数字过去，我们就用到了propsData。我们用propsData三步解决传值：1、在全局扩展里加入props进行接收。propsData:{a:1}2、传递时用propsData进行传递。props:[‘a’]3、用插值的形式写入模板。{{ a }}<!doctype html&...原创 2018-07-03 09:30:10 · 837 阅读 · 0 评论 -
VUE - computed 计算属性 ( get set )
computed 的作用主要是对原数据进行改造输出。改造输出：包括格式的编辑，大小写转换，顺序重排，添加符号……。这样可以不污染数据源。<!doctype html><html><head><meta charset="utf-8"><title>vue</title><script src=&am原创 2018-07-03 09:43:10 · 969 阅读 · 0 评论 -
VUE - Methods
一、methods中参数的传递使用方法和正常的javascript传递参数的方法一样，分为两部：1、在methods的方法中进行声明，比如我们给add方法加上一个num参数，就要写出add:function(num){}.2、调用方法时直接传递，比如我们要传递2这个参数，我们在button上就直接可以写。<button @click=”add(2)”></button>.现...原创 2018-07-03 10:22:17 · 532 阅读 · 0 评论 -
VUE - watch
数据变化的监控经常使用，我们可以先来看一个简单的数据变化监控的例子。例如天气预报的穿衣指数，它主要是根据温度来进行提示的，当然还有其它的，咱们就不考虑了。一、看一个监控变化的案例温度大于26度时，我们建议穿T恤短袖，温度小于26度大于0度时，我们建议穿夹克长裙，温度小于0度时我们建议穿棉衣羽绒服。先来模拟一个温度变化的情况：我们使用按钮来加减温度。<div id="app"> ...原创 2018-07-03 10:44:15 · 495 阅读 · 0 评论 -
Vue动态组件
前面的话 让多个组件使用同一个挂载点，并动态切换，这就是动态组件。本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，可以实现动态组件<div id="example"> <button @click="change">切换页面</button> <c转载 2018-08-30 01:02:35 · 11445 阅读 · 2 评论