国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

VUE es6技巧寫(xiě)法（持續(xù)更新中~~~）

y1chuan / 1405人閱讀

摘要：如果添加屬性不可避免，要使用方法。如果對(duì)象的屬性名是動(dòng)態(tài)的，可以在創(chuàng)造對(duì)象的時(shí)候，使用屬性表達(dá)式定義。

一些稍微優(yōu)雅的技巧寫(xiě)法，并不是非的是es6,標(biāo)題黨了哈
為class綁定多個(gè)值

普通寫(xiě)法

:class="{a: true, b: true}"

其他

:class="["btn", "btn2", {a: true, b: false}]"
一個(gè)值判斷a或者判斷b

普通寫(xiě)法

if(flg === a || flg === b)

其他

["a","b"].indexOf(flg) > -1
// 可以使用Array.prototype.includes() 返回 Boolean
if(["a", "b"].includes(flg)) {}
引用一個(gè)組件

普通寫(xiě)法

import a from "./a.vue"
componets: {
    a
}

node寫(xiě)法

components: {
    a: require("./a.vue")
}
V-FOR渲染

一般

  • 
    {{item.uuid}} //輸出uuid字段

    • 解構(gòu)賦值

  • 
    {{uuid}} //直接解構(gòu)賦值輸出
    • CSS私有化

    一般

    設(shè)置比較長(zhǎng)的class類(lèi)名區(qū)分，或者使用BEN等命名方法

    css module

    style樣式會(huì)存在$style計(jì)算屬性中

    //調(diào)用方式

    
//$style是計(jì)算屬性，所以也可以這樣 bool為Bool表達(dá)式

    缺點(diǎn)： 生成一個(gè)獨(dú)一無(wú)二的class類(lèi)名，只能使用類(lèi)名class控制樣式

    scoped

    生成Hash屬性標(biāo)識(shí).且根元素受父組件的scoped影響
    解決辦法 
    使用>>>深度選擇器
    //尋找div下的樣式，包括子組件樣式
div >>> .h3 { }
    對(duì)象操作 
    對(duì)象盡量靜態(tài)化，一旦定義，就不得隨意添加新的屬性。如果添加屬性不可避免，要使用Object.assign方法。
    // bad
const a = {};
a.x = 3;

// if reshape unavoidable
const a = {};
Object.assign(a, { x: 3 });

// good
const a = { x: null };
a.x = 3;
    如果對(duì)象的屬性名是動(dòng)態(tài)的，可以在創(chuàng)造對(duì)象的時(shí)候，使用屬性表達(dá)式定義。
    // bad
const obj = {
  id: 5,
  name: "San Francisco",
};
obj[getKey("enabled")] = true;

// good
const obj = {
  id: 5,
  name: "San Francisco",
  [getKey("enabled")]: true,  //屬性表達(dá)式 6
};
    數(shù)組、對(duì)象參數(shù)使用擴(kuò)展運(yùn)算符(spread) 連接多個(gè)數(shù)組

    一般

    let arr1 = [1,2,3]
let arr2 = [4,6,7]
arr2 =  arr2.concat(arr1)

    spread 運(yùn)算符

    let arr1 = [1,2,3]
let arr2 = [...arr1,4,6,7]
    連接多個(gè)json對(duì)象

    一般

    var a = { key1: 1, key2: 2 }
var b = Object.assign({}, a, { key3: 3 })
// 最后結(jié)果
{key1: 1, key2: 2,key3: 3 }

    spread 運(yùn)算符

    var a = { key1: 1, key2: 2 }
var b = {...a, key3: 3}
    es6剩余參數(shù)（rest paramete） 
    使用reset paramete是純粹的Array實(shí)例

    一般

    function a() {
    console.log(arguments)
}
a(1,2,3)

    es6

    function a(...args) {
    console.log(args)
}
a(1,2,3)
    判斷數(shù)組是否包含指定值 
    IE 任何系列都不支持

    一般

    需要自己寫(xiě)工具函數(shù)

    es6

    var arr = [1,2,3]
console.log(arr.includes(1)); // true
console.log(arr.includes(4)); // false
    順序遍歷對(duì)象key值 
    IE 任何系列都不支持

    es6

    var obj = { key1: 1, key2: 2, key3: 3 }
Object.keys(obj); // ["key1", "key2", "key3"]
    順序遍歷對(duì)象value值 
    IE 任何系列都不支持

    es6

    var obj = { key1: 1, key2: 2, key3: 3 }
