Brinque com o código | Compartilhe algum código prático de front-end do Vue (2)

<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 dados

O componente data deve ser uma função.

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

2.1.3 suporte

As definições de prop devem ser tão detalhadas quanto possível.

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

2.1.4 calculado

Propriedades computadas complexas devem ser divididas em tantas propriedades mais simples quanto possível. Propriedades computacionais pequenas e focadas reduzem as suposições sobre o uso da informação, portanto, é necessária menos refatoração quando os requisitos mudam.

// 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 Para `v-for` definir o valor da chave

As colocações devem ser usadas em componentes key para v-for manter o estado do componente interno e suas subárvores. Mantenha até mesmo um comportamento previsível em elementos, como constância de objetos em animações .

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

2.1.6 `v-if` e `v-for` exclusão mútua

Nunca use ambos v-if e v-for no mesmo elemento.

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

Geralmente tendemos a fazer isso em duas situações comuns:

Para filtrar itens em uma lista (por exemplo v-for="user in users" v-if="user.isActive"). Nesse caso, users substitua por uma propriedade computada (por exemplo activeUsers) que retorne a lista filtrada.

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

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

Para evitar renderizar uma lista que deveria estar oculta (por exemplo v-for="user in users" v-if="shouldShowUsers"). Neste caso, v-if mova-o para o elemento contêiner (por exemplo ul, ol).

<!-- bad -->
<ul>
  <li
    v-for="user in users"
    v-if="shouldShowUsers"
    :key="user.id">
      {
     
     { user.name }}
  </li>
</ul>

<!-- good -->
<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id">
      {
     
     { user.name }}
  </li>
</ul>

2.1.7 Elementos com múltiplos atributos

Elementos com múltiplos atributos devem ser escritos em múltiplas linhas, uma linha para cada atributo.

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

<!-- good -->
<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo">

<MyComponent
  foo="a"
  bar="b"
  baz="c"/>

2.1.8 Expressões simples em templates

Os modelos de componentes devem conter apenas expressões simples e expressões complexas devem ser refatoradas em propriedades ou métodos computados.

Expressões complexas tornam seus modelos menos declarativos. Deveríamos tentar descrever o que deveria aparecer , e não como calcular esse valor. E propriedades e métodos computados tornam o código reutilizável.

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

Melhor abordagem:

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

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

2.1.9 Valores de atributos citados

Os valores de atributos HTML não vazios devem sempre ser colocados entre aspas duplas.

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

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

2.1.10 Abreviação da instrução

: expresso por v-bind:
@ expresso por v-on:
# expresso por 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.2HTML

2.2.1 Modelo de arquivo

Modelo de arquivo HTML5:

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

Versão móvel:

<!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>

Versão para 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 Fechamento de elemento e rótulo

Existem cinco tipos de elementos HTML:

空元素: área、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
Elementos do texto original: roteiro, estilo
Elementos RCDATA: área de texto, título
Elementos estrangeiros: elementos do namespace MathML e namespace SVG
Elementos regulares: outros elementos permitidos pelo HTML são chamados de elementos regulares

Para permitir que os navegadores analisem melhor o código e tornem-no mais legível, existem as seguintes convenções:

Todos os elementos com tags de início e de fim devem ser escritos com tags de início e de fim, e alguns elementos que permitem a omissão de tags de início ou de pacote também devem ser escritos.

Tags de elementos vazios não incluem o caractere "/".

<!-- good -->
<div>
    <h1>我是h1标题</h1>
    <p>我是一段文字，我有始有终，浏览器能正确解析</p>
</div>
	
<br data-tomark-pass>

<!-- bad -->
<div>
    <h1>我是h1标题</h1>
    <p>我是一段文字，我有始无终，浏览器亦能正确解析
</div>

<br/>

2.2.3 Aninhamento de código

Especificações de aninhamento de elementos, cada elemento de bloco está em sua própria linha e os elementos embutidos são opcionais.

<!-- 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>

Elementos de parágrafo e elementos de título só podem aninhar elementos embutidos.

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

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

2.3CSS

2.3.1 Arquivos de estilo

O arquivo de estilo deve ser escrito com @charset regras e deve ser escrito a partir do primeiro caractere da primeira linha do arquivo de estilo, e o nome da codificação é usado “UTF-8”.

recomendo:

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

