随笔分类 - vuejs
vuejs
摘要：vue用hbuilderX打包app嵌入h5方式云打包和遇到的问题
vue用hbuilderX打包app就可以了，不过有兼容性问题，转换rem的用不了，嵌入到app的webview里面变得很小了，另外还有返回键监听的问题需要处理，否则按手机上的返回键不起作用，另外缓存问题，加载页跳转白屏问题也需要优化。
安卓本地打包要用这个安卓的sdk项目，参考官网这个链接：http://ask.dcloud.net.cn/article/38
安卓本地打包我没去搞，用的是它的云打包
你下载一个hbuilderX
用hbuilderX打开Android打包源项目，点击发行->云打包即可
阅读全文
摘要：Cookie写不进去问题深入调查 https Secure Cookie
什么情形下，Cookie 会写不进去？https Secure Cookie
像是语法错误那种显而易见的就不用说了，除此之外你可能会答说：写完全不同domain的Cookie。例如说你的网页在http://a.com却硬要写http://b.com的Cookie，这种情形当然写不进去。
或者，你可能会回答：不在https却想加上Secureflag的Cookie。
没错，像是这种情形也会写不进去。
除了这些，你还能想到什么吗？
如果想不太到，那就听我娓娓道来吧！
阅读全文
摘要：vue配置手机通过IP访问电脑开发环境
config/index.js
// Various Dev Server settings
host: '0.0.0.0', // can be overwritten by process.env.HOST
port: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false,
修改host: '0.0.0.0',errorOverlay: true,
阅读全文
摘要：微信内置浏览器禁止缓存的问题
解决方案1：
调试阶段或者频繁更新的页面加入以下头信息：
注：上面对一般浏览器有用，微信内置浏览器有时候可能没用
也可以通过服务器配置来解决缓存问题
解决方案2：
更新文件的时候，在引用css，js等文件的语句上加上一个版本号，就能有效防止浏览器一直使用缓存中的css，js
阅读全文
摘要：vue配置手机通过IP访问,Win10让局域网内其他电脑通过IP访问网站的方法
config/index.js
// Various Dev Server settings
host: '0.0.0.0', // can be overwritten by process.env.HOST
port: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false,
修改host: '0.0.0.0',errorOverlay: true,
阅读全文
摘要：小米手机跨域问题，返回resphone：undefined，status 0
我小米note2的手机登录不上，返回resphone：undefined，status 0
我手机登录不了的问题解决了，后台接口跨域设置缺少head参数（注：关键是这个head参数）
allowMethods: ['GET', 'PUT', 'POST', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'],
阅读全文
摘要：使用HTML meta no-cache标签来禁用缓存
因为是 HTML 页面，可以于 HEAD 标签内直接添加 META 标签：
其他文件就需要使用服务器设置文件控制 header
阅读全文
摘要：vue 定义全局函数，监听android返回键事件
方法一：main.js 注入
（1）在main.js中写入函数
Vue.prototype.changeData = function (){
alert('执行成功');
}
（2）在所有组件里可调用函数
this.changeData();
方法二：
单独创建一个 .js 文件，用于存放常用函数，并全局引用
阅读全文
摘要：vue使用v-for时vscode报错 Elements in iteration expect to have 'v-bind:key' directives
Vue 2.2.0+的版本里，当在组件中使用v-for时，key是必须的
错误提示:
[vue-language-server] Elements in iteration expect to have 'v-bind:key' directives.
Renders the element or template block multiple times based on the source data
原因是eslint检测出现bug
解决方法：
1.在v-for 后添加 :key='item'
阅读全文
摘要：vue获得当前页面URL动态拼接URL复制邀请链接方法
当前页面完整url可以用 location.href
路由路径可以用 this.$route.path
路由路径参数 this.$route.params
实例：动态邀请链接，获得当前页面URL去掉path，替换成注册的加上邀请码：
this.invitelink = location.href.replace(this.$route.path,'') + "/register?invitecode=" + this.invitecode;
复制邀请链接方法：
main.js里添加：
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
阅读全文
摘要：pt和px区别 pt是逻辑像素，px是物理像素
字体大小的设置单位，常用的有2种：px、pt。这两个有什么区别呢？
先搞清基本概念：px就是表示pixel，像素，是屏幕上显示数据的最基本的点；
pt就是point，是印刷行业常用单位，等于1/72英寸。
以iPhone8为基础750做的设计pt单位的，再网页中用px做单位要在pt基础上乘以2了
阅读全文
摘要：vue.js国际化vue-i18n插件的使用问题，在模版文本、组件方法、jsf方法里的使用
1.在文本里使用{{$t("xxx")}}
2.在组件方法里使用$t('xxx')
3.在js方法里使用：this.$i18n.t('xxx')
4.如果是在请求后返回的方法里使用需要在上面先定义个变量，var this_ = this; 然后里面使用this_才能正常使用
在main.js里引入：import i18n from './language/i18n'
阅读全文
摘要：vue mand-mobile ui Stepper步进器默认值传字符串进去不起作用
Stepper 步进器 的默认值有没有弄过的，看了组件只能默认数字的，传字符串进去不起作用
委托价格
弄个插槽可以把文字放底下，但不会消失
只能通过change事件来控制插槽的显示和隐藏了
点击或者数字不为默认值的时候把提示隐藏了
默认的数字0 也是去不掉的
阅读全文
摘要：vue不通过路由直接获取url中参数的方法示例
vuejs取得URL中参数的值
地址：http://localhost:3333/#/index?id=128
console.log(this.$route.query.id)
结果：128
1、参数名需要保持一致
2、如果路由中没有传参（http://192.168.1.12:8080/#/detail），会报错，页面无法显示，正常页面为 http://192.168.1.12:8080/#/detail/234
如果有的参数可传可不传，可以使用？传参
例如：http://192.168.1.12:8080/#/detail/?id=123
获取的时候：
let id = this.$route.query.id
这样即使取不到参数，页面也不会报错
阅读全文
摘要：vue 在浏览器控制台怎么调试 谷歌插件vue Devtools
问题： vuejs里面的变量，怎么用浏览器的console查看？
例如，想在chrome里用console.log查看变量$data，会显示undefined。
解决方案:
在main.js里面声明window.Vue = new Vue
window.Vue = new Vue({
el: '#app',
router,
store,
components: { App },
template: '
阅读全文
摘要：vue条件语句v-if、v-else、v-else-if用法
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
阅读全文
摘要：JS的防抖与节流
在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。
此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。
函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
阅读全文
摘要：vue mand-mobile ui加class不起作用的问题 css权重问题
组件的样式优先权比自己定的class高
多加几层权重才行，要直接用样式覆盖也可以在前面多加几层class，定位更精确了才会覆盖组件的样式
覆盖的class要跟组件一样，中间不能空开，空开了就不生效了。
阅读全文
摘要：vue store存储commit和dispatch
this.$store.commit('toShowLoginDialog', true);
this.$store.dispatch('toShowLoginDialog',false)
主要区别是：
dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('mutations方法名',值)
commit：同步操作，写法：this.$store.commit('mutations方法名',值)
例如：登录成功后读取用户信息写到coikie里
阅读全文
摘要：懒加载是如何实现的？
找到一个不需要知道图片宽高的懒加载方法了（经过实际测试，不加宽高仍然是无法正常加载的，设置height:auto,height:100%，仍然显示高度为0）
dinbror/blazy: Hey, be lazy! bLazy.JS is a lightweight pure JavaScript script for lazy loading and multi-serving images. It's working in all modern browsers including IE7+.
https://github.com/dinbror/blazy#demo
这个兼容性比较好
注：vuejs，react有对应的懒加载插件
阅读全文