- 博客(30)
- 收藏
- 关注
RSS订阅转载 DOM同时设置mouseover与mouseout事件控制元素显示时出现闪烁问题
在给一个DOM元素同时设置mouseover与mouseout事件来控制另一元素显示与隐藏式时会出现闪烁问题。这是由js事件的冒泡引起的，在网上找了很多解决方案，经测试很多都没有效果。最终找到一个简单粗暴的解决方法：mouseover事件不做改变（一般是控制目标元素的显示），但是不再设置mouseout 事件，而是给目标元素绑定一个mouseleave事件，$("目标元素id").bind("mo...
2018-07-03 20:37:54
903
原创 Vue.js实战系列---饿了么（2）数据的mock（模拟后台）
mock测试就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试的测试方法。最新版本的vue-cli已经放弃dev-server.js，只需在webpack.dev.conf.js配置就可以新版webpack.dev.conf.js配置如下：打开bulid文件夹下的webpack.dev.conf.js在下条语句后添加代码const portfinder = r...
2018-06-04 19:10:05
1110
原创 Vue.js实战系列---图标字体制作（svg格式）
如何将svg格式的图标文件转换成html和css代码直接使用呢?（1）进入https://icomoon.io/，点击icoMoon APP按钮 如图所示（2）跳转到如下界面，图片上有三个小步骤（3）跳转到如下界面，图片有两个小步骤（4）下载后，解压，查看文件结构...
2018-06-04 18:11:41
487
原创 Vue.js实战系列---Vue-cli完整安装过程
ps:本人使用Windows系统打开cmd界面（1）首先应确保安装了node，安装后查看node型号（2）使用 npm install vue-cli -g 全局安装Vue-cli脚手架（3）使用 vue 命令 查看是否安装成功（4）使用 vue init webpack sell 命令初始化一个项目（sell 指的是项目名称，依据个人需求自行拟定），系统显示开始安装一些依赖，安装时间可能要长一...
2018-06-04 10:30:36
447
原创 Vue.js实战系列---饿了么（1）基础知识
MVVM框架：针对具有复杂交互逻辑的前端应用，提供基础的架构抽象，通过Ajax数据持久化，保证前端用户体验。不需要刷新整个页面，只需要刷新需要刷新的部分，非常适合移动端。vue.js：是一个轻量级的MVVM的框架，数据驱动+ 组件化的前端开发与Angular React 对比：Vue.js更轻量，gzip后大小只有20k;Vue.js更易于上手；吸收了Angular的指令和react的组件化。V...
2018-06-04 10:15:25
844
原创 ES6---Set方法
<script> //set的使用方法和定义数组相似，但是set中的值必须是唯一的，如果出现重复的，只显示第一次出现的 var s = new Set([1,2,3,4,3]); console.log(s); //1,2,3,4 console.log(s.add(5));//新增值 1,2,3,4,5 ...
2018-06-03 15:37:30
143
原创 ES6---proxy路由器
概述Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。get()...
2018-06-03 15:18:06
428
原创 ES6---模板字符串功能
<script> //ES6模板字符串 let tpl1 = ` <div> <span>1255</span> </div> `; console.log(tpl1); </scr...
2018-06-03 14:31:46
329
原创 ES6---字符串新增方法
<script> //es6新增的四个关于字符串的方法 //字符串是否包含字母 var test = "helloMocha"; console.log("helloMocha字符串中是否存在h："+test.includes("h")); console.log("helloMocha字符串中是否存在p：...
2018-06-03 14:13:35
280
原创 ES6---关于变量解构赋值一些巧妙的用法
<script> //获取一个字符串的长度 console.log("获取一个字符串的长度"); let {length} = "mochaDemo"; console.log(length); //拆分字符串 let [a,b,c,d,e] = "12345"; conso...
2018-06-03 13:48:29
280
转载 ES6---变量的解构赋值之对象和字符串
对象的解构赋值解构不仅可以用于数组，还可以用于对象。let { foo, bar } = { foo: "aaa", bar: "bbb" };foo // "aaa"bar // "bbb"对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。let { bar, foo } = { foo: "a...
2018-06-03 13:25:34
277
转载 ES6--ES6标准let和const语句
1.let 命令基本用法ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的...
2018-06-02 20:16:03
218
原创 NPM---NPM火速上手
NPM---Node包管理工具（Node Package Manager）作用：将频繁见到的问题封装成包，来直接使用，同时管理不同包的依赖关系NPM的基础：首先应下载nodejs，官方网站可下载 https://nodejs.org/en/验证NPM是否安装成功：cmd界面 输入npm -v查看版本号，正确显示版本号，则安装成功更新NPM版本号：npm install npm@5.4.0 -g ...
2018-06-02 19:18:20
279
原创 js---filter和map
filterfilter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。例如，在一个Array中，删掉偶数，只保留奇数，可以这么写：1 var arr = [1, 2, 4, 5...
2018-06-01 11:15:20
2524
原创 Vue-router---导航钩子（导航守卫）
ps:“导航”表示路由正在发生改变。全局守卫你可以使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resol...
2018-05-31 11:14:40
765
原创 Node.js---以Ajax方式向后台传递参数
html代码：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #but{margin: auto; width:9
2018-05-31 09:04:09
1256
原创 Vue-router--- 安装及基本配置
js代码：/** * Created by luoxy on 2018/5/28. */var routes = [ //定义规则 { path:'/', //使用'/'符号代表首页路径 component:{ template:'<div><div>首页</div></div>'...
2018-05-29 10:48:44
240
原创 vue.js----注册组件
组件Vue.component('my-component-name', { /* ... */ })命名规范： 强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。使用 kebab-case 当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab...
2018-05-28 19:43:52
146
转载 vue.js---混合mixins
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。 例子：// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { hello: function...
2018-05-28 11:59:51
202
原创 vue.js---自定义指令 (配置传参及修饰符)
钩子函数的属性binding：一个对象，包含以下属性：name：指令名，不包括 v- 前缀。value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。//等于号后面的值oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。expression：字符串形式的指令表达式。例如 v-m...
2018-05-28 10:50:25
5980
4
原创 vue.js---自定义指令
注册一个指令：// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：<input v-focus>钩子函...
2018-05-28 10:15:05
231
原创 vue--过滤器
js代码：/** * Created by luoxy on 2018/5/27. */Vue.filter("currency",function(val,unti){ val = val || 0; unti = unti || "元"; return val + unti;})Vue.filter("len",function(val,m){ ...
2018-05-27 17:47:09
113
原创 vue--平行组件通信
js代码：/*平行组件通信*/var event = new Vue();Vue.component("me",{ template:'<div>我说：<input type="text" v-model="mesaid" @keyup="onChange">{{mesaid}}</div>', data:function(
2018-05-27 16:30:52
482
原创 Vue---组件子父通信
js代码：Vue.component("balance",{ template:'<div><show @showbalance="show_balance"></show><div v-if="show">余额￥98</div></div>' ,//监听自定义事件
2018-05-27 15:29:26
135
转载 Text-align和margin :0 auto 的区别
基本概念：1.text-align: 属性规定元素中的文本的水平对齐方式; 该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式; 一般情况下设置文本对齐方式的时使用此属性。支持值 justify。 Example: div { text-align: left; } //文本居左对齐 注释：所有浏览器都支持 text-align 属性；任何的版本的...
2018-05-16 11:21:48
556
转载 兄弟选择器 + ~ 的详解
1. + 选择器 如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。 比如：<style type="text/css"> h1 + p { margin-top:50px; color:red; }</style><body><p>This i...
2018-05-16 10:48:53
9430
原创 新学到的css3样式
1.去掉navigator的点击效果<navigator url="../list/list?type=1232&title=222" hover-class='none'><!--点击默认有高亮,可以设置颜色，可以设置为无--></navgator>2.增加点击效果cursor：pointer...
2018-05-07 09:35:15
98
转载 微信小程序---弹性盒子模型
1.弹性盒子布局弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局...
2018-05-07 09:30:08
6591
原创 微信小程序--调用外界API
1.注意使用this.setData({})方法时this的作用域问题，如果this外界有function说明this的作用域已经不是本页面，此时在方法外，使用 var that = this ，将this的值赋给一个变量。2.轮播图的使用方法<swiper indicator-dots="true"> //轮播图下面的指示点 autoplay="true" interval...
2018-05-07 09:12:26
5148
原创 微信小程序--项目结构的作用
小程序由一个应用程序实例和多个页面组成1.应用程序实例包括app.json;app.js;app.wxss三个页面组成1.1app.js全局的逻辑结构1.2app.json页面的配置文件，pages中的用来保存所有可能访问到的路径1.3app.wxss页面的全局样式2.页面对象内部结构小程序中，一个页面包含index.js;index.wxss;index.wxml;(index.json)四个文...
2018-05-06 17:33:30
180
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人