作者：johnYu

鏈接：https://juejin.im/post/6854573215969181703

前言?

作為深度代碼潔癖，我們都希望能寫出簡單高效的代碼，讓我們的代碼看起來更加優(yōu)雅，讓我們拋棄繁雜的代碼，一起開啟簡單的旅程~~

slots 新語法向 3.0 看齊

?

使用帶有“＃”的新命名插槽縮寫語法,在Vue 2.6.0+中可用?

?

舉個例子:

構(gòu)建插槽時，最好規(guī)劃一下布局。這就是我的文章布局。構(gòu)建插槽與構(gòu)建組件沒有什么不同。本質(zhì)上，插槽是具有超強(qiáng)功能的組件,讓我們細(xì)分一下上面的布局，組件的外觀如下：

<template>
  <article-layout>

    <template #articleHeader>
      <h1>I am the headerh1>
    template>

    <template #articleContent>
      <p>I am the contentp>
    template>

    <template #articleFooter>
      <footer>I am the footerfooter>
    template>

    <template #side>
      <aside>I am the side stuffaside>
    template>

    <template #banner>
      <div>I am the bannerdiv>
    template>

  article-layout>
<template>
復(fù)制代碼

動態(tài)指令參數(shù)

?

指令參數(shù)現(xiàn)在可以接受動態(tài)JavaScript表達(dá)式 動態(tài)參數(shù)值應(yīng)該是字符串，但允許null作為一個明確指示應(yīng)該刪除綁定的特殊值，那將會很方便。任何其他非字符串值都可能出錯，并會觸發(fā)警告。（僅適用于v-bind和v-on）

?

<div v-bind:[attr]="attributeName">div>
//簡寫
<div :[attr]="attributeName">div>
復(fù)制代碼

這里的?attributeName?會被作為一個JavaScript表達(dá)式進(jìn)行動態(tài)求值，求得的值將會作為最終的參數(shù)來使用。例如，如果你的 Vue 實(shí)例有一個 data 屬性?attributeName，其值為?href，那么這個綁定將等價于?v-bind:href

同樣地，你可以使用動態(tài)參數(shù)為一個動態(tài)的事件名綁定處理函數(shù)：

"handler">button>
//簡寫
<button @[eventName]="handler">button>
復(fù)制代碼

當(dāng)?eventName?的值為?focus?時，v-on:[eventName]?將等價于?v-on:focus。

同樣可以適用于插槽綁定:

<template v-slot:[slotName]>
Dynamic slot name
template>
my-component>
//簡寫
<foo>
<template #[name]>
Default slot
template>
foo>
復(fù)制代碼

動態(tài)參數(shù)預(yù)期會求出一個字符串，異常情況下值為 null。這個特殊的 null 值可以被顯性地用于移除綁定。任何其它非字符串類型的值都將會觸發(fā)一個警告。

<a v-bind:['foo' + bar]="value"> ... a>
復(fù)制代碼

變通的辦法是使用沒有空格或引號的表達(dá)式，或用計算屬性替代這種復(fù)雜表達(dá)式。

@hook那些事

處理組件內(nèi)定時器的步驟。通常我們一般都是這樣操作的：

感谢您访问我们的网站，您可能还对以下资源感兴趣：
国产秋霞理论久久久电影-婷婷色九月综合激情丁香-欧美在线观看乱妇视频-精品国avA久久久久久久-国产乱码精品一区二区三区亚洲人-欧美熟妇一区二区三区蜜桃视频