前端的乱七八糟知识点(1)

一、怎么解决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 的结合体;

大佬原文

你可能感兴趣的:(前端知识点杂谈)