玩转代码|分享一些实用的Vue 前端代码（二）

news/2024/11/27 22:36:48/

目录

​编辑

二、代码规范

2.1 Vue

2.1.1 代码结构

2.1.2 data

2.1.3 prop

2.1.4 computed

2.1.5 为 v-for 设置键值

2.1.6 v-if 和 v-for 互斥

2.1.7 多个 attribute 的元素

2.1.8 模板中简单的表达式

2.1.9 带引号的 attribute 值

2.1.10 指令缩写

2.2 HTML

2.2.1 文件模板

2.2.2 元素及标签闭合

2.2.3 代码嵌套

2.3 CSS

2.3.1 样式文件

2.3.2 代码格式化

2.3.3 代码大小写

2.3.4 代码易读性

2.3.5 属性值引号

2.3.6 属性书写建议

3.3.7 CSS3 浏览器私有前缀

2.4 JavaScript

2.4.1 单行代码块

2.4.2 大括号风格

2.4.3 代码中的空格

二、代码规范

2.1 Vue

2.1.1 代码结构

<template><div id="my-component"><DemoComponent /></div>
</template><script>
import DemoComponent from '../components/DemoComponent'export default {name: 'MyComponent',components: {DemoComponent},mixins: [],props: {},data () {return {}},computed: {},watch: {}created () {},mounted () {},destroyed () {},methods: {},
}
</script><style lang="scss" scoped>
#my-component {
}
</style>

2.1.2 data

组件的 data 必须是一个函数。

// In a .vue file
export default {data () {return {foo: 'bar'}}
}

2.1.3 prop

Prop 定义应该尽量详细。

export default {props: {status: {type: String,required: true,validator: function (value) {return ['syncing', 'synced','version-conflict','error'].indexOf(value) !== -1}}}
}

2.1.4 computed

应该把复杂计算属性分割为尽可能多的更简单的属性。 小的、专注的计算属性减少了信息使用时的假设性限制，所以需求变更时也用不着那么多重构了。

// bad
computed: { price: function () { var basePrice = this.manufactureCost / (1 - this.profitMargin) return ( basePrice - basePrice * (this.discountPercent || 0) ) } 
}// good
computed: {basePrice: function () {return this.manufactureCost / (1 - this.profitMargin)},discount: function () {return this.basePrice * (this.discountPercent || 0)},finalPrice: function () {return this.basePrice - this.discount}
}

2.1.5 为 v-for 设置键值

在组件上必须用 key 搭配 v-for，以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为，比如动画中的对象固化 (object constancy)。

<ul><liv-for="todo in todos":key="todo.id">{{ todo.text }}</li>
</ul>
 

2.1.6 v-if 和 v-for 互斥
 

永远不要把 v-if 和 v-for 同时用在同一个元素上。
 

<!-- bad：控制台报错 -->
<ul><liv-for="user in users"v-if="shouldShowUsers":key="user.id">{{ user.name }}</li>
</ul>
 

一般我们在两种常见的情况下会倾向于这样做：
 

  • 为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。
 

computed: {activeUsers: function () {return this.users.filter((user) => {return user.isActive})}
}
 

<ul><liv-for="user in activeUsers":key="user.id">{{ user.name }}</li>
</ul>
 

  • 为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul, ol)。 
    <!-- bad -->
<ul><liv-for="user in users"v-if="shouldShowUsers":key="user.id">{{ user.name }}</li>
</ul><!-- good -->
<ul v-if="shouldShowUsers"><liv-for="user in users":key="user.id">{{ user.name }}</li>
</ul>
     
     
 

2.1.7 多个 attribute 的元素
 

多个 attribute 的元素应该分多行撰写，每个 attribute 一行。
 

<!-- bad -->
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<MyComponent foo="a" bar="b" baz="c"/>

<!-- good -->
<imgsrc="https://vuejs.org/images/logo.png"alt="Vue Logo"><MyComponentfoo="a"bar="b"baz="c"/>

 

2.1.8 模板中简单的表达式
 

组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
 

复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。
 

// bad
{{fullName.split(' ').map((word) => {return word[0].toUpperCase() + word.slice(1)}).join(' ')
}}

 

更好的做法：
 

<!-- 在模板中 -->
{{ normalizedFullName }}

// 复杂表达式已经移入一个计算属性
computed: {normalizedFullName: function () {return this.fullName.split(' ').map(function (word) {return word[0].toUpperCase() + word.slice(1)}).join(' ')}
}

 

