本文涵盖前端开发中常见的问题解决技巧，包括Vue.js的高级用法，如响应式属性管理、事件绑定、指令自定义及性能优化策略。同时探讨了CSS定位、变换及兼容性问题，以及JavaScript基础数据类型和DOM操作细节。
1.当盖视点设置填充属性时边界半径不生效
2.获取对象属性的个数Object.getOwnPropertyNames（testObj）。长度
3.Vue.js当绑定事件和类名一样时页面一片空白也不报错！
4.vue只能有一个根元素
5.Vue不允许在已经创建的实例上动态添加新的根级响应式属性。
6.Vue不能检测到对象属性的添加或删除或修改，最好的方式就是在初始化实例前声明根级响应式属性，哪怕只是一个空值。
7.使用VUE全局方法设置对象属性可以使VUE检测到属性的添加和删除但依旧不能检测到修改
8.
数组pop（）删除最后一个,
push（）添加最后一个,
shift（）删除第一个,
unshift（）添加第一个
9.小程序在页面配置css overflow-hidden页面就不滚动了
10.vue v-if v-else v-for别挂在一个标签使用！会爆炸
11.Vue在富文本中绑定事件在渲染出来事件不生效要这样搞
mounted:function(){
this.$nextTick(() => {
// Code that will run only after the
// entire view has been rendered
$(this.$el).on('click', "img", (e) => {
console.log(e.target.src)
})
})
},
//$nextTick dom更新 nextTick数据更新
//this.$refs.article 绑定任意对象
12. vue中指令的用法
<input v-local-test />
directives:{
'local-test':function(el,binding,vnode){
/** el可以获取当前dom节点，并且进行编译，也可以操作事件 **/
/** binding指的是一个对象，一般不用 **/
/** vnode 是 Vue 编译生成的虚拟节点 **/
el.style.border="1px solid red"; //操作style所有样式
console.log(el.value); //获取v-model的值
console.log(el.dataset.name) //data-name绑定的值，需要el.dataset来获取
console.log(vnode.context.$route); //获取当前路由信息
}
},
13.onpopstate检测历史变化pushState的的的的的的的的的设置历史记录replaceState更改历史记录
让对方手机不能返回 超暴力！
window.onpopstate = function(event) {
history.pushState({page: 3}, "title 3", "?page=3");
alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数.
history.pushState({page: 1}, "title 1", "?page=1"); //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({page: 2}, "title 2", "?page=2"); //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
//history.replaceState({page: 2}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
//console.log(history)
//history.back()
//history.go(1)
//history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
//history.back(); // 弹出 "location: http://example.com/example.html, state: null
//history.go(2); // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}
14.只有标签才能为一个表单但是标签并不能使选择出现下拉，标签，输入等单标签不能：之前的类
15.Vue绑定事件对象用$ event @ click =“fun（$ event）”
16.原生AJAX
var ajax=null;
try {
ajax=new XMLHttpRequest()
}catch(e) {
ajax=new ActiveXObject("Microsoft.XMLHTTP")
}
ajax.open("post","a.php",true)
//原生ajax要设置请求头 不然默认text/plain请求头 无法发送键值对数据
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")
//请求体键值对数据
ajax.send("name=张三&age=20")
ajax.onreadystatechange=function(){
if(ajax.readyState==4){
if(ajax.status==200){
console.log(ajax.responseText)
}
}else{
console.log(ajax.status)
}
}
17.要想在形式提交时不跳到其他页面可以这样！表单提交好像没用到的XMLHttpRequest的的的的因为在控制台XHR请求里面看不到
<!-- 空iframe，用于协助处理form提交后不进行页面跳转的问题 -->
<form target="iframe_display" action=""></form>
<iframe name="iframe_display" style="display: none;"></iframe>
18.拼接对象用Object.assign（{}，{}）取对象的值Object.values（）取对象的键Object.keys（）
19.js有几种基本数据类型？用的typeof运算运算运算运算去检测的话有基本类型（数字，未定义的，字符串，布尔）引用类型（对象，函数）
阵列是对象，空是物体另外还用日期对象正则对象等等
20.用vue时可以先绑定个原生类名在绑定个vue类名<div class =“text-danger”：class =“'active'”>
21.if判断中undefined，null，0 NaN，“”，false都执行不了
22.Boolean（ARR）用来判断布尔值是真还是假
23.iframe获取父页面parent.document操作父方法parent.function（），window.open（）打开的窗口可以通过opener.document opener.function（）来搞 window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click();
24.普通函数和定时器中的这是窗口，构造函数中的这是实例对象，原型方法中的这也是实例对象
25.当CSS定位设置的是绝时离脱离文档流，边缘不再生效
26.在三维变换中，如果角度不生效那可能是不兼容加上-webkit-前缀试验，变换风格：持之以恒-3D开启3D模式
27.回调函数函数作为参数调用
28.阻止事件冒泡e.stopPropagation
29.dom设置自定义属性dom.setAttribute（）---------- dom.getAttribute（）
bigBox.setAttribute('style' , 'width:400px; height:300px; background-color:blue')
30.用line-block 有时候很难和前面的元素对其 这时候加上position:relative 然后调位置
31.变量提升，变量中的值不提升，常量只能定义一次，变量可以重复定义
32.
1、onmouseleave、onmouseenter，鼠标进入到指定元素区域内触发事件，不支持冒泡，不包含子元素的区域。
2、onmouseout、onmouseover、鼠标进入指定元素触发事件，含子元素区域。
33.vue子组件向父组件传递值时，要小写事件名称！
1、事件名称要求全小写。
2、不是父子关系。这里的父子关系是严格的父子关系，祖孙关系也不行。只能一层一层触发，这在写树形组件时，很容易掉坑里。
34.window.history.go(-1),window.history.back(),window.location.href=''
35.window.innerHeight 获取设备宽高
var a=':9:'
console.log(a.replace(/(?=\d)/g,0));
匹配后面是一个数字的空符 结果：09： 可以用来日期补0
var a=':9:'
console.log(a.replace(/(?<=\d)/g,0));
匹配前面是一个数字的空符 结果：90： 可以用来日期补0
var num=('0'+num2).slice(-2)可以截取后两个
slice(-4,-2)
slice(0,-2)
let str = "2016-1-1 1:1:1"//下面两种正则替换方法都可以实现日期补零
console.log(forDate.replace(/(?=\b\d\b)/g,0))
console.log(str.replace(/\b\d\b/g, '0$&'));
36.命令行输入 echo test > .properties创建以.开头的文件
37.打包工具的.babelrc文件用记事本打开，存储为任意格式，utf-8编码
39.在谷歌浏览器使用翻译时e.target.nodeName不好使 因为谷歌把我们的标签名改了 比如i 改为font
40.
- 将输入的中文替换成空字符
input.value = input.value.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g, '');
41.ime-mode:disabled这是个垃圾属性 只有ie和火狐支持 大家都别用！
42.input表单只能输入数字 加号点号都不可以的写法
<input onkeypress="return(/[\d]/.test(event.key))" onkeyup="fun(event)"/>
英文输入状态下 onkeypress可以做到
中文输入状态下用事件做替换
function fun(e){
e.target.value=e.target.value.replace(/[^0-9]/g,'')//替换掉不是数字的
e.target.value=e.target.value.replace(/^0/,'')//替换掉开头是0的
}
43.a链接跳到本页面
<a href="#tt">单此处什么也不会发生</a>
<div id="tt" style="width:200px;height:200px;background:red"></div>
扫一扫
1399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
