- 博客(19)
- 收藏
- 关注
RSS订阅
原创 vue 异步更新队列 $nextTick
Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。如果你想在 DOM 状态更新后做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DO...
2018-02-08 11:06:42
1380
1
原创 vuex入门 完整demo
1 第一步安装 npm install vuex --save2 在main.js 同级新建store.js3 编辑store.js 在store.js 引用 vuex import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)4 用export default 封装代码，让外部可以引用 const store = new Vu...
2018-01-16 11:20:58
2868
原创 手把手教你实现Vue数据双向绑定实现原理
1.首先我们先了解下实现Vue双向绑定的核心方法Object.defineProperty(obj, prop, descriptor)obj: 要在其上定义属性的对象；prop: 要定义或修改的属性的名称；descriptor: 将被定义或修改的属性描述符；该方法的详细解释请移步这里。2.废话不多说，上代码我们来实现：该demo每当我们修改input值后，h1标题都会随之改变<...
2020-03-07 13:47:29
284
原创 Vue代码优化
1. 路由异步加载 常规路由写法：import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'//常规引入组件TestAimport TestA from '@/components/TestA'import TestB from '@/co...
2019-04-09 15:16:04
544
原创 Vue Router 跳转拦截
所有路由需要验证登录router.beforeEach((to, from, next) =&gt; { //设置延时器让created先执行在进行路由跳转 setTimeout((res) =&gt; { // 判断该路由是否需要登录权限 if(to.name == ‘login’){ next() ...
2018-07-24 15:22:18
5848
原创 vue自定义指令
关于自定义指令具体介绍请查看官方文档。这里不做详细介绍。 这里写的歌demo,关于点击编辑按钮，输入框自动获取焦点。 &amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&
2018-06-08 17:21:42
244
2
原创 reset.css
看了张鑫旭大神写的 css reset的重新审视，收益匪浅，对自己的reset.css进行修改，精简。分享一下body,ul,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin: 0; padding: 0;}body{ font-family: arial, helvetica, sans-serif;}img { border...
2018-06-05 14:25:12
1291
2
原创 vue 备忘录
用vue写了个日历备忘录的功能。省略了备忘录的增删改查功能。 直接上代码&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&am
2018-05-31 18:28:28
1995
3
原创 响应式布局
方法一：js动态控制html根节点font-size 请尽早加载一下代码var evt = "onorientationchange" in window ? "orientationchange" : "resize";var doc = document.documentElement;window.addEventListener(evt, _resize, false);win...
2018-05-29 11:42:48
153
原创 全屏Swiper
直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全屏Swiper</title> <link href="https://cdn.bootcss.co
2018-05-24 15:02:00
2462
原创 element-ui 设置表单必填项
话不多说，直接上代码~~~~~~~~~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" hre
2018-05-21 18:32:07
62213
6
原创 css 浏览器兼容总结
1. 取消Chrome表单文本框自动填充黄色背景色样式input:webkit-autofill{ -webkit-box-shadow : 0 0 0px 1000px white inset; -webkit-text-fill-color: #333;}2.修改表单提示颜色(placeholder默认的字体颜色是浅灰色的) 1) Chrome input::-webk...
2018-05-14 17:57:07
199
原创 js 四舍五入保留两位小数
js四舍五入很自然想到 toFixed 方法然而toFixed方法存在问题 console.log(0.995.toFixed(2)) //0.99 ****出实际应该为1.00 console.log(1.995.toFixed(2)) //2.00现在提供一个方法function toDecimal(x) { var num = Math.round(x*100)...
2018-05-09 16:57:52
1012
原创 flex 布局
容器的属性 ： flex-direction: row-reverse 主轴水平向左 column 主轴从上到下 column-reverse 主轴从下到上 flex-wrap: wrap 项目换行 flex-wrap: wrap-reverse 项目换行反转 flex-flow: row wrap fle...
2018-02-09 16:37:29
179
原创 vue插件汇总
vue插件实例demo git@github.com:zhu1090106071/vue-plugin.git1. element-ui 饿了么UI库 官网http://element-cn.eleme.io/#/zh-CN 安装 npm i element-ui -S2. vuedraggable 拖拽排序 安装npm install vuedragg
2018-01-23 15:09:11
422
原创 毫秒转日期 es6新属性
1. 采用了es6 字符串扩展属性 function toDate(ms){ var curTime = new Date(ms); var year = curTime.getFullYear(); var month = String(curTime.getMonth() + 1).padStart(2,"0"); var day = String(curTime.ge
2018-01-19 16:41:10
1945
原创 gulp入门 gulp使用流程
1.全局安装gulp $ npm install --global gulp2.作为项目的开发依赖（devDependencies）安装 $ npm install --save-dev gulp3.在项目的根目录下创建gulpfile.js文件（文件名不得变更） 文件内容 例： var gulp = require("gulp"), livereload = requi...
2018-01-16 11:28:54
274
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人