VUE es6技巧写法（持续更新中~~~）

y1chuan 发布于2019-08-26 13:27 / 1267人阅读

摘要：如果添加属性不可避免，要使用方法。如果对象的属性名是动态的，可以在创造对象的时候，使用属性表达式定义。

一些稍微优雅的技巧写法，并不是非的是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)

当你想要在期望一个表达式的位置包含多个表达式时，可以使用逗号操作符

混合云云服务器 Vue开发技巧 php中16进制写法 vue中 vue 中使用 webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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