2.1.9 带引号的 attribute 值
 

非空 HTML 特性值应该始终带双引号。
 

<!-- bad -->
<input type=text>
<AppSidebar :style={width:sidebarWidth+'px'}>

 

<!-- good -->
<input type="text">
<AppSidebar :style="{ width: sidebarWidth + 'px' }">

 

2.1.10 指令缩写
 

  • 用 : 表示 v-bind:
  • 用 @ 表示 v-on:
  • 用 # 表示 v-slot:
 

<input:value="newTodoText":placeholder="newTodoInstructions"><input@input="onInput"@focus="onFocus"><template #header><h1>Here might be a page title</h1>
</template><template #footer><p>Here's some contact info</p>
</template>
 

2.2 HTML
 

2.2.1 文件模板
 

HTML5 文件模板：
 

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>HTML5标准模版</title></head><body></body>
</html>
 

移动端：
 

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"><meta name="format-detection" content="telephone=no"><title>移动端HTML模版</title><!-- S DNS预解析 --><link rel="dns-prefetch" href=""><!-- E DNS预解析 --><!-- S 线上样式页面片，开发请直接取消注释引用 --><!-- #include virtual="" --><!-- E 线上样式页面片 --><!-- S 本地调试，根据开发模式选择调试方式，请开发删除 --><link rel="stylesheet" href="css/index.css"><!-- /本地调试方式 --><link rel="stylesheet" href="http://srcPath/index.css"><!-- /开发机调试方式 --><!-- E 本地调试 --></head>
<body>
</body>
</html>
 

 

PC 端：
 

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="keywords" content="your keywords"><meta name="description" content="your description"><meta name="author" content="author,email address"><meta name="robots" content="index,follow"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><meta name="renderer" content="ie-stand"><title>PC端HTML模版</title><!-- S DNS预解析 --><link rel="dns-prefetch" href=""><!-- E DNS预解析 --><!-- S 线上样式页面片，开发请直接取消注释引用 --><!-- #include virtual="" --><!-- E 线上样式页面片 --><!-- S 本地调试，根据开发模式选择调试方式，请开发删除 --><link rel="stylesheet" href="css/index.css"><!-- /本地调试方式 --><link rel="stylesheet" href="http://srcPath/index.css"><!-- /开发机调试方式 --><!-- E 本地调试 -->
</head>
<body>
</body>
</html>
 

 

2.2.2 元素及标签闭合
 

HTML 元素共有以下5种：
 

  • 空元素：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
  • 原始文本元素：script、style
  • RCDATA 元素：textarea、title
  • 外来元素：来自 MathML 命名空间和 SVG 命名空间的元素
  • 常规元素：其他 HTML 允许的元素都称为常规元素
 

为了能让浏览器更好的解析代码以及能让代码具有更好的可读性，有如下约定：
 

  • 所有具有开始标签和结束标签的元素都要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上。
  • 空元素标签都不加 “/” 字符。 
    <!-- good -->
<div><h1>我是h1标题</h1><p>我是一段文字，我有始有终，浏览器能正确解析</p>
</div><br data-tomark-pass><!-- bad -->
<div><h1>我是h1标题</h1><p>我是一段文字，我有始无终，浏览器亦能正确解析
</div><br/>
     
     
 

2.2.3 代码嵌套
 

元素嵌套规范，每个块状元素独立一行，内联元素可选。
 

<!-- good -->
<div><h1></h1><p></p>
</div>	
<p><span></span><span></span></p><!-- bad -->
<div><h1></h1><p></p>
</div>	
<p> <span></span><span></span>
</p>

 

段落元素与标题元素只能嵌套内联元素。
 

<!-- good -->
<h1><span></span></h1>
<p><span></span><span></span></p><!-- bad -->
<h1><div></div></h1>
<p><div></div><div></div></p>

 

2.3 CSS
 

2.3.1 样式文件
 

样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “UTF-8”。
 

  • 推荐：
 

@charset "UTF-8";
.jdc {}

 

  • 不推荐：
 

/* @charset规则不在文件首行首个字符开始 */
@charset "UTF-8";
.jdc {}/* @charset规则没有用小写 */
@CHARSET "UTF-8";
.jdc {}/* 无@charset规则 */
.jdc {}

 

2.3.2 代码格式化
 

样式书写一般有两种：一种是紧凑格式 （Compact），一种是展开格式（Expanded）。
 

  • 推荐：展开格式（Expanded）
 

