题外:本月开始应公司项目的需求,陆续进入到前端开发,作为一个小白开始成长
0402
史上最强Android保活思路:深入剖析腾讯TIM的进程永生技术
0407
js从input里面获取到的value一直是字符串类型
js取出来的就是字符类型,如果需要当成数值型处理的话,就用parseInt() parseFloat()这类转换函数转一下
0408
跨域
是指浏览器不允许当前页面的所在的源去请求另一个源的数据。源 指协议,端口,域名。只要这3个中有一个不同就是跨域。
#协议跨域
http://a.baidu.com访问https://a.baidu.com;
#端口跨域
http://a.baidu.com:8080访问http://a.baidu.com:80;
#域名跨域
http://a.baidu.com访问http://b.baidu.com;
为什么会存在跨域?是浏览器对javascript施加的安全限制
0413
使用axios发送json后台接收不到的问题
按照axios官网例子发起请求传递json,后台接受到的数据为空,后台不接受json对象的参数形式
解决办法:利用qs模块转换参数。axios中的qs介绍
0414
Cannot read property ‘matched’ of undefined
在vue项目中,在配置路由的时候,引入路由文件后的命名上出现了问题,router 才是Vue实例化的配置字段名称,写成了Router,Vue不认识了
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import Router from './router/index.js'
Vue.use(VueRouter)
/* eslint-disable no-new */
new Vue({
el: '#app',
Router,//这是错误的写法 应该是router或者router:Router
template: '<App/>',
components: { App }
})
0415
flex竖布局下。左边是一个设置了宽度的div,右边是一个自动占用全部空间的div。当这个时候右边的宽度超出剩余空间的时候会占用其它空间将左边的div挤小。
解决办法是:给左边的div设置最小宽度min-width
0424
CSS样式中文字的换行
css中强制换行有下面三个属性word-break、word-wrap、white-space
- word-break
normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行。
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。
该值适合包含一些非亚洲文本的亚洲文本。
keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。
适合包含少量亚洲文本的非亚洲文本。
- word-wrap
normal:控制连续文本换行。
break-word:内容将在边界内换行。
- white-space
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
关于Vue中子组件的prop值更新的问题
Avoid mutating a prop directly since the value will be overwritten
whenever the parent component re-renders.
Instead, use a data or computed property based on the prop's value.
Prop being mutated: "grants" (found in component )
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。(父组件更新,子组件中的prop值也会更新,但子组件不能修改由父组件传递过来的值)
解决办法:
- 利用计算属性的get方法拿到prop值
- 在利用set方法将这个值传给父组件
// 子组件
<van-dialog
class="qr_code"
v-model="showDialog_"
width="274px"
:show-confirm-button="false"
:show-cancel-button="false"
:close-on-click-overlay="true"
>
// ...js
props:{
showDialog:Boolean
}
computed:{
showDialog_:{
get(){
return this.showDialog
},
set(val) {
this.$emit("on-show-change", val)
}
}
}
// 父组件
<QRCodeDialog :showDialog="show" @on-show-change="changeShow"></QRCodeDialog>
methods: {
。。。
changeShow(val) {
this.show = val
}
}
vue-clipboard2
复制内容至剪切板 文档
0428
vue 路由 按需 keep-alive
https://blog.csdn.net/namechenfl/article/details/90370596
include
- 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude
- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max
- 数字。最多可以缓存多少组件实例。
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
0429
‘wx’ is not defined no-undefine
eslintrc检查出的报错,解决办法,在.eslintrc.js文件中加入以下内容
globals: { wx: true }
再重启服务