目录
2. console.time和console.timeEnd用法
1. "padding" 和 "margin" 的百分比值：
2. npm run dev 后 "Cannot GET /"报错的原因：
3. 关于git使用https链接代码,每次都要输入账号密码：
Vue
1. 子组件"mounted"钩子函数要早于父组件：
钩子函数触发顺序如下，"mounted" 和 "destroyed" 都是子组件先触发。在线测试demo
DOM结构如下：
<parent>
<child></child>
</parent>2. 不能被检测更新的数据 及 "强制更新"办法：
如下 demo 测试了 "{{}}" 内的数据更新，及 "watch" 函数的触发条件。 在线demo
<div id="app" :update="count">
<button @click="obj_a_push">obj原生的属性"a" push({}) 【能被检测】</button><br>
<button @click="obj_aNew_push">obj后来添加的属性"aNew" push({}) 【不能被检测】</button><br>
<button @click="arr_1_assign">"arr[1]=val" 【不能被检测】</button><br>
<button @click="arr_0_push">"arr[0].push({})" 【能被检测】</button><br>
<button @click="arr_push">"arr.push({})" 【能被检测】</button><br>
<button @click="handleUpdate">"强制"更新</button>
<hr>
<div>obj: {{obj}}</div>
<div>arr: {{arr}}</div>
<hr>
<div>watch函数触发的value: {{watchHappen}}</div>
</div>new Vue({
el: '#app',
data(){
return {
obj: { a: [] },
arr: [ [], 1 ],
count: 0,
watchHappen: 0
}
},
beforeMount(){
// 为 obj 扩展一个新属性，但 vue 无法检测
this.obj['aNew'] = [];
},
methods:{
obj_a_push(){
this.obj['a'].push({})
},
obj_aNew_push(){
this.obj['aNew'].push({});
},
arr_1_assign(){
this.arr[1] = parseInt(Math.random()*100)
},
arr_0_push(){
this.arr[0].push({})
},
arr_push(){
this.arr.push(0);
},
handleUpdate(){
this.count ++;
}
},
watch: {
obj(val) {
this.watchHappen = val
},
arr(val) {
this.watchHappen = val
}
}
})结论：
1. "arr[index]=value" 和 "obj[prop]=value" 这种赋值方式，均不能被检测更新；
2. 对象内的原生组数( 即"data"内预先定义好的,如obj:{arr:[]} )，obj['arr'].push方法添加数组对象，可以被检测更新；
3. 对象内的非原生组数( 即后添加的属性,如obj['arr2']=[] )，obj['arr2'].push方法添加数组对象，不能被检测更新；
4. 对象内部的数据改变，"watch" 函数无法检测到，除非 "obj=obj2" ；
5. 修改"不能被检测更新"的数据时，连带修改值类型数据，可以实现"强制更新"。
3. 使用Element框架,获取子组件的"实际高度"：
如图所示，"mounted()" 钩子函数可以 "this.$el.offsetHeight" 获取组件高度非实际值。
可以通过在 "updated()" 钩子函数内获取 "this.$el.offsetHeight" 的值，该值为实际值。
JavaScript
1. JS获取/修改DOM元素的style：
<body>
<div class="test" style="height:600px"></div>
</body>
<script>
var domObj = document.getElementsByClassName('test')[0];
// ".style.prrperty"无法获取<style>内的样式,只能获取该DOM元素的内敛样式
console.log(domObj.style.width); // ""
// 获取<style>标签内样式的方法
// 适用于 Firefox 和 chrome
// "getComputedStyle"方法的第二个参数是伪类选择，不需要则设定为null
console.log(window.getComputedStyle(domObj,null).width); // 500px
// 仅适用于IE
// console.log(domObj.currentStyle.width); // 500px
// 修改css样式仅有一个方法
domObj.style.width = "1000px";
</script>2. console.time和console.timeEnd用法
function fn(){
console.time('usageTime');
for(let i=0;i<100;i++){console.log('')}
console.timeEnd('usageTime');
}
fn(); // usageTime: *****ms
CSS
1. "padding" 和 "margin" 的百分比值：
CSS的 padding 和 margin 可以用 "%" ，但其取值为父容器宽度的百分比，无论垂直还是水平方向的 padding 和 margin ；border 不能使用 "%" 。（在线demo | 下图内框 padding:10%;height/width:50px ）
2. "transform" 对 行内元素 不起作用：
左图中的字体大小相同，但对行内元素不起效，解决办法是设置样式 "display:inline-block" 。（在线demo）
3. "::before" 和 "::after" 属于 行内元素：
伪类元素 "::before" 和 "::after" 均为行内元素，需要对其设置高宽，先设置样式 "display:inline-block" 。
注意，"content" 样式是必须的。
其他
1. 项目文件夹中assets和static的区别：
简单说，assets存放自己编写的，需要打包编译的；static则存放静态资源，不需要打包编译的。
2. npm run dev 后 "Cannot GET /"报错的原因：
1. 文件目录命名导致，建议改成全英文
2. request模块导致，npm remove request ; npm i request
3. config配置文件导致，assetsPublicPath:'./' 改成 '/'
3. 关于git使用https链接代码,每次都要输入账号密码：
git bash进入你的项目目录，输入：
git config --global credential.helper store
然后你会在你本地生成一个文本，上边记录你的账号和密码。
其他文章
1416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
