前端的乱七八糟知识点（1）

最新推荐文章于 2024-06-26 15:43:26 发布

阡陌路人

最新推荐文章于 2024-06-26 15:43:26 发布

阅读量347

点赞数

分类专栏：前端知识点杂谈文章标签：前端

本文链接：https://blog.csdn.net/Iwokei/article/details/105257408

版权

前端知识点杂谈专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、怎么解决pc显示，移动端隐藏问题？

方法一：

后台请求header的‘’User-Agent‘’来判断移动端还是pc端。页面根据这个值来判断是否显示。


function ifpc() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var i = 0; i < Agents.length; i++) {
        if (userAgentInfo.indexOf(Agents[i]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}
 
var flag = ifpc(); //true为PC端，false为手机端

navigator 对象包含有关浏览器的信息。

userAgent 返回由客户机发送服务器的 user-agent（用户代理）头部的值。

方法二：

直接设置class

.class{
	display:none;
}
@media(max-width:767px){
    .class{
	display:block !important;
     }	
}

媒体查询
@media screen and (max-width:600px){
/这是手机端的样式/
}
@media screen and (min-width:1024px){
/这是PC端的样式/
}

二、倒水问题

题目：有三个杯子，8L,5L,3L,只有8L满水，其余无水，求4L（无刻度，只能来回倒）
A=8 B=5 C=3
A满

8 0 0 初始状态 A B C

3 5 0 用A的水倒满B ，得到

3 2 3 用B的水倒满C ，得到

6 2 0 C倒进A

6 0 2 把B倒进C中

1 5 2 把A倒入B，得到满B

1 4 3 把C倒满

4 4 0 把C倒入A

三、Vue的watch属性

监听
Watch：
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

简单的watch只有发生改变是才会调用
immediate 立即处理，进入页面就调用
deep 深度监听
对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以不会触发watch。
这时我们需要进行深度监听，就需要加上一个属性 deep，值为 true

<body>
<div id="app">
    <input type="text" v-model="string">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            string: ''
        },
        watch: {
            string(newVal, oldVal) {
            // 监听 string属性的数据变化
    		// 作用 : 只要 string的值发生变化,这个方法就会被调用
    		// 第一个参数 : 新值
    		// 第二个参数 : 旧值,之前的值
                console.log('oldVal:',oldVal)
                console.log('newVal:',newVal)
            },
            immediate:true（立即处理 进入页面就触发）
        }
    })
</script>
</body>

watch
用于观察和监听页面上的vue实例，当你需要在数据变化响应时，执行异步操作，或高性能消耗的操作，那么watch为最佳选择

computed
可以关联多个实时计算的对象，当这些对象中的其中一个改变时都会触发这个属性
具有缓存能力，所以只有当数据再次改变时才会重新渲染，否则就会直接拿取缓存中的数据。

methods,watch,computed的区别

computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
methods 方法表示一个具体的操作，主要书写业务逻辑；
watch 一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是 computed 和 methods 的结合体；

大佬原文