Vue实践问题知识点记录

皮皮陈Q

已于 2022-07-21 10:19:35 修改

阅读量287

点赞数

分类专栏：前端vue 文章标签： vue.js javascript ecmascript

于 2022-07-21 09:59:40 首次发布

本文链接：https://blog.csdn.net/weixin_48310754/article/details/125765064

版权

前端vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue学习知识点记录

事件参数

HTML
<div @click="showInfo"></div>
<div @click="showInfo(a)"></div>
<div @click="showInfo(a,$event)"></div>
未传参
事件函数(event)
event.target//拿到触发事件的元素
传参
传参之后不写$event 无法得到event事件

ref属性

ref被用来给元素或子组件注册应用信息（id的代替者）
应用在`html`标签上获取的真实DOM元素，应用在组件上获取的是组件实例对象`vc`
获取：this.$refs.xxx

实现Vue双向数据绑定

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" v-mode="msg" />
    <p v-mode="msg"></p>
    <script>
      const data = {
        msg: "你好",
      };
      const input = document.querySelector("input");
      const p = document.querySelector("p");
      input.value = data.msg;
      p.innerHTML = data.msg;
      //视图变数据跟着变
      input.addEventListener("input", function () {
        data.msg = input.value;
      });
      //数据变视图变
      let temp = data.msg;
      Object.defineProperty(data, "msg", {
        get() {
          return temp;
        },
        set(value) {
          temp = value;
          //视图修改
          input.value = temp;
          p.innerHTML = temp;
        },
      });
      data.msg = "小李";
    </script>
  </body>
</html>

计算属性

写在computed对象中的属性，本质上是一个方法，不过使用时依旧当属性来使用
对于任何复杂逻辑其计算结果需要被缓存的你都应当使用计算属性（在处理数据的时候）

<script type="text/javascript">

    const vm = new Vue({
        el: '#root',
        data: {
            firstName: '懒',
            lastName: '洋洋'
        },
        computed:{
            fullName:{
               get(){
                   return this.firstName +'-'+  this.lastName
               },
               set(value){
               }
            }
        }
    })
</script>

自定义指令

<li v-green v-yun v-bgcolor="'blue'">曾凯</li>

  directives: {
    bgcolor(el, bindings) {
      console.log(arguments)
      el.style.background = bindings.value
  },

过滤器

过滤器: 本质是个函数, 可以转换{{}}中的值

 filters: {
    max(value, n) {
      return Math.max(value, n)
    },
    //返回较大的值

插槽`slot`

  ##组件MySlot
  <div class="my-slot">
    <div id="header">
      <!-- 插槽占位符组件: 会在后期被替换掉 -->
      <!-- 默认占位符: 会替换成组件使用时双标签中的内容 -->
      <slot />
    </div>
    <!-- 命名占位符 -->
    <div id="main">
      <div id="left"><slot name="left" /></div>
      <div id="right"><slot name="right" /></div>
    </div>
    <div id="footer"><slot name="footer" /></div>
  </div>
  ##使用
<template>
  <div>
    <!-- 特殊的组件功能 : 插槽 -->
    <!-- 一个用来做布局的组件, 只负责布局 不负责具体内容 -->

    <!-- 双标签写法, 其内容会替换掉组件中的占位符 <slot/> -->
    <my-slot>
      <a href="">百度一下</a>
      <a href="">京东</a>
      <a href="">斗鱼</a>

      <!-- 向命名占位符中放东西: 从vue1 到 vue2 有3种语法, 都在使用 -->
      <h1 slot="left">来自vue1的语法</h1>

      <!-- vue2语法: 要求必须用一个 template 标签包围 -->
      <!-- 此标签是一个虚拟的容器, 不影响css布局 -->
      <template v-slot:right>
        <h1>晕晕晕晕晕</h1>
        <h1>这是vue2的语法</h1>
      </template>

      <!-- vue2语法的 语法糖 -->
      <template #footer>
        <h1>这是vue2的语法糖</h1>
      </template>
    </my-slot>
    <!-- 插槽: 通过用于封装组件, 例如以后你们学习的 elementUI -->
  </div>
</template>

`watch`监听

#page,sn为变量
 props: ['title', 'sn'],
  data() {
    return {
      data: null,
      page: 1, //当前页
    }
  },
  ##
  watch: {
    page() {
      this.getData()
    },
    // 格式  要监听的属性: function(新值, 旧值){}
    sn(to, from) {
      console.log('sn的新值:', to)
      console.log('sn的旧值:', from)
      //变化时, 就再次触发网络请求 获取新的数据
      this.getData()
      // 当切换时, 把页数改为1
      this.page = 1
    },
  },

Vue生命周期

Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。
1、beforeCreate（创建前） ：数据观测和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能访问到data、computed、watch、methods上的方法和数据。
2、created（创建后） ：实例创建完成，实例上配置的 options 包括 data、computed、watch、methods 等都配置完成，但是此时渲染得节点还未挂载到 DOM，所以不能访问到 `$el` 属性。
3、beforeMount（挂载前） ：在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。此时还没有挂载html到页面上。
4、mounted（挂载后） ：在el被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html 页面中。此过程中进行ajax交互。
5、beforeUpdate（更新前） ：响应式数据更新时调用，此时虽然响应式数据更新了，但是对应的真实 DOM 还没有被渲染。
6、updated（更新后）：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时，组件 DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
7、beforeDestroy（销毁前） ：实例销毁之前调用。这一步，实例仍然完全可用，`this` 仍能获取到实例。
8、destroyed（销毁后） ：实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。
另外还有 `keep-alive` 独有的生命周期，分别为 `activated` 和 `deactivated` 。用 `keep-alive` 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 `deactivated` 钩子函数，命中缓存渲染后会执行 `activated` 钩子函数。