前端学习笔记

最新推荐文章于 2022-11-19 22:29:08 发布

兆兆兆兆兆鹏

最新推荐文章于 2022-11-19 22:29:08 发布

阅读量1.1k

点赞数

分类专栏： Vue 笔记前端文章标签： vue uni-app 前端 javascript

本文链接：https://blog.csdn.net/e1592027130/article/details/120843171

版权

这篇博客详细记录了前端开发的学习笔记，涵盖Vue、UniApp、JavaScript等多个方面，包括事件绑定、数据通信、组件生命周期、Vuex、路由懒加载、数据处理、动画效果、CSS技巧和性能优化等内容，旨在帮助开发者全面理解前端开发中的关键概念和技术应用。

摘要由CSDN通过智能技术生成

笔记

小知识

V-ON绑定事件 V-BIND绑定属性

Network中可以查看当前发起的请求

XHR这个标签出现在Chrome浏览器的开发者工具Network选项卡中

XHR类型即通过XMLHttpRequest方法发送的请求即AJAX请求

外部JS引入当前Vue实例函数中传this指向就好了

forEach没有返回值要有返回值的话用map

git checkout -b dev origin/dev 建立分支并且从远程拉取

APP的组件生命周期与小程序有出入

scroll view 有滑动时间并把scrollTop返回给scroll view 滑动会有抖动

页面滑动最好用

Console.log() 一个对象浏览器显示出来的是最后结果如果其中属性是有异步函数返回的，你将读不到那个属性

CCS3 中的Calc()函数

await等的是Promise对象

通过data-xx 绑定一个值可以通过event获取

z-index只有在设置了position为relative,absolute,fixed时才会有效。

z-index的“从父原则”。设置了z-index的元素要在相同的根元素下菜有效

微信小程序的Console.log()可以字符串加数据也会显示对象

如果需要在页面进入时设置标题，可以在onReady内执行，以避免被框架内的修改所覆盖。如果必须在onShow内执行需要延迟一小段时间

小程序组件CSS优先 APP 页面CSS优先

transition 触发条件是当属性变化的时候触发

闭包是指有权访问另外一个函数作用域中的变量的函数。可以理解为(能够读取另一个函数作用域的变量的函数)

src用于替代这个元素，而href用于建立这个标签与外部资源之间的关系。

hasOwnProperty(property)
判断对象是否有某个特定的属性。必须用字符串指定该属性。（例如，o.hasOwnProperty(“name”)）
IsPrototypeOf(object)
判断该对象是否为另一个对象的原型。

setData无法使用

//重写setData使uniapp支持setData写法
import Mixin from “./common/mixins.js”;
Vue.mixin(Mixin);

require和import区别

Nodejs用require 和 export.moudle 其他用Import 和export

require 是赋值过程并且是运行时才执行，
import 是解构过程并且是编译时执行。

require可以理解为一个全局方法，就意味着可以在任何地方执行。
而import必须写在文件的顶部。

require的性能相对于import稍低，因为require是在运行时才引入模块并且还赋值给某个变量，
而import只需要依据import中的接口在编译时引入指定模块所以性能稍高

子传父

子传父通过自定义事件，emit 触发自定义事件传值，再通过自定义事件绑定一个函数进行取值

双位数转换为一位

parseInt(‘01’);

抖和最简单的节流

var obj = {
   };
function searchResult(){
   
	clearTimeOut(obj.g);
	obj.g = setTimeout(function(){
   
	   //这里发送请求
	},1000)
 
}

var pre = new Date();
function trol(fn,delay){
   
    return function () {
   
        var now = new Date();
        if(now-pre >= delay){
   
            fn();
            pre = new Date();
        }
    }

防抖

在连续的操作中，无论进行了多长时间，只有某一次的操作后在指定的时间内没有再操作，这一次才被判定有效

节流

规定时间内，只触发一次，可以通过设置immediate来决定触发的时机在这个时间的开始，还是结束的时候执行。

filter

filters: {
   
ellipsis (value) {
   
      if (!value) return ''
      if (value.length > 32) {
   
        return value.slice(0,32) + '...'
      }
      return value
    }
  }

抽象类和接口的不同

枚举

//enum 枚举

enum Gender {
   

  Male = 0,

  Female = 1,

}

let i: {
    name: string, gender: Gender }

i = {
   

  name: '孙悟空', gender: Gender.Male//0

}

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

1 rpx = 屏幕宽度/750 px

页面滚动

给元素设置catchtouchmove=“notmove” notmove为空的返回函数就可以阻止滚动，只有真机测试的时候才有反应，鼠标滚动仍可以滚动，uniapp没有catchtouchmove,可用@touchmove.stop.prevent代替

事件传递

当tap或者click时，点击后事件默认是冒泡,当你添加.stop的时候当事件触发对应的stop后不再传播

ScollView中定位的坑

position:fixed会在ScollView失效，Canvas也不能用position:fixed

Vuex的Getter

相当于Vuex里的computed属性

  getters: {
   
    // Getter 接受 state 作为其第一个参数
    weekDate: state => {
   
      return moment(state.date).format('dddd'); 
    }
  }

不但如此，Getter 还会将 store.getters 对象暴露出去，你可以以属性的形式访问这些值：

console.log(store.getters.weekDate)

我们可以很容易地在任何组件中使用它：

computed: {
   
  weekDate () {
   
    return this.$store.getters.weekDate
  }
}

Data为什么是函数

因为Data是函数的话他可以有return然后返回一个对象,而每个对象都是独立的作用域的,相同类型的组件的data就可以区分开来

异步组件

components:{

List:()=> import(’./List’)

}

路由懒加载

import Vue from ‘vue’
import VueRouter from ‘vue-router’

Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: ‘/login’, component: () => import(’@/views/login/index.vue’) },
{ path: ‘/home’, component: () => import(’@/views/home/home.vue’) }
]

