VUE es6技巧寫法（持續更新中~~~）

y1chuan 發布于2019-08-26 13:27 / 1414人閱讀

摘要：如果添加屬性不可避免，要使用方法。如果對象的屬性名是動態的，可以在創造對象的時候，使用屬性表達式定義。

一些稍微優雅的技巧寫法，并不是非的是es6,標題黨了哈

為class綁定多個值

普通寫法

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

其他

:class="["btn", "btn2", {a: true, b: false}]"

一個值判斷a或者判斷b

普通寫法

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

其他

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

引用一個組件

普通寫法

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

node寫法

components: {
    a: require("./a.vue")
}

V-FOR渲染

一般


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

解構賦值


    {{uuid}} //直接解構賦值輸出

CSS私有化

一般

設置比較長的class類名區分，或者使用BEN等命名方法

css module

style樣式會存在$style計算屬性中

//調用方式

//$style是計算屬性，所以也可以這樣 bool為Bool表達式

缺點： 生成一個獨一無二的class類名，只能使用類名class控制樣式

scoped

生成Hash屬性標識.且根元素受父組件的scoped影響

解決辦法

使用>>>深度選擇器

//尋找div下的樣式，包括子組件樣式
div >>> .h3 { }

對象操作

對象盡量靜態化，一旦定義，就不得隨意添加新的屬性。如果添加屬性不可避免，要使用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;

如果對象的屬性名是動態的，可以在創造對象的時候，使用屬性表達式定義。

// bad
const obj = {
  id: 5,
  name: "San Francisco",
};
obj[getKey("enabled")] = true;

// good
const obj = {
  id: 5,
  name: "San Francisco",
  [getKey("enabled")]: true,  //屬性表達式 6
};

數組、對象參數使用擴展運算符(spread) 連接多個數組

一般

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

spread 運算符

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

連接多個json對象

一般

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

spread 運算符

var a = { key1: 1, key2: 2 }
var b = {...a, key3: 3}

es6剩余參數（rest paramete）

使用reset paramete是純粹的Array實例

一般

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

es6

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

判斷數組是否包含指定值

IE 任何系列都不支持

一般

需要自己寫工具函數

es6

var arr = [1,2,3]
console.log(arr.includes(1)); // true
console.log(arr.includes(4)); // false

順序遍歷對象key值

IE 任何系列都不支持

es6

var obj = { key1: 1, key2: 2, key3: 3 }
Object.keys(obj); // ["key1", "key2", "key3"]

順序遍歷對象value值

IE 任何系列都不支持

es6

var obj = { key1: 1, key2: 2, key3: 3 }
Object.values(obj); // [1,2,3]

一行書寫多步操作

適用于只有兩三行簡單操作

舊

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

使用逗號操作符

var z = (x=1, y = 1, x+ y)

當你想要在期望一個表達式的位置包含多個表達式時，可以使用逗號操作符

GPU云服務器云服務器 Vue開發技巧 php中16進制寫法 vue中 vue 中使用 webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108843.html

優秀文章收藏（慢慢消化）持續更新~

摘要：整理收藏一些優秀的文章及大佬博客留著慢慢學習原文協作規范中文技術文檔協作規范阮一峰編程風格凹凸實驗室前端代碼規范風格指南這一次，徹底弄懂執行機制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環有何區別筆試題事件循環機制異步編程理解的異步 better-learning 整理收藏一些優秀的文章及大佬博客留著慢慢學習原文:https://www.ahwgs.cn/youxiuwenzhan...

JeOam 2019-08-23 18:24 評論0 收藏0
有價值的前端技術點

摘要：借著產品層面的功能和視覺升級，我們用對它進行了一次技術重構。前端優化是一個讓人技術提升的，希望你也能從這里學到一些東西。年最流行的前端鏈接我們每周會給多名前端開發者發送新聞郵件。面試 -- 網絡 HTTP 現在面試門檻越來越高，很多開發者對于網絡知識這塊了解的不是很多，遇到這些面試題會手足無措。本篇文章知識主要集中在 HTTP 這塊。文中知識來自《圖解 HTTP》與維基百科，若有錯...

microelec 2019-08-26 11:32 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
當大多數人對Vue理解到爐火純青的時候，是不是該思考一下怎么讓vue頁面騷氣起來

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

lingdududu 2019-08-26 12:12 評論0 收藏0
js 中一些意想不到的使用技巧（持續更新，歡迎補充）

摘要：中一些意想不到的使用技巧持續更新，歡迎補充箭頭函數返回對象一般的寫法簡潔的寫法對象屬性名不確定，需要動態的傳入一般的寫法簡潔的寫法復制一個對象，并重寫其中的一些屬性一般的寫法簡潔的寫法數組解構為函數參數一般的寫法簡潔的寫法向一個數組添加另一 js 中一些意想不到的使用技巧（持續更新，歡迎補充） 1. 箭頭函數 => 返回 map 對象 // 一般的寫法 const makeMap = ...

Ilikewhite 2019-08-23 11:29 評論0 收藏0