- 博客(34)
- 收藏
- 关注
RSS订阅原创 h5中移动设备类型的判断
在下载app的时候，往往IOS端和安卓端的下载地址链接是不一样的，这个时候就需要判断当前设备是IOS还是安卓: downLoad() { var u = navigator.userAgent; var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //安卓端 var isI...
2018-05-18 16:07:39
3262
原创 h5微信网页获取code
这两天做微信分享的h5网页，需要微信授权登录，获取用户的相关信息。以前没有做过相关的项目，所以做得相当不顺利。网页开发时的微信授权，首先公司要开通一个公众号，然后需要配置相关的东西：微信网页授权：用于获取用户针对于公众号的唯一标识openid。但只能添加一个域名，通常把它设置为一级域名。网页授权回调域名，首先，在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 - 接口权限 -...
2018-05-15 17:09:53
18200
2
原创 webpack.dev.conf.js文件
webpack.dev.conf.js文件是在项目开发环境下使用的文件。该文件中的module对象：rules中增加了cssSourceMap的功能。const devWebpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.dev.css...
2018-04-27 17:26:09
4146
原创 webpack.base.conf.js文件
文件开头的path模块提供了用于处理文件和目录路径的使用工具。utils是vue开发环境的wepack相关配置文件，主要用来处理css-loader和vue-style-loader。引入config目录下的index.js配置文件，主要用来定义一些开发和生产环境的属性。vue-loader.conf配置文件是用来解决各种css文件的，定义了诸如css,less,sass之类的和样式有关的load...
2018-04-27 16:50:15
5799
原创 vue-loader.conf.js文件
这个js文件中的代码：'use strict'const utils = require('./utils')const config = require('../config')const isProduction = process.env.NODE_ENV === 'production'const sourceMapEnabled = isProduction ? config.buil...
2018-04-27 16:31:20
3211
原创 vue-cli的基本使用
全局安装vue-cli：cnpm install vue-cli -g。检查安装是否正确：vue -V。初始化项目：vue init webpack bmSystem。这里webpack是你使用的模板名称，这里还可以使用webpack-simple，browserify，browserify-simple，simple等模板；bmSystem是自己的项目名称。 在使用npm r...
2018-04-27 16:20:41
393
原创 HTML5中audio与video标签的使用
最近做的微信分享页面中有大量的语音播放和视频展示，相关的好多方法属性以前都没接触过，现在记录下来！1. 首先，了解关于两个标签的基本信息：两个标签的基本属性：属性描述audioTracks返回表示可用音轨的 AudioTrackList 对象autoplay设置或返回是否在加载完成后随即播放音频/视频buffered返回表示音频/视频已缓冲部分的 TimeRanges 对象controller返...
2018-04-26 18:34:19
2392
原创 Vue学习—vue-resource
Vue.js是数据驱动的，这使得我们并不需要直接操作DOM，如果我们不需要使用jQuery的DOM选择器，就没有必要引入jQuery。vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。另外，vue-resou...
2018-04-20 14:37:56
373
原创 Vue学习—slot
作为Vue特殊属性的 slot 是用于标记往哪个具名插槽中插入子组件内容。slot-scope用于将元素或组件表示为作用域插槽。特性的值应该是可以出现在函数签名的参数位置的合法的 JavaScript 表达式。这意味着在支持的环境中，你还可以在表达式中使用 ES2015 解构。它在 2.5.0+ 中替代了 scope。此属性不支持动态绑定。<body> <h1>slo...
2018-04-19 11:55:54
251
原创 Vue学习—实例(三)实例事件
vm.$on：监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 //构造器外部事件： vm.$on('test', function (msg) { console.log(msg); }); vm.$emit("test", "Hi");vm.$once：监听一...
2018-04-17 17:03:03
376
原创 Vue学习—实例(二)实例方法
vm.$mount：用法：如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。这个方法返回实例自身，因而可以链式调用其它实例方法。<body&g...
2018-04-17 16:32:25
459
原创 Vue学习—实例(一)
创建Vue实例：每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：var vm = new Vue({......})，当创建一个 Vue 实例时，你可以传入一个选项对象。一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。数据与方法：(1) 当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 dat...
2018-04-17 15:07:16
697
原创 Vue学习—选项(四)
extends:允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。这和 mixins 类似。如下代码，点击加号按钮后执行结果如图：<body> <h1>mixins混入</h1> <div id="app"> {{message}} ...
2018-04-17 11:36:40
248
原创 Vue学习—选项(三) mixins混入
mixins：mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项，他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。举例：如果你的混入包含一个钩子而创建组件本身也有一个，两个函数将被调用。Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。也就是说同一个生命周期钩子写在构造器外部的会比构造器里面的先调用，如下例子...
2018-04-16 17:40:35
958
原创 Vue学习—选项(三)watch
watch:{ [key: string]: string | Function | Object | Array } ,一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。<body> <h1>watch</h1> <di...
2018-04-16 16:11:39
430
原创 Vue学习—选项(二)methods
1. methods 将被混入到 Vue 实例中。可以直接通过 app实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。不应该使用箭头函数来定义 method 函数 (例如 plus: () =>this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。2....
2018-04-16 11:08:28
3870
原创 Vue学习—选项(一)
propsData：只用于 new 创建的实例中。创建实例时传递 props。主要作用是方便测试。一般用得很少<body> <h1>propsData</h1> <div id="header"> </div> <script> var header_aa = Vue.extend({
2018-04-12 16:38:31
168
原创 vue学习—组件03
如下代码，建立父子组件关系时报错： Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. 这个错误翻译为：模板语法错误组件模板应该正好包含一个根元素，如果你使用的是v-i...
2018-04-12 14:40:35
261
原创 Vue学习—组件02
组件组合：组件设计初衷就是要配合使用的，最常见的就是形成父子组件的关系：组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。然而，通过一个良好定义的接口来尽可能将父子组件解耦也是很重要的。这保证了每个组件的代码可以在相对隔离的环境中书写和理解，从而提高了其可维护性和复用性。在 Vue 中，父子组件的关系可以总结为...
2018-04-12 11:47:13
244
原创 Vue学习—组件01
组件 (Component) 是 Vue最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。全局化注册组件组件在注册之...
2018-04-12 10:25:17
187
原创 Vue学习—Vue模板的写法
选项模板：不需要外部构造器，直接渲染到作用域视图中，使用与比较少的内容量可以使用它，可以利用ES6模板字符串``的方式来实现，也可以直接用字符串即"<h1 style="color:red">我是选项模板</h1>"，这时template和data、el一样都是Vue实例的一个选项，所以叫做选项模板。<body> <h1>模板的写法—01<
2018-04-11 17:13:30
1922
原创 Vue学习—生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。注意生命周期钩子的 this 上下文指向调用它的 Vue 实例。不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.f...
2018-04-11 15:56:53
306
原创 vue学习—Vue.set
什么是外部数据，就是不在Vue构造器里里的data处声明，而是在构造器外部声明，然后在data处引用就可以了。Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要每次点击按钮给值加1.就需要用到Vue.set。vue.set很少用得到，但是当我们利用索引直接设置一个项时，vue不会为我们自...
2018-04-11 14:30:20
253
原创 vue学习—vue.extend
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例，需要注意在 Vue.extend() 中data必须是函数.创建 实例，并挂载到一个元素上。<body> <h1>v.extend </h1> <div id="header"> </div> <script&
2018-04-11 11:49:11
512
原创 vue学习—directive自定义指令
vue实例，把所有和Vue相关的都放在这个构造器里面。el指定作用域范围。全局API不在构造器里。directive自定义指令在构造vue实例的构造器之外，注册一个全局自定义指令 Vue.directive("指令名称",{操作})，自定义指令定义的操作可以提供几个钩子函数(5个均为可选)：(1) bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。(2) inse...
2018-04-11 11:32:27
273
原创 vue学习—常用指令(三)
v-pre：v-pre显示源码，即{{}}里面是什么就直接显示什么;v-cloak：v-cloak指令，必须配合style标签使用 [v-cloak] {display: none; }。使用这个指令之后的效果：在浏览器渲染完成之前看不到v-cloak控制的这条内容。v-once：v-once指令，只显示一次，也就是说v-once控制的这条内容第一次显示是按照{{}}里面的内容来显示的，但是在这之...
2018-04-11 11:23:56
161
原创 vue学习—常用指令(二)
v-model：-model通常用于表单组件的绑定，例如input，select等。它实现的是表单组件的双向绑定，如果用于表单控件以外标签是没有用的。如代码所示，v-model有三个修饰符: (1) v-model.lazy在改变这个input输入框里message的值的时候，原始的message值不会发生改变，只有当v-model.lazy这个输入框失去焦点的时候原始的message值才发生...
2018-04-11 11:20:52
197
原创 vue学习—常用指令(一)
v-if，v-else：v-if显示条件为真的时候的数据; v-else显示条件为假的的时候的数据<el-table-column fixed="right" label="操作" min-width="200" v-if="userInfo.manager == 1"> <template slot-scope="scope"> &l
2018-04-11 11:09:56
218
原创 vue富文本插件vue-quill-editor的使用
首先下载vue-quill-editor cnpm install vue-quill-editor --save新建公共组件quillEditor.vue，在quillEditor.vue中的html代码如下：<template><quill-editor v-model="content" ref="myTextEditor" :options="editorOptio...
2018-04-09 16:18:15
10321
4
原创 关于vue的特殊属性keep-alive
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执...
2018-04-09 15:43:29
1744
原创 使用阿里巴巴矢量图标库下载所需的小图标
阿里巴巴矢量图标库官网：点击打开链接在官网注册一个账号登录进去，或者直接用github账号，qq账号等；在这里搜索你需要的图标： 将搜索到的图标加入购物车，点击购物车 点击“添加至项目”，然后点击确定在项目图标页中，选择Font class，点击更新代码点击更新代码之后会生成新的icon图标的css地址，复制这个地址在浏览器中打开，然后全部复制css代码替换掉原来的icon.css中的代码。这...
2018-04-02 16:48:28
3612
原创 页面打开时清除缓存的几种方法
HTTP头信息“Expires”和“Cache-Control”为应用程序服务器提供了一个控制浏览器和代理服务器上缓存的机制。HTTP头信息Expires告诉代理服务器它的缓存页面何时将过期。HTTP1.1规范中新定义的头信息Cache-Control可以通知浏览器不缓存任何页面。当点击后退按钮时，浏览器重新访问服务器已获取页面。使用Cache-Control的基本方法：no-cache—强制缓存...
2018-02-24 15:45:18
2121
原创 一个居中截取图片的小技巧
做项目的时候遇到一个需求，要在不缩放的情况下，截取图片的居中部分作为用户头像。以前用过css3中的clip:rect来截取图片，但是rect后面的上下左右四个参数只能是具体的数值，设置成百分比就无效了。在不知道每张图片具体大小的情况下，这个方法显然用不了。然后我想了一个办法：首先判断后台所传图片宽高的方法：如下图：然后在js里面获取后台所传图片，并应用上面的函数手动设置显示的图片的宽高
2018-02-02 16:33:53
1013
原创 关于github里面的个人邮箱设置
remote: error: GH007: Your push would publish a private email address.在用github提交代码的时候总是报这个错误，检查了多次命令输入都是没错的，但结果就是不行。然后我翻译了这句话并查找相关资料，原来是因为我的github里面的邮箱设置成了私人邮箱，及不公开的邮箱账号，在github的设置选项里面找到Emails选项，如下图所示
2018-02-02 11:22:10
27275
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人