.jdc {display: block;width: 50px;
}

 

  • 不推荐：紧凑格式 （Compact）
 

.jdc { display: block; width: 50px;}

 

2.3.3 代码大小写
 

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。
 

  • 推荐：
 

.jdc {display: block;
}

 

  • 不推荐：
 

.JDC {DISPLAY: BLOCK;
}

 

2.3.4 代码易读性
 

  1. 左括号与类名之间一个空格，冒号与属性值之间一个空格。
 

  • 推荐：
 

.jdc {width: 100%;
}

 

  • 不推荐：
 

.jdc{width:100%;
}

 

  1. 逗号分隔的取值，逗号之后一个空格。
 

  • 推荐：
 

.jdc {box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

 

  • 不推荐：
 

.jdc {box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

 

  1. 为单个 CSS 选择器或新声明开启新行。
 

  • 推荐：
 

.jdc, .jdc_logo, .jdc_hd {color: #ff0;
}.nav{color: #fff;
}

 

  • 不推荐：
 

.jdc, .jdc_logo, .jdc_hd {color: #ff0;
}.nav{color: #fff;
}

 

  1. 颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要带有不必要的 0。
 

  • 推荐：
 

.jdc {color: rgba(255,255,255,.5);
}

 

  • 不推荐：
 

.jdc {color: rgba( 255, 255, 255, 0.5 );
}

 

  1. 属性值十六进制数值能用简写的尽量用简写。
 

  • 推荐：
 

.jdc {color: #fff;
}

 

  • 不推荐：
 

.jdc {color: #ffffff;
}

 

  1. 不要为 0 指明单位。
 

  • 推荐：
 

.jdc {margin: 0 10px;
}

 

  • 不推荐：
 

.jdc {margin: 0px 10px;
}

 

2.3.5 属性值引号
 

CSS 属性值需要用到引号时，统一使用单引号。
 

  • 推荐：
 

.jdc {font-family: 'Hiragino Sans GB';
}

 

  • 不推荐：
 

.jdc {font-family: "Hiragino Sans GB";
}

 

2.3.6 属性书写建议
 

建议遵循以下顺序：
 

  1. 布局定位属性：display / position / float / clear / visibility / overflow
  2. 自身属性：width / height / margin / padding / border / background
  3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
  4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background: linear-gradient …
 

.jdc {display: block;position: relative;float: left;width: 100px;height: 100px;margin: 0 10px;padding: 20px 0;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;color: #333;background: rgba(0,0,0,.5);-webkit-border-radius: 10px;-moz-border-radius: 10px;-o-border-radius: 10px;-ms-border-radius: 10px;border-radius: 10px;
}

 

3.3.7 CSS3 浏览器私有前缀
 

CSS3 浏览器私有前缀在前，标准前缀在后。
 

.jdc {-webkit-border-radius: 10px;-moz-border-radius: 10px;-o-border-radius: 10px;-ms-border-radius: 10px;border-radius: 10px;
}

 

2.4 JavaScript
 

2.4.1 单行代码块
 

在单行代码块中使用空格。
 

  • 不推荐：
 

function foo () {return true}
if (foo) {bar = 0}

 

  • 推荐：
 

function foo () { return true }
if (foo) { bar = 0 }

 

2.4.2 大括号风格
 

在编程过程中，大括号风格与缩进风格紧密联系，用来描述大括号相对代码块位置的方法有很多。在 JavaScript 中，主要有三种风格，如下：
 

  • 【推荐】One True Brace Style
 

if (foo) {bar()
} else {baz()
}

 

  • Stroustrup
 

if (foo) {bar()
}
else {baz()
}

 

  • Allman
 

if (foo)
{bar()
}
else
{baz()
}

 

2.4.3 代码中的空格
 

  1. 逗号前后的空格可以提高代码的可读性，团队约定在逗号后面使用空格，逗号前面不加空格。
 

  • 推荐：
 

var foo = 1, bar = 2

 

  • 不推荐：
 

var foo = 1,bar = 2var foo = 1 , bar = 2var foo = 1 ,bar = 2

 

  1. 对象字面量的键和值之间不能存在空格，且要求对象字面量的冒号和值之间存在一个空格。
 

  • 推荐：
 

var obj = { 'foo': 'haha' }

 

  • 不推荐：
 

var obj = { 'foo' : 'haha' }

 

  1. 代码块前要添加空格。
 

  • 推荐：
 

if (a) {b()
}function a () {}

 

  • 不推荐：
 

if (a){b()
}function a (){}

 

  1. 函数声明括号前要加空格。
 

  • 推荐：
 

function func (x) {// ...
}

 

  • 不推荐
 

function func(x) {// ...
}

 

  1. 在函数调用时，禁止使用空格。
 

  • 推荐：
 

fn()

 

  • 不推荐：
 

fn ()fn
()

 

  1. 在操作符前后都需要添加空格。
 

  • 推荐：
 

var sum = 1 + 2

 

  • 不推荐：
 

var sum = 1+2











http://www.ppmy.cn/news/1078805.html












相关文章










应用案例 | 3D视觉引导解决方案汽车零部件上下料









应用案例 | 3D视觉引导解决方案汽车零部件上下料




Part.1 行业背景 三维视觉引导技术在国内外汽车零部件领域得到了广泛应用。随着汽车制造业的不断发展和创新&#xff0c;对于零部件的加工和装配要求越来越高&#xff0c;而三维视觉引导技术能够帮助企业实现更精确、更高效的零部件上下料过程。 
纵览国外&#xff0c;部分汽车…




阅读更多...

















go语言配置









go语言配置




1、Go语言的环境变量 
与Java等编程语言一样&#xff0c;安装Go语言开发环境需要设置全局的操作系统环境变量&#xff08;除非是用包管理工具直接安装&#xff09; 主要的系统级别的环境变量有两个: 
&#xff08;1&#xff09;GOROOT&#xff1a;表示Go语言环境在计算机上的安…




阅读更多...

















uniapp 配置并使用 VueX









uniapp 配置并使用 VueX




Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。 
uni-app 内置了 VueX  1、创建需要的文件  右键点击 根目录【我的是 uni-shop】&#xff0c;然后新建 目录&a…




阅读更多...

















Java运行时jar时终端输出的中文日志是乱码









Java运行时jar时终端输出的中文日志是乱码




运行Jar时在控制台输出的中文日志全是乱码&#xff0c;这是因为cmd/bash默认的编码是GBK&#xff0c;只要把cmd的编码改成UTF-8即可 两种方式修改&#xff1a;临时修改和注册表永久修改 
临时修改 
只对当前的cmd页面有效&#xff0c;关闭后重新打开都会恢复成GBK, 
打开cmd&am…




阅读更多...

















渗透测试漏洞原理之---【失效的访问控制】









渗透测试漏洞原理之---【失效的访问控制】




文章目录 1、失效的访问控制1.1、OWASP Top 101.1.1、A5:2017-Broken Access Control1.1.2、A01:2021 – Broken Access Control 1.2、失效的访问控制类别1.2.1、水平越权1.2.2、垂直越权 1.3、攻防案例1.3.1、Pikachu靶场 Over Permision1.3.2、DVWA越权利用失效的访问控制漏洞…




阅读更多...

















strlen()和sizeof()究竟输出什么









strlen()和sizeof()究竟输出什么




strlen(): char a[]  {M,e,t,a,x};//数组未设定大小&#xff0c;且尾部没有\0
char b[5]  {M,e,t,a,x};//数组长度不够 放不下\0
char c[]  {M,e,t,a,x,};//数组未设定大小
printf("%d  %d  %d",strlen(a),strlen(b),strlen(c));//都是输出随机一个大于等于5的数char…




阅读更多...

















不需要Photoshop!这10款替代软件也能轻松处理图片









不需要Photoshop!这10款替代软件也能轻松处理图片




Photoshop是一款功能强大的图像处理工具&#xff0c;很多人说到修图就会想到要用PS&#xff0c;但是Photoshop是要付费的&#xff0c;对于业余设计师或者对修图需求量不太高的普通用户来说&#xff0c;使用Photoshop的成本略高。本篇文章&#xff0c;我们向你推荐5款Photoshop替…




阅读更多...

















信息技术04--初/高中--教学设计知识点梳理









信息技术04--初/高中--教学设计知识点梳理




文章目录 第一章 信息技术基础1.1 信息概念与特征1.1.1 信息的概念1.1.2 信息的特征 1.2 信息技术概述1.2.1 信息技术概念1.2.2 信息技术五次革命 1.3 信息的获取1.3.1 信息获取的过程&#xff1a;1.3.2 搜索引擎1.3.3 引擎符号 1.4 信息的表示和编码1.4.1 进制分类1.4.2 二进制…




阅读更多...















 
 
 
 










最新文章







 





















Copyright @ 2022~2023