Não recomendado:

/* @charset规则不在文件首行首个字符开始 */
@charset "UTF-8";
.jdc {}

/* @charset规则没有用小写 */
@CHARSET "UTF-8";
.jdc {}

/* 无@charset规则 */
.jdc {}

2.3.2 Formatação de código

Geralmente existem dois estilos de escrita: um é o formato compacto (Compact) e o outro é o formato expandido (Expanded).

Recomendado: formato expandido

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

Não recomendado: Formato compacto (Compacto)

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

2.3.3 Caso de código

Seletores de estilo, nomes de atributos e palavras-chave de valor de atributo são todos escritos em letras minúsculas, e letras maiúsculas e minúsculas são permitidas em sequências de atributos.

recomendo:

.jdc {
  display: block;
}

Não recomendado:

.JDC {
  DISPLAY: BLOCK;
}

2.3.4 Legibilidade do código

Há um espaço entre o colchete de abertura e o nome da classe e um espaço entre os dois pontos e o valor do atributo.

recomendo:

.jdc {
  width: 100%;
}

Não recomendado:

.jdc{
  width:100%;
}

Valores separados por vírgula, seguidos de espaço.

recomendo:

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

Não recomendado:

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

Abre uma nova linha para um único seletor CSS ou nova declaração.

recomendo:

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

.nav{
  color: #fff;
}

Não recomendado:

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

Não há espaços no valor da cor rgb() rgba() hsl() hsla() rect() e o valor não deve conter 0s desnecessários.

recomendo:

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

Não recomendado:

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

Se o valor hexadecimal do valor do atributo puder ser abreviado, use abreviações tanto quanto possível.

recomendo:

.jdc {
  color: #fff;
}

Não recomendado:

.jdc {
  color: #ffffff;
}

Não 0 especifique unidades.

recomendo:

.jdc {
  margin: 0 10px;
}

Não recomendado:

.jdc {
  margin: 0px 10px;
}

2.3.5 Aspas para valores de atributos

Quando aspas são necessárias para valores de propriedades CSS, devem ser usadas aspas simples.

recomendo:

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

Não recomendado:

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

2.3.6 Sugestões para escrita de atributos

Recomenda-se seguir a seguinte sequência:

Propriedades de posicionamento de layout: display/position/float/clear/visibility/overflow
Atributos próprios: largura/altura/margem/preenchimento/borda/fundo
Propriedades do texto: cor/fonte/decoração de texto/alinhamento de texto/alinhamento vertical/espaço em branco/quebra de palavra
Outras propriedades (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 Prefixo privado do navegador CSS3

Os prefixos CSS3 específicos do navegador vêm primeiro e os prefixos padrão vêm em seguida.

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

2.4JavaScript

2.4.1 Blocos de código de linha única

Use espaços em blocos de código de linha única.

Não recomendado:

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

recomendo:

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

2.4.2 Estilo de chaveta

No processo de programação, o estilo de colchetes está intimamente relacionado ao estilo de recuo e há muitas maneiras de descrever a posição dos colchetes em relação ao bloco de código. Em JavaScript, existem três estilos principais, como segue:

【Recomendado】Um verdadeiro estilo de cinta

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

Stroustrup

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

Allman

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

2.4.3 Espaços no código

Espaços antes e depois das vírgulas podem melhorar a legibilidade do código. A equipe concordou em usar espaços depois das vírgulas e nenhum espaço antes das vírgulas.

recomendo:

var foo = 1, bar = 2

Não recomendado:

var foo = 1,bar = 2

var foo = 1 , bar = 2

var foo = 1 ,bar = 2

Não pode haver um espaço entre a chave e o valor de um objeto literal, e é necessário um espaço entre os dois pontos e o valor do objeto literal.

recomendo:

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

Não recomendado:

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

Adicione espaços antes dos blocos de código.

recomendo:

if (a) {
  b()
}

function a () {}

Não recomendado:

if (a){
  b()
}

function a (){}

Deve haver um espaço antes dos parênteses de declaração da função.

recomendo:

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

Não recomendado

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

Ao chamar uma função, os espaços são proibidos.

recomendo:

fn()

Não recomendado:

fn ()

fn
()

Você precisa adicionar espaços antes e depois do operador.

recomendo:

var sum = 1 + 2

Não recomendado:

var sum = 1+2