Esboço de aprendizagem da estrutura Vue

Vue.js é uma estrutura para construção de interfaces de usuário, especialmente aplicativos de página única. A seguir estão alguns pontos de conhecimento básicos e recursos do Vue.js que você deve conhecer sobre a versão baseada principalmente no Vue 2.x:

Instância Vue :
Criar uma instância Vue é o primeiro passo para começar a usar o Vue.
```
var vm = new Vue({
      
      
  // 选项
});
```

Vinculação de dados :
Vue fornece uma sintaxe de vinculação de dados muito intuitiva.

<div id="app">
  {
     
     { message }}
</div>
<script>
  var app = new Vue({
        
        
    el: '#app',
    data: {
        
        
      message: 'Hello Vue!'
    }
  });
</script>

Diretivas :
As diretivas são v-atributos especiais prefixados com .

<p v-if="seen">Now you see me</p>
<script>
  var app = new Vue({
        
        
    el: '#app',
    data: {
        
        
      seen: true
    }
  });
</script>

Manipulação de eventos :
use v-ona diretiva para ouvir eventos DOM.

<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {
     
     { counter }} times.</p>
<script>
  var app = new Vue({
        
        
    el: '#app',
    data: {
        
        
      counter: 0
    }
  });
</script>

Propriedades computadas :
as propriedades computadas são armazenadas em cache com base em suas dependências.

var vm = new Vue({
      
      
  el: '#example',
  data: {
      
      
    a: 1
  },
  computed: {
      
      
    // a computed getter
    b: function () {
      
      
      // `this` points to the vm instance
      return this.a + 1
    }
  }
});

Vinculação de dados bidirecional :
Use v-modela diretiva para implementar a vinculação de dados bidirecional.

<input v-model="message" placeholder="edit me">
<p>Message is: {
     
     { message }}</p>
<script>
  var app = new Vue({
        
        
    el: '#app',
    data: {
        
        
      message: ''
    }
  });
</script>

Componentes :
Os componentes são um dos recursos mais poderosos do Vue.js.

Vue.component('button-counter', {
      
      
  data: function () {
      
      
    return {
      
      
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {
      
      { count }} times.</button>'
});

Ganchos de ciclo de vida :
Cada instância do Vue possui uma série de processos de inicialização e, durante esse processo, algumas funções chamadas ganchos de ciclo de vida são executadas, como created, mounted, updated, destroyed.

new Vue({
      
      
  data: {
      
      
    a: 1
  },
  created: function () {
      
      
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})

Renderização condicional :
Use v-ife v-showpara renderização condicional.
```
<h1 v-if="ok">Yes</h1>
<h1 v-show="ok">Yes</h1>
```

Renderização de lista :
use v-fora diretiva para renderizar uma lista.

<ul id="example-1">
  <li v-for="item in items">
    {
     
     { item.message }}
  </li>
</ul>

Vue Router :
Vue Router é o gerenciador de roteamento oficial do Vue.js, usado para construir aplicativos de página única.
Vuex :
Vuex é um padrão de gerenciamento de estado desenvolvido especificamente para aplicativos Vue.js.
Slots e slots com escopo :
um slot é um espaço reservado em um modelo de componente usado para receber conteúdo transmitido pelo usuário.

Os pontos de conhecimento e recursos básicos acima fornecem a base para a construção de aplicativos usando Vue.js. Para entender e usar melhor o Vue.js, é recomendável ler a documentação oficial do Vue.js em profundidade e tentar criar seu próprio projeto Vue.js.

O Vue 3.x fez muitas melhorias e adicionou novos recursos nessas bases. Aqui estão alguns novos recursos e mudanças no Vue 3.x:

API de composição :
Vue 3 introduziu a API de composição, que fornece uma maneira mais flexível de organizar código, especialmente para componentes e lógica mais complexos.

import {
      
       ref, computed } from 'vue';

export default {
      
      
  setup() {
      
      
    const count = ref(0);
    const doubled = computed(() => count.value * 2);

    function increment() {
      
      
      count.value++;
    }

    return {
      
      
      count,
      doubled,
      increment
    }
  }
}

Sistema de reatividade :
O sistema de resposta do Vue 3 foi reescrito, usando a API Proxy em vez da API Object.defineProperty do Vue 2, trazendo melhor desempenho e mais possibilidades.

Vários modelos v :
o Vue 3 permite o uso de vários modelos v em um componente, o que torna a manipulação de objetos e eventos mais simples e flexível.

<script setup>
import { ref } from 'vue'

const modelValue = ref('')
const modelValue2 = ref('')
</script>

<template>
<your-component
  v-model="modelValue"
  v-model:other="modelValue2"
/>
</template>

Teleporte :
O teleporte fornece uma maneira de renderizar o HTML de um componente para outro local no DOM.
```
<teleport to="#end-of-body">
  <div>I will be rendered at the end of body!</div>
</teleport>
```

Suspense :
Suspense é uma maneira de fazer os componentes esperarem por dependências assíncronas aninhadas.

<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>

Sintaxe de modelo aprimorada :
Vue 3 fornece melhorias na sintaxe de modelo, incluindo novo uso de v-if e v-for.
Configuração de montagem global :
Através createAppdo método, você pode configurar seu aplicativo globalmente.
Componentes de fragmento, portal e suspense :
Vue 3 apresenta novos componentes integrados que permitem aos desenvolvedores construir interfaces de usuário com mais flexibilidade.
API de renderização personalizada :
Vue 3 fornece uma API de renderização personalizada, tornando mais fácil a criação de renderizadores personalizados.
Melhor suporte a TypeScript :
Vue 3 fornece suporte aprimorado ao tipo TypeScript, tornando o uso do Vue em projetos TypeScript mais amigável.
Novos recursos de estilo e transição :
Novos recursos de estilo e transição tornam a criação de animações e efeitos de transição mais fácil e poderosa.

Acima estão alguns novos recursos e melhorias do Vue 3.x. Para entender e utilizar melhor o Vue 3, é recomendável ler a documentação oficial do Vue 3 .

Esboço de aprendizagem da estrutura Vue

おすすめ