前端学习笔记_uniapp setdata

笔记

小知识

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)
 
}
1
2
3
4
5
6
7
8
9
10
11

var pre = new Date();
function trol(fn,delay){
   
    return function () {
   
        var now = new Date();
        if(now-pre >= delay){
   
            fn();
            pre = new Date();
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12

防抖

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

节流

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

filter

filters: {
   
ellipsis (value) {
   
      if (!value) return ''
      if (value.length > 32) {
   
        return value.slice(0,32) + '...'
      }
      return value
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12

抽象类和接口的不同

枚举

//enum 枚举

enum Gender {
   

  Male = 0,

  Female = 1,

}

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

i = {
   

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

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

尺寸单位

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

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'); 
    }
  }
1
2
3
4
5
6
7
8

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

console.log(store.getters.weekDate)
1

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

computed: {
   
  weekDate () {
   
    return this.$store.getters.weekDate
  }
}
1
2
3
4
5
6
7

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 和 $emit。父组件向子组件传递数据是通过props传递的，子组件传递给父组件是通过$emit触发事件来做到的。

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

3、$attrs 和 $listenersA->B->C。Vue2.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(){
   } 

});
1
2
3
4
5
6
7
8
9

函数声明方式

　　　　声明 : function first（）{
   }；

　　　　调用：first（）

函数表达式声明方式

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

　　　　调用：second（）
1
2
3
4
5
6
7
8
9
10
11
12
13

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"  
                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47