Vue框架
关注
分享
扫一扫
秋天1014童话
坚持就是胜利，珍惜当下，珍惜学习的机会！！
展开
-
vue生命周期
vue生命周期: 钩子函数:created -> 实例已经创建 √ beforeCompile -> 编译之前 compiled -> 编译之后 ready -> 插入到文档中 √ beforeDestroy -> 销毁之前 destroyed -> 销毁之后图解：原创 2017-05-09 22:22:32 · 306 阅读 · 0 评论 -
css sticky footer布局+流式布局
css sticky footer布局参考地址：张鑫旭老师-css sticky footer布局 结合项目具体场景给出介绍：点击信息，弹出浮层，显示详细信息。浮层最下面有个关闭按钮，一直处在底部，当内容未撑开一页大小时，关闭按钮处在页面最底端。当内容撑开超出一页的大小时，底部内容向下推送。方法一：min-height+ padding-bottom + margin-top布局核心框架： 核心原创 2017-06-06 10:35:35 · 2647 阅读 · 0 评论 -
转-Vue双向绑定的原理
Vue双向绑定的原理一篇很不错的文章：Vue.js双向绑定的实现原理原文：(http://blog.csdn.net/creabine/article/details/59201837)主要的知识点： 1.Vue双向绑定原理（一）文档片段DocumentFragment 2.Vue双向绑定原理（二）访问器属性defineProperty() 2.设计模式：观察者（发布/订阅）模式;大致思路：转载 2017-06-21 20:24:15 · 771 阅读 · 1 评论 -
vue源码解析之--数据双向绑定
在短时间内迅速使用vue构建了两个demo，一个eleme外卖平台webapp，还有一个是新闻网站。除了练习项目，也阅读了很多文章，收获颇多，成长很快。总结一下： vue简单，轻量，易上手，API简单，模板也符合web编程习惯。 vue是MVVM的一个很好实践，核心思想是数据驱动和组件化。 数据驱动指的是，model改变，驱动view自动更新。支持自动计算属性和依赖追踪的模板表达式。原创 2017-06-21 18:39:20 · 539 阅读 · 0 评论 -
移动1像素的问题
问题：一般在移动端，由于dpr（设备像素比）不为1，在PC端显示1像素的边框，在移动端其实显示为2px。解决这个问题，主要思想是：使用媒体查询，根据dpr的大小，对边框进行缩放（scaleY）。详细代码如下所示： App.vue:<template> <div id="app"> <div class="tab border-1px"> <!-- !!!!!!! --> <原创 2017-06-06 10:11:31 · 3274 阅读 · 0 评论 -
stylus使用再升级
1、一些使用技巧常常在一些很常见的场景中使用，比如插值，常在做浏览器兼容性处理时使用。还是要做一些总结。 stylus中文版参考文档：http://www.zhangxinxu.com/jq/stylus/selectors.php 基本使用方法： https://segmentfault.com/a/1190000002712872#articleHeader15原创 2017-06-09 10:13:28 · 495 阅读 · 0 评论 -
vue+百度下拉框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .gray { background-color: gray; } #box ul li { curso原创 2017-05-16 09:19:40 · 1244 阅读 · 0 评论 -
vue-自定义指令-拖拽
主要思想： 获取拖拽的dom元素，在oDiv.onmousedown事件内获取鼠标相对dom元素本身的位置： var disX=ev.clientX-oDiv.offsetLeft; var disY=ev.clientY-oDiv.offsetTop;再通过document.onmousemove事件计算dom元素左上角相对 视口的距离：var l=ev.clientX-disX;var t=原创 2017-06-19 12:42:59 · 9312 阅读 · 2 评论 -
bootstrap+vue=动态添加删除用户数据
首先使用bootstrap进行页面布局，使用vue进行数据绑定，可实现添加、删除、全部删除。全部删除、“暂无数据”根据有无数据动态显示隐藏，这是vue的机制，做起来很方便。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="styles原创 2017-05-08 21:45:52 · 2158 阅读 · 0 评论 -
vue-star评星组件开发
star文件夹下建立Star.vue，及相关的图片信息。便于组件的就近维护 Star.vue：<template> <div class="star" :class="starSize"> <span v-for="(itemClass,key) in itemClasses" :class="itemClass" class="star-item"></span>原创 2017-06-06 10:00:36 · 5630 阅读 · 2 评论 -
vue-格式化时间戳+格式化编程思想
首先，数据库中往往存储的是时间的毫秒形式，这样在页面上可以操控显示时间的格式。 1. 页面中: <div class="time">{{rating.rateTime | formatDate}}</div> 这里formatDate时一个过滤器 2. 在页面js中定义这个过滤器：import {formatDate} from '../../common/js/date.js' expo原创 2017-06-16 16:12:19 · 20641 阅读 · 0 评论 -
vue+localStorage+收藏+解析url参数 实例解析
以商家收藏这一功能为例： 1. 首先App.vue中根据url 设置好 商家的id<script>import {urlParse} from './common/js/util.js'import Header from './components/header/Header.vue'const err_OK = 0;export default{ data(){ return原创 2017-06-17 13:03:07 · 4362 阅读 · 2 评论