资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/VUE es6技巧写法（持续更新中~~~）

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

y1chuan / 1503人阅读

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

</>复制代码 
  1. 一些稍微优雅的技巧写法，并不是非的是es6,标题党了哈
为class绑定多个值

普通写法

</>复制代码 
  1. :class="{a: true, b: true}"

其他

</>复制代码 
  1. :class="["btn", "btn2", {a: true, b: false}]"
一个值判断a或者判断b

普通写法

</>复制代码 
  1. if(flg === a || flg === b)

其他

</>复制代码 
  1. ["a","b"].indexOf(flg) > -1
  2. // 可以使用Array.prototype.includes() 返回 Boolean
  3. if(["a", "b"].includes(flg)) {}
引用一个组件

普通写法

</>复制代码 
  1. import a from "./a.vue"
  2. componets: {
  3.     a
  4. }

node写法

</>复制代码 
  1. components: {
  2.     a: require("./a.vue")
  3. }
V-FOR渲染

一般

</>复制代码 
  3.     {{item.uuid}} //输出uuid字段

解构赋值

</>复制代码 
  3.     {{uuid}} //直接解构赋值输出
CSS私有化

一般

</>复制代码 
  1. 设置比较长的class类名区分，或者使用BEN等命名方法

css module

</>复制代码

style样式会存在$style计算属性中

</>复制代码 
  1. //调用方式
  3. //$style是计算属性，所以也可以这样 bool为Bool表达式
</>复制代码 
  1. 缺点： 生成一个独一无二的class类名，只能使用类名class控制样式

scoped

</>复制代码 
</>复制代码 
  1. 生成Hash属性标识.且根元素受父组件的scoped影响
解决办法 
</>复制代码 
  1. 使用>>>深度选择器
</>复制代码 
  1. //寻找div下的样式，包括子组件样式
  2. div >>> .h3 { }
对象操作 
</>复制代码 
  1. 对象尽量静态化，一旦定义，就不得随意添加新的属性。如果添加属性不可避免，要使用Object.assign方法。
</>复制代码 
  1. // bad
  2. const a = {};
  3. a.x = 3;
  4. // if reshape unavoidable
  5. const a = {};
  6. Object.assign(a, { x: 3 });
  7. // good
  8. const a = { x: null };
  9. a.x = 3;
</>复制代码 
  1. 如果对象的属性名是动态的，可以在创造对象的时候，使用属性表达式定义。
</>复制代码 
  1. // bad
  2. const obj = {
  3.   id: 5,
  4.   name: "San Francisco",
  5. };
  6. obj[getKey("enabled")] = true;
  7. // good
  8. const obj = {
  9.   id: 5,
  10.   name: "San Francisco",
  11.   [getKey("enabled")]: true,  //属性表达式 6
  12. };
数组、对象参数使用扩展运算符(spread) 连接多个数组

一般

</>复制代码 
  1. let arr1 = [1,2,3]
  2. let arr2 = [4,6,7]
  3. arr2 =  arr2.concat(arr1)

spread 运算符

</>复制代码 
  1. let arr1 = [1,2,3]
  2. let arr2 = [...arr1,4,6,7]
连接多个json对象

一般

</>复制代码 
  1. var a = { key1: 1, key2: 2 }
  2. var b = Object.assign({}, a, { key3: 3 })
  3. // 最后结果
  4. {key1: 1, key2: 2,key3: 3 }

spread 运算符

</>复制代码 
  1. var a = { key1: 1, key2: 2 }
  2. var b = {...a, key3: 3}
es6剩余参数（rest paramete） 
</>复制代码 
  1. 使用reset paramete是纯粹的Array实例

一般

</>复制代码 
  1. function a() {
  2.     console.log(arguments)
  3. }
  4. a(1,2,3)

es6

</>复制代码 
  1. function a(...args) {
  2.     console.log(args)
  3. }
  4. a(1,2,3)
判断数组是否包含指定值 
</>复制代码 
  1. IE 任何系列都不支持

一般

需要自己写工具函数

es6

</>复制代码 
  1. var arr = [1,2,3]
  2. console.log(arr.includes(1)); // true
  3. console.log(arr.includes(4)); // false
顺序遍历对象key值 
</>复制代码 
  1. IE 任何系列都不支持

es6

</>复制代码 
  1. var obj = { key1: 1, key2: 2, key3: 3 }
  2. Object.keys(obj); // ["key1", "key2", "key3"]
顺序遍历对象value值 
</>复制代码 
  1. IE 任何系列都不支持

es6

</>复制代码 
  1. var obj = { key1: 1, key2: 2, key3: 3 }
  2. Object.values(obj); // [1,2,3]
一行书写多步操作

适用于只有两三行简单操作

旧

</>复制代码 
  1.    var x = 1;
  2.    var y = 1
  3.    var z = x + y;

使用逗号操作符

</>复制代码 
  1. var z = (x=1, y = 1, x+ y)
</>复制代码 
  1. 当你想要在期望一个表达式的位置包含多个表达式时，可以使用逗号操作符
GPU云服务器 云服务器 Vue开发技巧 php中16进制写法 vue中 vue 中使用 webrtc

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

转载请注明本文地址：https://www.ucloud.cn/yun/108843.html

相关文章

  • 优秀文章收藏（慢慢消化）持续更新~

    摘要：整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次，彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习 原文:https://www.ahwgs.cn/youxiuwenzhan...

    JeOam 评论0 收藏0

  • 有价值的前端技术点

    摘要：借着产品层面的功能和视觉升级，我们用对它进行了一次技术重构。前端优化是一个让人技术提升的，希望你也能从这里学到一些东西。年最流行的前端链接我们每周会给多名前端开发者发送新闻邮件。 面试 -- 网络 HTTP 现在面试门槛越来越高，很多开发者对于网络知识这块了解的不是很多，遇到这些面试题会手足无措。本篇文章知识主要集中在 HTTP 这块。文中知识来自 《图解 HTTP》与维基百科，若有错...

    microelec 评论0 收藏0

  • 前端资源系列（4）-前端学习资源分享&前端面试资源汇总

    摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

    princekin 评论0 收藏0

  • 当大多数人对Vue理解到炉火纯青的时候，是不是该思考一下怎么让vue页面骚气起来

    写在前面 当大多数人Vue理解的炉火纯青的时候，你应该思考怎么让vue页面骚气起来，下面就我个人在接触Vue两年的时间里，在实际工作中门户网站在前端页面交互应用和技巧，炒几道小菜给大家分享一哈，我把它封装成一个项目vue-portal-webUI（github源码），不敢说是UI，但也是各种常见常遇到的情景吧，看懂代码需要一些vue、axios、es6、scss基础、数据基本上是mock，功能和场...

    lingdududu 评论0 收藏0

  • js 中一些意想不到的使用技巧（持续更新，欢迎补充）

    摘要：中一些意想不到的使用技巧持续更新，欢迎补充箭头函数返回对象一般的写法简洁的写法对象属性名不确定，需要动态的传入一般的写法简洁的写法复制一个对象，并重写其中的一些属性一般的写法简洁的写法数组解构为函数参数一般的写法简洁的写法向一个数组添加另一 js 中一些意想不到的使用技巧（持续更新，欢迎补充） 1. 箭头函数 => 返回 map 对象 // 一般的写法 const makeMap = ...

    Ilikewhite 评论0 收藏0

发表评论

登陆后可评论

0条评论

y1chuan

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<