Object.values(obj); // [1,2,3]
    一行書(shū)寫(xiě)多步操作

    適用于只有兩三行簡(jiǎn)單操作

    舊

       var x = 1;
   var y = 1
   var z = x + y;

    使用逗號(hào)操作符

    var z = (x=1, y = 1, x+ y)
    當(dāng)你想要在期望一個(gè)表達(dá)式的位置包含多個(gè)表達(dá)式時(shí)，可以使用逗號(hào)操作符

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/108843.html

    相關(guān)文章

    • 優(yōu)秀文章收藏（慢慢消化）持續(xù)更新~

      摘要：整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí)原文協(xié)作規(guī)范中文技術(shù)文檔協(xié)作規(guī)范阮一峰編程風(fēng)格凹凸實(shí)驗(yàn)室前端代碼規(guī)范風(fēng)格指南這一次，徹底弄懂執(zhí)行機(jī)制一次弄懂徹底解決此類(lèi)面試問(wèn)題瀏覽器與的事件循環(huán)有何區(qū)別筆試題事件循環(huán)機(jī)制異步編程理解的異步 better-learning 整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí) 原文:https://www.ahwgs.cn/youxiuwenzhan...

      JeOam 評(píng)論0 收藏0

    • 有價(jià)值的前端技術(shù)點(diǎn)

      摘要：借著產(chǎn)品層面的功能和視覺(jué)升級(jí)，我們用對(duì)它進(jìn)行了一次技術(shù)重構(gòu)。前端優(yōu)化是一個(gè)讓人技術(shù)提升的，希望你也能從這里學(xué)到一些東西。年最流行的前端鏈接我們每周會(huì)給多名前端開(kāi)發(fā)者發(fā)送新聞郵件。 面試 -- 網(wǎng)絡(luò) HTTP 現(xiàn)在面試門(mén)檻越來(lái)越高，很多開(kāi)發(fā)者對(duì)于網(wǎng)絡(luò)知識(shí)這塊了解的不是很多，遇到這些面試題會(huì)手足無(wú)措。本篇文章知識(shí)主要集中在 HTTP 這塊。文中知識(shí)來(lái)自 《圖解 HTTP》與維基百科，若有錯(cuò)...

      microelec 評(píng)論0 收藏0

    • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

      摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒(méi)想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

      princekin 評(píng)論0 收藏0

    • 當(dāng)大多數(shù)人對(duì)Vue理解到爐火純青的時(shí)候，是不是該思考一下怎么讓vue頁(yè)面騷氣起來(lái)

      寫(xiě)在前面 當(dāng)大多數(shù)人Vue理解的爐火純青的時(shí)候，你應(yīng)該思考怎么讓vue頁(yè)面騷氣起來(lái)，下面就我個(gè)人在接觸Vue兩年的時(shí)間里，在實(shí)際工作中門(mén)戶(hù)網(wǎng)站在前端頁(yè)面交互應(yīng)用和技巧，炒幾道小菜給大家分享一哈，我把它封裝成一個(gè)項(xiàng)目vue-portal-webUI（github源碼），不敢說(shuō)是UI，但也是各種常見(jiàn)常遇到的情景吧，看懂代碼需要一些vue、axios、es6、scss基礎(chǔ)、數(shù)據(jù)基本上是mock，功能和場(chǎng)...

      lingdududu 評(píng)論0 收藏0

    • js 中一些意想不到的使用技巧（持續(xù)更新，歡迎補(bǔ)充）

      摘要：中一些意想不到的使用技巧持續(xù)更新，歡迎補(bǔ)充箭頭函數(shù)返回對(duì)象一般的寫(xiě)法簡(jiǎn)潔的寫(xiě)法對(duì)象屬性名不確定，需要?jiǎng)討B(tài)的傳入一般的寫(xiě)法簡(jiǎn)潔的寫(xiě)法復(fù)制一個(gè)對(duì)象，并重寫(xiě)其中的一些屬性一般的寫(xiě)法簡(jiǎn)潔的寫(xiě)法數(shù)組解構(gòu)為函數(shù)參數(shù)一般的寫(xiě)法簡(jiǎn)潔的寫(xiě)法向一個(gè)數(shù)組添加另一 js 中一些意想不到的使用技巧（持續(xù)更新，歡迎補(bǔ)充） 1. 箭頭函數(shù) => 返回 map 對(duì)象 // 一般的寫(xiě)法 const makeMap = ...

      Ilikewhite 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <