每日小结（2024/10/26）

每日小结（2024/10/26）

1、【Vue底层原理】Object.defineProperty方法的用法

// 代码块
    let number = 18
    let person = {
      name: 'lj',
      sex: '男',
    }
    //通过下方Object.defineProperty方法
    //把number和person关联起来
    Object.defineProperty(person, 'age', {
      //get函数（getter）获取person中的age
      get() {
        return number
      },
      // set函数（setter） 修改number
      set(value) {
        number = value
      },
    })

2、【Vue】 基础概念知识

// 代码块
1、表达式和语句的区别
//表达式是有返回值，并且可以在语句中使用的值
例如 1+1 a+b
//语句主要用于控制逻辑和循环
例如 v-if for循环

2、MVVM模型 （vue是参考的MVVM，并非首例）
M模型（vue中的data数据） V是（dom结构）  MV视图模型（vue实例）
V和M通过 绑定和监听实现数据变化

3、理解数据代理 Vue代码中的数据代理
一个对象代理对另一个对象中数据的代理 包括 读/写
原理：vm对象来代理data中对象中属性的操作，通过Object.defineProperty()把
data对象的中所有属性添加到vm上，每个属性都有一个指定的getter/setter 进行读/写

3、【Vue】事件处理和事件修饰符

// 代码块
1、事件处理 v-on:click或@click
<button @click="handleClick1('1',$event)">点击事件1</button>
<button @click="handleClick2">点击事件2</button>
methods: {
        handleClick1(value) {
          console.log(value, 'value')
        },
        handleClick2($event) {
          console.log($event.target.innerText, '标签')
          console.log(this, 'value') //this指向实例
        },
        // 箭头函数
        // handleClick2: () => {
        //   console.log(this, 'value') //this指向window
        //   console.log(vm, 'value')
        // },
},
2、事件修饰符 修饰符可以连写
   <!--.prevent事件修饰符是为了阻止元素的默认事件-->
      <a href="www.baidu.com" @click.prevent="handleClick">跳转到百度</a>
      <!--.stop 阻止冒泡-->
      <div class="box" @click="handleClick1">
        <button @click="handleClick1">
       		点击事件1
        </button>
      </div>
      <!--.once 事件只触发一次-->
        <button @click.once="handleClick2">
        	事件只触发一次
        </button>
      </div>

4、【浏览器】使用Vue-devtools工具 图标发现不亮

使用Vue-devtools
首先确定项目能正常运行
其次，扩展程序库打开对应配置

5、【JavaScript】获取URL中的参数

// 代码块
  getQueryString(name) {
    let href = window.location.href
    if (href.indexOf('?') > 0) {
      try {
        let parStr = href.split('?')[1]
        // 判断是否有#号
        if (parStr.indexOf('#') > 0) {
          parStr = parStr.split('#')[0]
        }
        let pars = parStr.split('&')
        for (let i = 0; i < pars.length; i++) {
          let par = pars[i].split('=')
          if (par[0] === name) {
            return par[1]
          }
        }
      } catch (e) {
        console.log(href)
      }
    }
    return null
  },