export default router

Vue组件通讯有哪些方式？

1、props 和 $e m i t 。父组件向子组件传递数据是通过 p r o p s 传递的，子组件传递给父组件是通过$ emit触发事件来做到的。

2、$parent 和 $children 获取单签组件的父组件和当前组件的子组件。

3、$attrs 和 $l i s t e n e r s A - > B - > C 。 V u e 2.4 开始提供了$ attrs和$listeners来解决这个问题。

4、父组件中通过 provide 来提供变量，然后在子组件中通过 inject 来注入变量。（官方不推荐在实际业务中适用，但是写组件库时很常用。）

5、$refs 获取组件实例。

6、envetBus 兄弟组件数据传递，这种情况下可以使用事件总线的方式。

7、vuex 状态管理。

扩展补充：display:none 、 visibility:hidden 和 opacity:0 之间的区别？

三者公共点都是隐藏。不同点：

一、是否占据空间。
display:none，隐藏之后不占位置；visibility:hidden、opacity:0，隐藏后任然占据位置。
二、子元素是否继承。
display:none — 不会被子元素继承，父元素都不存在了，子元素也不会显示出来。
visibility:hidden — 会被子元素继承，通过设置子元素 visibility:visible 来显示子元素。
opacity:0 — 会被子元素继承，但是不能设置子元素 opacity:0 来先重新显示。
三、事件绑定。
display:none 的元素都已经不存在了，因此无法触发他绑定的事件。
visibility:hidden 不会触发他上面绑定的事件。
opacity:0 元素上面绑定的事件时可以触发的。
四、过度动画。
transition对于display是无效的。
transition对于visibility是无效的。
transition对于opacity是有效的。

Vue中methods声明方式与函数的声明方式

 methods:{
          

 *// 在此时定义方法，方法之间使用逗号分隔*        

方法名:function(){
   } 

});

函数声明方式

　　　　声明 : function first（）{
   }；

　　　　调用：first（）

函数表达式声明方式

　　 　　声明: var second=function（）{
   }；

　　　　调用：second（）

scroll-view 踩坑

scroll-view 不适合放长列表，有性能问题。长列表滚动和下拉刷新，应该使用原生导航栏搭配页面级的滚动和下拉刷新实现。包括在app-nvue页面，长列表应该使用list而不是scroll-view。

Uniapp页面级回到顶部

好像不需要事先设置生命周期

onPageScroll(e) {
this.scrollTop = e.scrollTop;
},

　回到顶部函数

uni.pageScrollTo({
　　　　　　scrollTop: 0, duration: 300
　　　　});

组件引用JS

组件引用的JS是相对于组件的位置

CSS中left属性

通常单独使用left、right、top、bottom均无效，需要在使用绝对定位CSS position样式才能生效。

一般left和right在一个样式是只能使用其一，不能left和right都设置，要么使用left就不使用right，要么使用right就不使用left，如果left和right均使用将会出现兼容问题，一个对象设置了靠左left多少距离，自然右边距离自然就有了所以无需设置左边。

相同道理，top和bottom对一个对象只能使用其一，不然会出现逻辑兼容问题。譬如一个人让你往左走，一个人让你往右走，同时发出往左往右走这个时候你也不好判断往那边走。

组件切换

在这里我先介绍component标签: 它是Vue内置的标签,它的用途是可以动态绑定我们的组件,根据数据不同更换不同的组件.
比如:这个效果效果:

在这里插入图片描述

<body>
    <div id="app">
        <component :is="who"></component>
        <button @click="changeComponent">changeComponent</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let componentA={
   
            template:`<div>I am componentA</div>`
        }
        let componentB={
   
            template:`<div>I am componentB</div>`
        }
        let componentC={
   
            template:`<div>I am componentC</div>`
        }

      let app = new Vue({
   
        el: '#app',
        data:{
   
            who:'componentB'
        },
        components:{
   
            "componentA":componentA,
            "componentB":componentB,
            "componentC":componentC
        },
        methods: {
   
            changeComponent(){
   
                if(this.who=="componentA"){
   
                    this.who="componentB"
                }
                else if(this.who=="componentB"){
   
                    this.who="componentC" 
                }else{
   
                    this.who="componentA"