再读一次Vue官方文档带来的意外惊喜

前言

Vue目前算是我用的时间最长的一个框架了,但是最近总是在想,我真的了解Vue了吗,还是说,仅仅只是会用它而已了呢.
最开始用Vue的时候只是草草看了一遍文档,细节之处并未关心,以至于后面项目中遇到很多问题之后才又反复的去查文档,解决问题.
我认为,不应该是这样的,这种程度,仅仅只能让我有处理问题的能力,虽然经验让我再遇到问题的时候知道大概的导向,但这样永远不会建立起对Vue技术怀有的自信.
于是,我打算再来一遍官方文档,记录其中从未曾了解过的东西.在这之后,我便会去尝试着去读读Vue的源码,并分享出来.

动态参数

<a :[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。例如,如果你的 Vue 实例有一个 data 属性 attributeName,其值为 "href",那么这个绑定将等价于 v-bind:href

注意点:

  • attributeName 应该全部都是小写
  • attributeName 如果是通过表达式生成的,那应将其放在计算属性中,避免直接在HTML中书写表达式

动态class和style的几种写法

  • class
  1. <div v-bind:class="{ 'active': isActive, 'text-danger': hasError }"></div> // 对象语法

  2. <div v-bind:class="classObject"></div>// 对象语法

  3. <div v-bind:class="[{ 'active': isActive }, errorClass]"></div>// 数组语法 

     data: {
     isActive: true,
     hasError: false,
     classObject: {
       active: true,
       'text-danger': false
     },
     errorClass: 'text-danger'
     }
  • style
  1. <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>// 对象语法

  2. <div v-bind:style="styleObject"></div>// 对象语法

  3. <div v-bind:style="[styleObject, styleObject2]"></div>// 数组语法

  data: {
      activeColor: 'red',
    fontSize: 30,
      styleObject: {
      color: 'red',
      fontSize: '13px'
    },
      styleObject2: {
      color: 'blac',
      fontSize: '13px'
    }
  }

v-show

v-show 不支持 <template> 元素,也不支持 v-else

v-for

v-for遍历对象

    <div v-for="(value, name, index) in object">
      {{ index }}. {{ name }}: {{ value }}
    </div>

Vue无法检测的数据变动的情况

  • 数组

    1. 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
    2. 当你修改数组的长度时,例如:vm.items.length = newLength

解决办法:

    • 使用vm.$set() eg. vm.$set(vm.items, indexOfItem, newValue)
    • 为数组重新赋值新修改的数组
    • 对象

      1. 对象属性的添加
      2. 对象属性的删除

    解决办法:

    • 为对象初始一个空的将要添加的对象
    • 使用vm.$set() eg. vm.$set(vm.Obj, keyOfObj, newValue)
    • 使用Object.assign() eg. vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Green'})

    事件修饰符

    • .stop 阻止事件冒泡
    • .prevent 阻止浏览器默认行为发生
    • .capture 捕获冒泡,即有冒泡发生时,有该修饰符的dom元素会先执行,如果有多个,从外到内依次执行,然后再按自然顺序执行触发的事件
    • .self 将事件绑定到自身,只有自身才能触发,通常用于避免冒泡事件的影响
    • .once 设置事件只能触发一次,比如按钮的点击等
    • .passive 执行浏览器的默认行为
    【浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时,才能知道内部是否会调用preventDefault函数来阻止事件的默认行为,所以浏览器本身是没有办法对这种场景进行优化的。这种场景下,用户的手势事件无法快速产生,会导致页面无法快速执行滑动逻辑,从而让用户感觉到页面卡顿。】
    通俗点说就是每次事件产生,浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器,不用查询了,我们没用preventDefault阻止默认动作。
    这里一般用在滚动监听,@scoll,@touchmove 。因为滚动监听过程中,移动每个像素都会产生一次事件,每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过,可以大大提升滑动的流畅度

    键盘按键修饰符

    • .enter
    • .tab
    • .delete
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right

    鼠标按钮修饰符

    • .left
    • .right
    • .middle

    系统修饰键

    可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

    • .ctrl
    • .alt
    • .shift
    • .meta 对应command 键 (⌘)和Windows 徽标键 (⊞)
    • .exact
          <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
          <button @click.ctrl="onClick">A</button>
          
          <!-- 有且只有 Ctrl 被按下的时候才触发 -->
          <button @click.ctrl.exact="onCtrlClick">A</button>
          
          <!-- 没有任何系统修饰符被按下的时候才触发 -->
          <button @click.exact="onClick">A</button>

    v-model修饰符

    • .lazy 在“change”时而非“input”时更新
    • .number 自动将输入值转为number类型
    • .trim 自动过滤用户输入的首尾空白字符

    Vue全局导入基础组件的示例代码

    详述👉🏻chrisvfritz/vue-enterprise-boilerplate

        import ElTableColumnPro from './ElTableColumnPro.vue'
        
        ElTableColumnPro.install = function (Vue) {
            Vue.component(ElTableColumnPro.name, ElTableColumnPro)
        }
        
        if (window.Vue) {
            window.Vue.use(ElTableColumnPro)
        }
        export default ElTableColumnPro

    插槽

        <!-- 插槽模板 -->
        <div class="container">
          <header>
            <slot name="header"></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
            <slot name="footer"></slot>
          </footer>
        </div>
        <!-- 使用 -->
        <base-layout>
          <template v-slot:header>
            <h1>Here might be a page title</h1>
          </template>
        
          <template v-slot:default>
            <p>A paragraph for the main content.</p>
            <p>And another one.</p>
          </template>
        
          <template v-slot:footer>
            <p>Here's some contact info</p>
          </template>
        </base-layout>

    inheritAttrs , $attrs , $listeners

    总结一句话: $attrs存储非prop特性,inheritAttrs控制vue对非prop特性默认行为

    详述👉🏻Vue inheritAttrs, $attrs,$listeners 详解

    依赖注入 provide 和 inject

        // 父组件
        provide: function () {
          return {
            getMap: this.getMap
          }
        }
        // 父组件下的所有组件(子,孙,重孙...)
        inject: ['getMap']

    详述👉🏻Vue的组件通信之Provide与Inject机制

    程序化的事件侦听器

    (懵逼的定义--其实就是创建实例和清除实例放在一起,简化操作和无用的代码)

    • 通过 $on(eventName, eventHandler) 侦听一个事件
    • 通过 $once(eventName, eventHandler) 一次性侦听一个事件
    • 通过 $off(eventName, eventHandler) 停止侦听一个事件

    详述👉🏻vue 程序化的事件侦听器

    强制更新 $forceUpdate

    如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事。

    你可能还没有留意到数组和对象的变更检测注意事项,或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态。

    然而,如果你已经做到了上述的事项仍然发现在极少数的情况下需要手动强制更新,那么你可以通过 $forceUpdate 来做这件事。

    通过 v-once 创建低开销的静态组件

    渲染普通的 HTML 元素在 Vue 中是非常快速的,但有的时候你可能有一个组件,这个组件包含了大量静态内容。在这种情况下,你可以在根元素上添加 v-once 特性以确保这些内容只计算一次然后缓存起来,并不再更新. ( 正常情况下不会用到 )

    过渡 transition

    哪些组件/元素可以用?

    • 条件渲染 (使用 v-if)
    • 条件展示 (使用 v-show)
    • 动态组件
    • 组件根节点

    过渡类

    • v-enter:定义进入过渡的开始状态。
    • v-enter-active:定义进入过渡生效时的状态。
    • v-enter-to: 定义进入过渡的结束状态。
    • v-leave: 定义离开过渡的开始状态。
    • v-leave-active:定义离开过渡生效时的状态。
    • v-leave-to: 定义离开过渡的结束状态。

    对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 ,则 `v-` 是这些类名的默认前缀。如果你使用了 ,那么 v-enter 会替换为 my-transition-enter

    过渡模式

    • in-out:新元素先进行过渡,完成之后当前元素过渡离开。
    • out-in:当前元素先进行过渡,完成之后新元素过渡进入。
      <transition name="fade" mode="out-in"> <!-- ... the buttons ... --> </transition>

    自定义过渡类名

    • enter-class
    • enter-active-class
    • enter-to-class
    • leave-class
    • leave-active-class
    • leave-to-class
      <transition
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:after-enter="afterEnter"
        v-on:enter-cancelled="enterCancelled"
        v-on:before-leave="beforeLeave"
        v-on:leave="leave"
        v-on:after-leave="afterLeave"
        v-on:leave-cancelled="leaveCancelled"
      >
        <!-- ... -->
      </transition>

    渲染函数&JSX

    感觉好菜啊!读到这里发现读完之后没有什么GET到的点,做个记录,之后再返回来细细品一下.👉🏻link

    插件

    看到这里才发现新大陆👉🏻link, 以后要写一个自己的插件出来

    Over

    前前后后花了将近一周,终于将Vue的文档重新过了一遍, 确实, 收获还是蛮多的. 在平常项目开发中, 有许多的东西并不会真切的用到, 但是知识储备还是必须的. 这样在项目中遇到问题之后, 会有自己的一个思路, 从而可以更快的追溯到问题的根源. 继续努力!

    作者: Tomatoro
    博客: tomatoro.cn
    创作空间: tomatoro.space

    Image placeholder
    Totoro
    未设置
      17人点赞

    没有讨论,发表一下自己的看法吧

    推荐文章
    IEEE官方禁止华为参与期刊审稿,当全球最大技术学术机构向政治弯腰

    大数据文摘出品作者:魏子敏、宋欣仪5月29日,作为全球最大专业技术组织之一的IEEE(电气和电子工程师协会)被曝出,在发给会员的内部邮件中禁止华为员工作为旗下期刊杂志的编辑和审稿人。今天早晨,IEEE

    SQL Server 2014的数据库引擎新增功能(参考sqlserver官方文档)

    SQLServer2014数据库引擎引入了一些新功能和增强功能,这些功能可以提高设计、开发和维护数据存储系统的架构师、开发人员和管理员的能力和工作效率。  以下是 数据库引擎已增强的方面。数据库引擎功

    人工智能给陌陌直播带来的变革与挑战

    中国的人工智能产业相较国外起步较晚,但崛起迅速,尤其是人工智能上升为国家战略以来,更是吸引科技巨头以及众多垂直领域公司深耕不辍。在内容直播领域更是掀起一股强劲的浪潮,毫不夸张地说,AI技术已经成为了内

    未来已来,如何减少人工智能带来的风险?

    为了在新时代蓬勃发展,企业安全需要减少人工智能带来的风险,并充分利用它提供的机会。人工智能(AI)正在创造信息安全的新领域。能够独立学习、推理和行动的系统将越来越多地复制人类的行为。就像人类一样,他们

    智慧城市带来的网络威胁有哪些?

    如今,中国城市正在疾步向前拥抱智慧时代,我国是全球智慧城市建设最为积极的国家之一。近年来,智慧城市建设步入快车道时代!据不完全统计,中国智慧城市的发展数量已经超过500个,居世界之最。然而,智慧城市给

    数据库大牛李海翔详解全局读一致性技术

    作者简介:李海翔,网名“那海蓝蓝”,腾讯金融云数据库技术专家。中国人民大学信息学院工程硕士企业导师。著有《数据库事务处理的艺术:事务管理和并发访问控制》、《数据库查询优化器的艺术:原理解析与SQL性能

    RTSP-ONVIF协议安防视频监控流媒体服务解决方案EasyNVR在Windows重启时提示“进程意外终止”问题解析

    什么是ONVIFOpenNetworkVideoInterfaceForum,开放型网络视频接口论坛,以公开、开放的原则共同制定开放性行业标准。是一个提供开放网络视频接口的论坛组织。ONVIF规范描述

    vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

    英特尔第二代至强与傲腾,为企业IT带来了什么?

    在企业IT基础设施领域,英特尔第二代至强可扩展处理器与傲腾数据中心级持久内存名声在外,是英特尔以数据为中心的产品组合中的代表之作。于今年4月份发布的第二代英特尔至强可扩展处理器,以强大的平台能力,实现

    Java 14 可能带来什么新特性?

    JDK/Java13在一个月前已经发布,该版本带来了5大新特性,笔者观察到其中的TextBlocks(文本块)特性似乎被讨论最多。文本块特性与常见的Python“””anyinput”””特性一样,它

    大数据如何为影视产业带来颠覆性变化?

    电影制作是一个非常复杂的过程,从开始确定成本到制定有针对性的营销活动,涵盖多个流程。在这之中,数据科学几乎可以涉及到每一个步骤,带来创新的改变。而且从另一个角度上讲,从事数据科学工作的专业人员,也可以

    记一次 vue 的异步更新队列导致内存泄漏

    起因 由于项目是需要连续传输图片形成一个伪视频(没办法,客户钱给的不够)来观看。后端采用传输base64的图片到前端展示。 环境 php:7.2 workerman:3.X vue:2.X 过程 wo

    avue和vue是什么关系?

    Avue.js是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,

    Vue命令行工具vue-cli详解

    本文将详细介绍Vue命令行工具vue-cli。概述Vue-cli是Vue官方提供的用于初始化Vue项目的脚手架工具。使用Vue-cli有以下几大优势1、Vue-cli是一套成熟的vue项目架构设计,会

    vue1和vue2的区别是什么?

    vue1和vue2的区别模板v2每个组件只允许有一个根元素,v1允许一个组件有多个根元素生命周期函数vue1.0周期解释init组件刚刚被创建,但Data、method等属性还没被计算出来create

    vue 生成二维码插件 vue-qrcode

    链接地址生成二维码安装https://www.npmjs.com/package...npm install --save qrcode.vue在组件中引入 importQrcodeVuefrom

    vue源码解读(四)Vue中的异步更新策略

    欢迎star我的github仓库,共同学习~目前vue源码学习系列已经更新了6篇啦~https://github.com/yisha0307/...快速跳转: Vue的双向绑定原理(已完成) 说说vu

    腾讯7年老员工遭暴力裁员,官方回应:该员工工作成果不匹配岗位要求

    01腾讯回应暴力裁员近日,有自称腾讯7年老员工的网友发文称,人到中年,被腾讯暴力裁员。文中提到,2019年3月某天下午,腾讯HR派出大批保安单方面暴力裁员,让很多保安逼迫其收拾东西离开,当场封掉工卡等

    使用 Node.js 以来的感想与总结

    使用PHP时期 在使用php的时候,曾经用的最多的框架就是ThinkPHP,后来尝试体验过LaravelorYii,反正不管用啥框架,PHP的那一堆环境是必不可少,虽然现在有很多集成环境或各种各样的

    【总结】2019 从零开始入行 1年6 个月以来的感受和体验

    2019年已经随着寒潮的袭来进入了年尾。 去年年末的时候写了一篇2018年的总结,当时记录了我从零基础入行半年的一些感想和感受。当时收到了很多人的温暖的鼓励,在这里谢谢大家。因为工作业务上以及个人琐

    盘点 | 物联网未来的9大主要安全挑战

    物联网(IoT)是数字转型时代最热门的技术之一,其能够将一切都连接到互联网。它是智能家居、自动驾驶汽车、智能电表和智能城市背后的核心技术。但是物联网(IoT)的未来将面临九个主要的安全挑战。在过去的几

    “加班文化”到底是如何流行起来的

            说起互联网行业,大家最先想到的都是弹性工作制度,薪资诱人,夜宵福利,晚上报销打车费这些标签,但是作为一个扎根互联网行业的资深战士。我只想告诉大家,这些福利,都是在为互联网行业的陋习:“

    迟来的干货 | Kafka权限管理实战

    今年有很多小伙伴在公众号或者微信留言问能不能整一篇有关Kafka权限管理的文章,迫于工作关系,这个需求一直拖后。后来知道我的好友兼Kafka高玩——【一岁小宝】他一直在弄这一块的东西,所以我就厚着fa

    为什么SQL正在击败NoSQL,这对未来的数据意味着什么

    导读:经过多年的沉寂之后,今天的SQL正在复出。缘由如何?这对数据社区有什么影响?看看本文的分析。以下为译文。自从可以利用计算机做事以来,我们一直在收集的数据以指数级的速度在增长,因此对于数据存储、处

    被前端业务倒逼出来的中台?

    数字化智能时代,数据成为了新的生产资料,也是蕴含丰富价值的矿藏。随之而来的打破数据孤岛、拆掉部门墙的声音越来越高。2019年中台热席卷圈内,企业、投资者、媒体众说纷纭,百度搜索指数也是应声而涨。有人认