[Crazy God Talks Java] Notas detalhadas sobre como começar a usar o Vue (completo)

Enterprise 2023-10-01 06:31:48 views: null

Diretório de artigos

1. Visão Geral

1.1. Visão geral do Vue

Vue (pronuncia-se /vju/, semelhante a view) é um framework progressivo para construção de interfaces de usuário , lançado em fevereiro de 2014. Ao contrário de outras estruturas grandes, o Vue foi projetado para ser aplicado camada por camada, de baixo para cima. A biblioteca principal do Vue concentra-se apenas na camada de visualização , que não é apenas fácil de começar, mas também fácil de integrar com bibliotecas de terceiros (como: vue-router: jump, vue-resource: Communication, vuex: management) ou projetos existentes.
Princípio SOC: princípio da separação de preocupações

1.2. Sistema de conhecimento front-end

Ainda há um longo caminho a percorrer para se tornar um verdadeiro “engenheiro full-stack Java para Internet”, entre os quais “My Big Front End” é um curso obrigatório que não pode ser evitado. O principal objetivo desta etapa do curso é levar meus programadores Java background a conhecer, compreender e dominar o front-end, de forma a dar um passo à frente para se tornar um "engenheiro full-stack Java para Internet".

1.3. Três elementos de front-end

  • HTML (estrutura): Hyper Text Markup Language (Linguagem de marcação de hipertexto), determina a estrutura e o conteúdo das páginas da web
  • CSS (Apresentação): folhas de estilo em cascata (folhas de estilo em cascata), definem o estilo de apresentação da página da web
  • JavaScript (comportamento): É uma linguagem de script de digitação fraca, seu código-fonte não precisa ser compilado, mas é interpretado e executado pelo navegador para controlar o comportamento das páginas da web.

1.4. Camada de apresentação (CSS)

A folha de estilo em cascata CSS é uma linguagem de marcação , não uma linguagem de programação, portanto não pode personalizar variáveis, não pode citar, etc. Em outras palavras, não possui nenhum suporte de sintaxe. Suas principais falhas são as seguintes:

  • A sintaxe não é poderosa o suficiente, por exemplo, não pode ser aninhada, resultando na necessidade de escrever muitos seletores repetidos no desenvolvimento modular;
  • Sem variáveis ​​​​e um mecanismo razoável de reutilização de estilo, os valores de atributos relacionados logicamente devem ser gerados repetidamente na forma de literais, dificultando a manutenção;

Isso resultou em um aumento irracional na carga de trabalho no trabalho. Para resolver esse problema, os desenvolvedores front-end usarão uma ferramenta chamada [ pré-processador CSS ] para fornecer o mecanismo de reutilização da camada de estilo ausente do CSS, reduzir o código redundante e melhorar a capacidade de manutenção do código de estilo. Melhora muito a eficiência do desenvolvimento de estilo front-end. (Por exemplo, as páginas têm necessidades diferentes em momentos diferentes, e os estilos do Taobao serão diferentes no Double 11 e 618)

1.5. Pré-processador CSS

O pré-processador CSS define uma nova linguagem. A ideia básica é usar uma linguagem de programação especializada para adicionar alguns recursos de programação ao CSS, usar CSS como alvo para gerar arquivos, e então os desenvolvedores só precisam usar essa linguagem. Realizar o trabalho de codificação CSS . Traduzido em palavras fáceis de entender, significa " usar uma linguagem de programação especial para projetar o estilo da página da Web e, em seguida, convertê-lo em um arquivo CSS normal por meio de um compilador para uso no projeto." Quais
são os pré-processadores CSS comumente usados ?

  • SASS : Baseado em Ruby, processado através do servidor e possui funções poderosas. Alta eficiência de análise. Você precisa aprender a linguagem Ruby, que é mais difícil de começar do que LESS.
  • MENOS : Baseado em NodeJS, processado através do cliente, fácil de usar. A função é mais simples que o SASS e a eficiência de análise também é menor que o SASS, mas é suficiente no desenvolvimento real, portanto, nossa equipe de back-end recomenda o uso de LESS, se necessário.

1.6. Camada de comportamento (JavaScript)

JavaScript é uma linguagem de script de digitação fraca. Seu código-fonte não precisa ser compilado antes de ser enviado ao cliente para execução. Em vez disso, códigos de caracteres em formato de texto são enviados ao navegador para interpretação e execução pelo navegador.
Desenvolvimento JS nativo
Desenvolvimento JS nativo significa que seguimos o método de desenvolvimento padrão [ECMAScript], abreviadamente denominado ES. A característica é que todos os navegadores o suportam. No momento da publicação atual do blog, o padrão ES lançou as seguintes versões:

  • ES3
  • ES4 (versão interna não solicitada)
  • ES5 (suporte completo ao navegador)
  • ES6 (comumente usado, versão mainstream atual: o pacote webpack torna-se suporte ES5!)
  • ES7
  • ES8
  • ES9 (estágio de rascunho)

A diferença é que novos recursos são adicionados gradativamente.

1.7. Texto datilografado

TypeScript é uma linguagem de programação gratuita e de código aberto desenvolvida pela Microsoft. É um superconjunto de JavaScript e essencialmente adiciona tipagem estática opcional e programação orientada a objetos baseada em classes à linguagem. Liderado por Anders Heilsberg (pai do C#, Delphi, TypeScript; criador do .NET).
A característica desta linguagem é que além dos recursos do ES, ela também incorpora muitos recursos novos que não estão dentro do escopo do padrão, portanto, muitos navegadores não podem suportar diretamente a sintaxe TypeScript e precisam ser compilados (compilados em JS) antes que possa ser executado corretamente pelo navegador.

1.8. Estrutura JavaScript

  • jQuery : Uma estrutura JavaScript bem conhecida. A vantagem é que simplifica as operações DOM. A desvantagem é que as operações DOM são muito frequentes , o que afeta o desempenho do front-end; aos olhos do front-end, só é usado para ser compatível com IE6, 7 e 8;
  • Angular : O framework front-end adquirido pelo Google foi desenvolvido por um grupo de programadores Java. Caracteriza-se por mover o modelo MVC de back-end para o front-end e adicionar o conceito de desenvolvimento modular. Coopera com a Microsoft e usa TypeScript sintaxe para desenvolver; é amigável para programadores back-end. Não muito amigável para programadores front-end; a maior desvantagem é que a iteração da versão não é razoável (por exemplo: 1ª geração -> 2ª geração, exceto pelo nome, é basicamente duas coisas; no momento da publicação do blog, o Angular6 foi lançado)
  • React : Produzido pelo Facebook, um framework front-end JS de alto desempenho; sua característica é propor um novo conceito [DOM virtual] para reduzir operações reais de DOM e simular operações DOM na memória, melhorando efetivamente a eficiência de renderização de front-end; sua A desvantagem é que é complicado de usar, porque você precisa aprender uma linguagem [JSX] adicional;
  • Vue : Uma estrutura JavaScript progressiva. Progressivo significa implementar gradualmente novos recursos, como desenvolvimento modular, roteamento, gerenciamento de estado e outros novos recursos. Sua característica é combinar as vantagens do Angular (modularidade) e do React (DOM virtual) ;
  • Axios : estrutura de comunicação front-end; porque os limites do Vue são muito claros, é para processar DOM, por isso não possui recursos de comunicação. Neste momento, você precisa usar uma estrutura de comunicação adicional para interagir com o servidor; de claro, você também pode optar diretamente por usar a função de comunicação AJAX fornecida pelo jQuery;

Três principais estruturas de front-end: Angular, React, Vue

1.9. Estrutura da IU

  • Ant-Design: Produzido por Alibaba, uma estrutura de UI baseada em React
  • ElementUI, iview, ice: Produzido por Ele.me, uma estrutura de UI baseada em Vue
  • Bootstrap: um kit de ferramentas de código aberto para desenvolvimento front-end lançado pelo Twitter
  • AmazeUI: Também chamada de "Meizi UI", uma estrutura front-end HTML5 de tela cruzada.

Ferramentas de construção JavaScript

  • Babel: ferramenta de compilação JS, usada principalmente para novos recursos ES não suportados por navegadores, como compilação TypeScript
  • WebPack: Empacotador de módulo, sua principal função é empacotamento, compactação, mesclagem e carregamento sequencial.Nota
    : Os pontos de conhecimento acima resolveram todas as habilidades necessárias para o desenvolvimento de WebApp.

1.10. Três pontas em um

O principal objetivo do desenvolvimento híbrido (Hybid App)
é unificar um conjunto de códigos em três terminais (PC, Android: .apk, iOS: .ipa) e ser capaz de chamar componentes subjacentes (como sensores, GPS, câmeras, etc. .), método de embalagem Existem basicamente dois tipos:

  • Pacote de nuvem: HBuild -> HBuildX, produzido por DCloud; API Cloud
  • Embalagem local: Cordova (anteriormente PhoneGap)

1.11. Tecnologia de back-end

O pessoal de front-end também precisa dominar certas tecnologias de back-end para facilitar o desenvolvimento. No entanto, nós, pessoal de back-end Java, sabemos que o sistema de conhecimento de back-end é extremamente grande e complexo. Portanto, para facilitar o front-end pessoal para desenvolver aplicativos back-end, surgiram tecnologias como NodeJS.

O autor do NodeJS afirmou ter desistido do NodeJS (dizendo que a arquitetura não é bem feita e os volumosos módulos node_ podem deixar o autor infeliz) e começou a desenvolver o Deno com uma nova arquitetura

Por ser uma tecnologia de back-end, definitivamente requer estruturas e ferramentas de gerenciamento de projetos.A estrutura NodeJS e as ferramentas de gerenciamento de projetos são as seguintes:

  • Expresso: estrutura NodeJS
  • Koa: versão simplificada expressa
  • NPM: ferramenta abrangente de gerenciamento de projetos, semelhante ao Maven
  • YARN: Uma alternativa ao NPM, semelhante ao relacionamento entre Maven e Gradle

2. MVVM

2.1. O que é MVVM

MVVM (Model-View-ViewModel) é um padrão de design de arquitetura de software desenvolvido pela Microsoft WPF (usado para substituir o WinForm, que era usado para desenvolver aplicativos de desktop no passado) e Silverlight (semelhante ao Java Applet, para simplificar, é navegação Desenvolvido por Ken Cooper e Ted Peters, os arquitetos do WPF (rodando no Windows Server), é um método de programação orientado a eventos que simplifica a interface do usuário . Publicado por John Gossman (também arquiteto do WPF e do Silverlight) em 2005 em seu blog.
MVVM é derivado do padrão clássico MVC (ModI-View-Controller). O núcleo do MVVM é a camada ViewModel, responsável por converter objetos de dados no Modelo para facilitar o gerenciamento e o uso dos dados. Suas funções são as seguintes:

  • Esta camada realiza ligação de dados bidirecional para cima com a camada de visualização.
  • Realize a interação de dados para baixo com a camada Modelo por meio de solicitações de interface

imagem.png

2.2. Por que usar MVVM

O padrão MVVM é igual ao padrão MVC. O objetivo principal é separar a visão (View) e o modelo (Model). Ele tem diversas vantagens:

  • Baixo acoplamento : View (View) pode mudar e modificar independentemente do modelo. Um ViewModel pode ser vinculado a diferentes Views. Quando a View muda, o modelo pode permanecer inalterado, e quando o modelo muda, a View também pode permanecer inalterada.
  • Reutilizável : você pode colocar alguma lógica de visualização em um ViewModel e permitir que muitas visualizações reutilizem essa lógica de visualização.
  • Desenvolvimento independente : os desenvolvedores podem se concentrar na lógica de negócios e no desenvolvimento de dados (ViewModel), e os designers podem se concentrar no design da página.
  • Testável : as interfaces sempre foram difíceis de testar, mas agora os testes podem ser escritos para ViewModel.

2.3. Vue é o implementador do padrão MVVM

imagem.png

  • Modelo: Camada de modelo, onde os objetos JavaScript são representados
  • View: Camada de visualização, aqui representa DOM (elementos para operações HTML)
  • ViewModel: middleware que conecta visualizações e dados. Vue.js é o implementador da camada ViewModel no MVVM. Na arquitetura MVVM, dados e visualizações não podem se comunicar diretamente. Eles só podem se comunicar por meio de ViewModel, e ViewModel define um Observer

ViewModel pode observar alterações nos dados e atualizar o conteúdo correspondente à visualização.
ViewModel pode monitorar alterações nas visualizações e notificar os dados sobre alterações.
Vue.js é um implementador de MVVM. Seu núcleo é implementar monitoramento DOM e vinculação de dados

3. O primeiro programa Vue

  1. Crie um novo projeto vazio e crie um novo pacote: capítulo01

imagem.png

  1. Crie um novo projeto HTML5 e escreva
  2. abrir página
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>

    <!--View 层-->
    <div id="app">
      <!--4、元素获取 vue 中的数据-->
      {
   
   {message}}
    </div>

    <!--1、导入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
      var vm = new Vue({
      
      
        // 2、绑定 app 元素
        el: "#app",
        // Model 层
        // 3、插入数据，键值对
        data: {
      
      
          message: "hello,vue"
        }
      });
    </script>
  </body>
</html>

imagem.png

  1. Abra as ferramentas do desenvolvedor, selecione Entrada do console e pressione Enter
vm.message="hehe"

Verifica-se que os dados na página também mudaram.
Esta é a ligação bidirecional do ViewModel
dos dados na camada de visualização e na variável da mensagem. Quando a mensagem muda, os dados na página também mudam.

4. Instruções

4.1. Exemplo

Escreva páginas HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <!--View 层-->
    <div id="app">
      <!--4、元素获取 vue 中的数据-->
      <!--    {
    
    {message}}-->
      <span v-bind:title="message">
        鼠标悬停几秒可查看绑定的信息
      </span>
    </div>
    <!--1、导入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
      var vm = new Vue({
      
      
        // 2、绑定 app 元素
        el: "#app",
        // Model 层
        // 3、插入数据，键值对
        data: {
      
      
          message: "hello,vue"
        }
      });
    </script>
  </body>
</html>

Abra a página para visualizar
imagem.png
e descobrir isso usando v-bind: Você também pode vincular variáveis ​​a elementos.

4.2. Visão geral

As diretivas são atributos especiais prefixados com v- . Espera-se que o valor do atributo de uma diretiva seja uma única expressão JavaScript (a exceção é v-for, que discutiremos mais tarde). A responsabilidade da diretiva é aplicar reativamente os efeitos associados ao DOM quando o valor da expressão muda.

4.3. v-se

Escreva HTML

<div id="app">
  <span v-if="ok===true">YES</span>
  <span v-else>No</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      ok: true
    }
  });
</script>

Abra a página
imagem.png
e modifique o valor de ok
imagem.png

4.4. v-else-if

<div id="app">
  <span v-if="str==='A'">AAA</span>
  <span v-else-if="str==='B'">BBB</span>
  <span v-else>Other</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      str: 'A'
    }
  });
</script>

Abra a página
imagem.png
e modifique o valor de str
imagem.png
imagem.png

4.5. para

<div id="app">
  <ul>
    <!--类似于java 的 foreach ，
    从 items 中遍历出的每一项命名为 item-->
    <li v-for="item in items">{
   
   {item.message}}</li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      items: [
        {
      
      message: "test-1"},
        {
      
      message: "test-2"},
        {
      
      message: "test-3"}
      ]
    }
  });
</script>

abrir página
imagem.png

5. Ouça os eventos

Você pode usar a diretiva v-on para ouvir eventos DOM e executar algum código JavaScript quando acionado.

<div id="app">
  <button v-on:click="sayHi()">click me</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      message: "Hi!!!"
    },
    // 定义方法
    // 注意一定要加 S
    methods: {
      
      
      // 冒号前是方法名
      sayHi: function (){
      
      
        alert(this.message);
      }
    }
  });
</script>

abrir página
imagem.png

6. Vinculação bidirecional

6.1 O que é vinculação de dados bidirecional?

Vue é uma estrutura mvvm, o que significa ligação de dados bidirecional, ou seja, quando os dados mudam, a visão também muda. Quando a visão muda, os dados também mudam de forma síncrona . Isso pode ser considerado a essência do vue.
É importante notar que a vinculação de dados bidirecional de que estamos falando deve ser para controles de UI. Os controles que não são de UI não envolverão vinculação de dados bidirecional. A vinculação de dados unidirecional é um pré-requisito para o uso de ferramentas de gerenciamento de estado, como redux. Se usarmos vuex, o fluxo de dados também será de item único, o que entrará em conflito com a vinculação de dados bidirecional. Podemos resolvê-lo assim

6.2 Por que é necessário implementar a vinculação bidirecional de dados?

Na verdade, se você usar vuex, os dados são na verdade unidirecionais. A razão pela qual é chamada de vinculação de dados bidirecional é por causa dos controles da interface do usuário usados. Para processarmos formulários, a vinculação de dados bidirecional do vue é particularmente confortável para usar. .
Ou seja, os dois não são mutuamente exclusivos. O fluxo de dados global utiliza um único item para facilitar o rastreamento, o fluxo de dados local utiliza duas direções, que são simples e fáceis de operar.

6.3 Usando vinculação de dados bidirecional em formulários

Você pode usar a diretiva v-model para criar vinculação de dados bidirecional nos elementos <input>, <textarea> e <select> do formulário. Ele escolhe automaticamente o método correto para atualizar o elemento com base no tipo de controle. Apesar de sua magia, o modelo v é essencialmente um açúcar sintático. Ele é responsável por ouvir os eventos de entrada do usuário para atualizar os dados e realizar algum processamento especial para alguns cenários extremos.

6.4 Uso

1. Caixa de entrada

<div id="app">
  <!--双向绑定：
  data 中的 message 既和输入框的 message 绑定
  又和 p 标签中的 message 绑定-->
  <span>输入文本：</span><input type="text" v-model="message">
  <p><span>输入的文本：</span><span>{
   
   {message}}</span></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      message: ""
    }
  });
</script>

Modifique o valor da mensagem na página e
imagem.png
insira-o diretamente na caixa de entrada
imagem.png

2. Botão de opção

<div id="app">
  性别：
  <input type="radio" name="sex" value="male" v-model="sex"> 男
  <input type="radio" name="sex" value="female" v-model="sex"> 女

  <p>选中了：{
   
   {sex}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      sex: ""
    }
  });
</script>

Ao abrir a página , você descobrirá que o valor
imagem.png
do botão de opção está vinculado aqui.

3. Caixa de seleção múltipla

<div id="app">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">杰克</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">约翰</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">麦克</label>
  <br>
  <span>Checked names: {
   
   { checkedNames }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      checkedNames: []
    }
  });
</script>

imagem.png

4. Caixa suspensa

<div id="app">
  下拉框：
  <select v-model="selected">
    <option value="" disabled>-请选择-</option>
    <option value="aaa">AA</option>
    <option value="bbb">BB</option>
    <option value="ccc">CC</option>
  </select>
  <p>选中 ： {
   
   {selected}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      selected : ""
    }
  });
</script>

imagem.png

7. Componentes

7.1. Visão geral

  • Os componentes são instâncias reutilizáveis ​​do Vue, o que significa que partes repetidas podem ser encapsuladas como componentes durante o processo de desenvolvimento.
  • Organização de componentes
    imagem.png Por exemplo, você pode ter componentes como cabeçalho, barra lateral e área de conteúdo, e cada componente contém outros componentes, como links de navegação e postagens de blog.

7.2. Demonstração do primeiro componente

<div id="app">
  <my-component></my-component>
  <my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  // 定义组件
  Vue.component("my-component",{
      
      
    template: '<li>AA</li>'
  });

  var vm = new Vue({
      
      
    el: "#app"
  });
</script>

imagem.png

7.3. Passando dados por meio de dados

<div id="app">
  <!--  利用 v-for 把 items 的元素取出，
  再通过 v-bind 绑定数据: 把 item1 绑定在了 item2 上-->
  <my-component v-for="item1 in items" v-bind:item2="item1"></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  // 定义组件
  Vue.component("my-component",{
      
      
    // 通过 item2 接收 item1 数据
    props: ['item2'],
    template: '<li>{
      
      {item2}}</li>'
  });

  var vm = new Vue({
      
      
    el: "#app",
    data: {
      
      
      items: ["AAA","BBB","CCC"]
    }
  });
</script>

imagem.png

8. Comunicação assíncrona Axios

8.1. Visão geral

Axios é uma estrutura de comunicação assíncrona de código aberto que pode ser usada no lado do navegador e NodeJS. Sua principal função é implementar a comunicação assíncrona AJAX. Suas características funcionais são as seguintes:

  • Crie XMLHttpRequests a partir do navegador
  • Crie uma solicitação http de node.js
  • API de promessa de suporte
  • Interceptar solicitações e respostas
  • Converter dados de solicitação e dados de resposta
  • Cancelar pedido
  • Converta dados JSON automaticamente
  • O cliente oferece suporte à defesa contra XSRF (falsificação de solicitação entre sites)

8.2. Por que usar Axios

Como Vue.js é uma estrutura de camada de visualização e o autor (You Yuxi) segue estritamente o SoC (Princípio de Separação de Preocupações), Vue.js não inclui funções de comunicação AJAX. Vue recomenda usar a estrutura Axios e tentar não usar JQuery . Porque frequentemente opera o DOM

8.3. Pré-requisitos

Confirme se o JavaScript do IDEA suporta ES6
imagem.png

8.4 A primeira aplicação Axios

  1. Como no desenvolvimento real, os dados no formato JSON são usados ​​​​principalmente, então aqui está um novo arquivo no formato JSON.
  2. Escreva HTML - Obtenha dados Json locais
  3. Abra a página e abra as ferramentas do desenvolvedor. Você verá que Axios é uma comunicação assíncrona como AJax. Você
    imagem.png
    também pode ver que os dados foram obtidos.
    imagem.png
  4. Escreva HTML - renderize o Json obtido na página
  5. página
    imagem.png
{
    
    
  "name": "呵呵",
  "url": "https://blog.csdn.net/weixin_44449838",
  "page": 123,
  "isNonProfit": true,
  "address": {
    
    
    "street": "塔克拉玛干沙漠",
    "city": "新疆",
    "country": "中国"
  },
  "links": [
    {
    
    
      "name": "Google",
      "url": "http://www.google.com"
    },
    {
    
    
      "name": "Baidu",
      "url": "http://www.baidu.com"
    }
  ]
}

<div id="vue">

</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<!-- axios 的包-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#vue",
    data: {
      
      },
    // 钩子函数，在主流程执行过程中间执行的方法
    mounted(){
      
      
      axios.get('../data.json').then(response=>(console.log(response.data)));
    }
  });
</script>

<div id="vue">
  <!--    需要渲染的字段名 -->
  <div>{
   
   {info.name}}</div>
  <div>{
   
   {info.address}}</div>
  <div>{
   
   {info.address.city}}</div>
  <div v-for="link in info.links">
    <span>{
   
   {link.name}}</span> : 
    <a v-bind:href="link.url">{
   
   {link.url}}</a>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<!-- axios 的包-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#vue",
    // 有冒号、大括号的 data 是属性
    data: {
      
      },
    // 没有冒号的是方法
    // 这里使用的 data 方法，不要搞混
    data(){
      
      
      return{
      
      
        // 请求的返回参数,这里需要写上需要返回的字段名，不需要写值，所以都写 null
        // 这里的键可以比传入的 Json 中的少
        // 但是如果写了，就必须和获得的 Json 键的名字一样
        info: {
      
      
          name: null,
          address: {
      
      
            city: null,
            country: null
          },
          links: [
            {
      
      
              name: null,
              url: null
            }
          ]
        }
      }
    },
    // 钩子函数，在主流程执行过程中间执行的方法
    mounted(){
      
      
      // 这边把 上面 return 中的 info 值和返回的 data 数据绑定，以便返回给视图渲染
      axios.get('../data.json').then(response=>(this.info=response.data));
    }
  });
</script>

8.5 Resolva o problema de oscilação

Depois que a demonstração acima for escrita, ao atualizar a página, você descobrirá que o modelo aparece primeiro e os dados aparecem depois de um tempo. Isso não é
imagem.png
muito fácil de usar e não é seguro para os dados, então use o seguinte método para resolvê-lo
escrevendo um HTML acima < style >< /style >

<style>
  [v-cloak]{
      
      
    display: none;
  }
</style>

<div id="vue" v-clock>
  <!--    需要渲染的字段名 -->
  <div>{
   
   {info.name}}</div>
  <div>{
   
   {info.address}}</div>
  <div>{
   
   {info.address.city}}</div>
  <div v-for="link in info.links">
    <span>{
   
   {link.name}}</span> : 
    <a v-bind:href="link.url">{
   
   {link.url}}</a>
  </div>
</div>

Desta forma, embora os dados ainda saiam depois de um tempo, o modelo não estará mais visível.

9. Ciclo de vida do Vue

Uma instância Vue possui um ciclo de vida completo, ou seja, uma série de processos como criação, inicialização de dados, compilação de templates, montagem de DOM, renderização -> atualização -> renderização, desinstalação, etc. de Vue.
Ao longo de todo o ciclo de vida do Vue, ele fornece uma série de eventos que nos permitem registrar métodos JS quando os eventos são acionados. Podemos usar nossos próprios métodos JS registrados para controlar toda a situação. Isso nesses métodos de resposta a eventos é diretamente apontado para uma instância do Vue.
imagem.png

10. Propriedades computadas

  • Propriedades calculadas: salve os resultados calculados nas propriedades.
  • Benefícios: Funciona em memória, DOM virtual
  • Escreva o código
  • Experimente a diferença entre abrir uma página, ativar o modo de desenvolvedor e usar o console
<div id="vue">
  <!-- 调用方法 -->
  <p>currentTime1 : {
   
   {currentTime1()}}</p>
  <!-- 调用属性 -->
  <p>currentTime2 : {
   
   {currentTime2}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el: "#vue",
    data: {
      
      
      message: "hello."
    },
    methods: {
      
      
      currentTime1: function (){
      
      
        // 返回当前时间戳
        return Date.now();
      }
    },
    // 计算属性
    computed: {
      
      
      // 方法名不能一样
      currentTime2: function (){
      
      
        // 返回当前时间戳
        return Date.now();
      }
    }
  });
</script>
  1. Ao chamar um método normal, é o nome do método de chamada; ao chamar uma propriedade calculada, é o nome da propriedade.
    imagem.png
  2. Chamadas de função comuns são executadas uma vez; propriedades calculadas tratam os resultados calculados como atributos e os armazenam na memória.
    imagem.png
  • Quando uma propriedade computada muda? Métodos para modificar propriedades computadas
// 计算属性
computed: {
    
    
  // 方法名不能一样
  currentTime2: function (){
    
    
    // 返回当前时间戳
    return Date.now() +"  | "+this.message;
  }
}

Abra a página, abra o modo de desenvolvedor e use o console.
imagem.png
Portanto, enquanto os dados no corpo do método de propriedade calculada mudarem, a propriedade calculada mudará.

11. Distribuição de conteúdo – slot

  • Slot: componente conectável dinamicamente
  • Caso simples
<div>
  <p>数据列表(原本的)</p>
  <ul>
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
  </ul>
</div>
————————————————————————————————
<div id="vue">
  <list>
    <!--绑定插槽 : 使用 slot 属性绑定，引号里的值，必须和下面的 name 属性一样-->
    <!--绑定数据 : 冒号后面是组件中定义的值
    引号里面是 data 数据的字段值
    不能混淆-->
    <list-title slot="list-title" :title="l_title"></list-title>
    <list-items slot="list-items" v-for="item in l_items" :item="item"></list-items>
  </list>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
  Vue.component("list",{
      
      
    template:
      '<div>\
      <slot name="list-title"></slot>\
      <ul>\
      <slot name="list-items"></slot>\
      </ul>\
      </div>'
  });
  // 定义数据，插入插槽
  Vue.component("list-title",{
      
      
    props: ['title'],
    template: '<div>{
      
      {title}}</div>'
  });

  Vue.component("list-items",{
      
      
    props: ['item'],
    template: '<li>{
      
      {item}}</li>'
  });

  var vm = new Vue({
      
      
    el: "#vue",
    data: {
      
      
      l_title: "标题————",
      l_items:["AA","BBB","CCCC"]
    }
  });
</script>

Efeito de página
imagem.png

12. Distribuição personalizada de conteúdo de eventos

  • Com base no caso acima, espero adicionar um botão de exclusão após cada linha e clicar em excluir para excluir e alterar a linha.
  1. Faça pequenas modificações primeiro, adicione um botão de exclusão, vincule o evento de clique e imprima o subscrito após clicar.
  2. Adicionar método delete no objeto vue
  3. Teste os dois métodos escritos acima. Clique no botão delete imagem.pngpara chamar o método removeItem no console imagem.png
    . Esses dois métodos são bem-sucedidos respectivamente. Como fazer a conexão entre esses dois métodos?
  4. Deixe o componente chamar o evento por meio deste.$emit("custom event name", parâmetro)
  5. teste
    imagem.png
  6. Diagrama simples do processo
    imagem.png
<list-items slot="list-items" v-for="(item,index) in l_items" :item="item" :index="index"></list-items>
 

var vm = new Vue({
  el: "#vue",
  data: {
  l_title: "标题————",
  l_items:["AA","BBB","CCCC"]
  },
  methods: {
  removeItem: function (index){
  // 打印信息
  console.log("删除了"+this.l_items[index]);
  // 表示从 index 开始，删除 n 个元素
  this.l_items.splice(index,1);
  }
  }
  });

<!--数据绑定 ：把 items 中的每一项元素遍历出来命名为 item 再和下面的 item 绑定-->
<!--事件绑定 ：自定义一个名为 diyremove 的事件，先和vue对象中的 removeItem 方法绑定
再去到组件中的 remove 和 diyremove 事件绑定-->
<!--注意 : 属性值都要小写，大写不生效，也不会报错 ； 在自定义事件绑定方法的时候 v-on 不能缩写-->
<list-items slot="list-items" v-for="(item,index) in l_items" :item="item" :index="index" v-on:diyremove="removeItem(index)"></list-items>

13. Ver-cli

13.1 O que é vue-cli

Um andaime fornecido oficialmente pelo vue-cli é usado para gerar rapidamente um modelo de projeto vue; a
estrutura de diretórios predefinida e o código básico são exatamente como quando criamos um projeto Maven, podemos optar por criar um projeto esqueleto. Este projeto esqueleto é o andaime . Nosso desenvolvimento é mais rápido;
principais funções:

  • Estrutura de diretório unificada
  • depuração local
  • Implantação a quente
  • teste de unidade
  • Embalagem integrada entra online

13.2 Ambiente necessário

  1. Baixe Node.js, selecione Windows de 64 bits
  2. Instale NodeJs e prossiga para a próxima etapa
  3. Para verificar se a instalação foi bem-sucedida, digite node -v em cmd e verifique se o número da versão pode ser impresso corretamente!
  • Instale o acelerador de imagem Node.js Taobao (cnpm)
  • Instale o vue-cli
（CMD 命令）
-g 就是全局安装
npm install cnpm -g --registry=https://registry.npm.taobao.org

# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org

O processo de instalação é um pouco lento.
O local de instalação é: C:\Users\Administered\AppData\Roaming\npm

（CMD 命令）
 cnpm install vue-cli -g	

vue list

imagem.png

13.3 Programa Vue-cli

  1. Use cmd na pasta para criar um projeto vue chamado myvue e empacotá-lo com a ferramenta de empacotamento webpack
  2. Inicialize e execute o projeto myvue
（CMD 命令）
 # 先找到要创建该文件的目录
 # 这里的 myvue 是项目名称，可以根据自己的需求起名
 vue init webpack myvue

imagem.png
Descrição:
1. Nome do projeto : Nome do projeto, basta pressionar Enter por padrão
2. Descrição do projeto : Descrição do projeto, basta pressionar Enter por padrão
3. Autor : Autor do projeto, basta pressionar Enter por padrão
4. Vue build : Compilar, escolha os primeiros 5 . Instalar vue-router
: Se deseja instalar o vue-router, selecione n para não instalar ( você precisará adicioná-lo manualmente mais tarde) 6. Use ESLint para limpar seu código : Se deseja usar ESLint para verificação de código, selecione n para não instalar (você precisará adicioná-lo manualmente mais tarde) Adicionar) 7. Configurar testes de unidade : relacionados ao teste de unidade, selecione n para não instalar (você precisará adicioná-lo manualmente mais tarde) 8. Configurar testes e2e com Nightwatch : relacionado ao teste de unidade , selecione n para não instalar (você precisa adicioná-lo manualmente mais tarde) 9. Devemos executar npm install para você após a criação do projeto : Inicialize diretamente após a conclusão da criação, selecione n, nós o executamos manualmente; execute o resultado !O arquivo gerado





imagem.png

（CMD 命令）
# 进入文件夹
cd myvue
# 安装环境
npm install --registry=https://registry.npm.taobao.org
# 启动项目
npm run dev
# 停止 ctrl + c

Depois de executar com sucesso
imagem.png

14. Webpack

14.1 O que é webpack

O Webpack pode ser visto como um empacotador de módulo estático : o que ele faz é analisar a estrutura do seu projeto, encontrar módulos JavaScript e outras linguagens de extensão que os navegadores não podem executar diretamente (Scss, TypeScript, etc.) e empacotá-los em pacotes apropriados. formato para uso pelos navegadores.

14.2 Por que usar webpack

Muitas páginas da web hoje podem ser consideradas aplicativos ricos em recursos, com código JavaScript complexo e um grande número de pacotes de dependências. Para simplificar a complexidade do desenvolvimento, muitas boas práticas surgiram na comunidade front-end

  1. A modularização nos permite refinar programas complexos em pequenos arquivos;
  2. Semelhante ao TypeScript, uma linguagem de desenvolvimento baseada em JavaScript: permite implementar funcionalidades que não podem ser utilizadas diretamente na versão atual do JavaScript, podendo posteriormente ser convertidas em arquivos JavaScript para que o navegador possa reconhecê-los;
  3. Pré-processadores CSS, como scss, menos...
    Essas melhorias realmente melhoraram muito nossa eficiência de desenvolvimento, mas os arquivos desenvolvidos usando-os geralmente requerem processamento adicional para serem reconhecidos pelo navegador, e o processamento manual é muito complicado. Isso fornece a necessidade do surgimento de ferramentas como WebPack.

14.3 Instalar o Webpack

WebPack é um carregador de módulo e ferramenta de empacotamento que pode processar e utilizar diversos recursos, como JS, JSX, ES 6, SASS, LESS, imagens, etc., como módulos.
Comando de instalação

（CMD 命令）
 npm install webpack -g --registry=https://registry.npm.taobao.org
 npm install webpack-cli -g --registry=https://registry.npm.taobao.org

Teste se a instalação foi bem-sucedida

webpack -v
webpack-cli -v

14.4 Configuração

Crie o arquivo de configuração webpack.config.js

  • entrada: arquivo de entrada, especifique qual arquivo o Web Pack usa como ponto de entrada do projeto
  • saída: saída, especifica WebPack para colocar os arquivos processados ​​no caminho especificado
  • módulo: módulo, usado para processar vários tipos de arquivos
  • plugins: plug-ins, como: atualização a quente, reutilização de código, etc.
  • resolver: Defina o caminho para apontar
  • watch: monitoramento, usado para empacotar diretamente após definir as alterações do arquivo
module.exports = {
  entry:"",
    output:{
    path:"",
      filename:""
  },
  module:{
    loaders:[
      {test:/\.js$/,;\loade:""}
    ]
  },
  plugins:{},
  resolve:{},
  watch:true
}

Execute diretamente o comando webpack para empacotar

14.5 Usando webpack

  1. Criar projeto: webpack-study
  2. Crie um diretório chamado módulos para colocar arquivos de recursos, como módulos JS
  3. Crie um arquivo de módulo em módulos: hello.js é usado para escrever código relacionado ao módulo JS
// 暴露一个方法
exports.sayHi = function(){
    
    
  document.write("<h1>Hello World</h1>");
}
  1. Crie um arquivo de entrada denominado main.js em módulos para definir o atributo de entrada ao empacotar.
// 引入 hello.js,相当于java的对象 
var hello = require("./hello");
// 调用 hello.js 中的方法
hello.sayHi();
  1. Crie o arquivo de configuração webpack.config.js (nota: ponto) no diretório webpack-study e use o comando webpack para empacotá-lo
// 把 module 导出
module.exports = {
    
    
  // 目标文件
  entry: './modules/main.js',
  // 输出地址
  output: {
    
    
    filename: "./js/bundle.js"
  }
}
  1. Empacote o arquivo que você acabou de escrever no diretório webpack-study

imagem.png

  1. Introduzido na página HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="dist/js/bundle.js"></script>


</body>
</html>
  1. abrir página
    imagem.png

15. roteador vue

15.1 Descrição

Vue Router é o gerenciador de roteamento oficial (path jump) do Vue.js. Ele está profundamente integrado ao núcleo do Vue.js, facilitando a construção de aplicativos de página única. Os recursos incluídos são:

  1. Tabelas de rota/visualização aninhadas
  2. Configuração de roteamento modular baseada em componentes
  3. Parâmetros de roteamento, consultas, curingas
  4. Veja o efeito de transição com base no sistema de transição Vue.js
  5. Controle de navegação refinado
  6. Links com classes CSS ativadas automaticamente
  7. Modo histórico HTML5 ou modo hash, rebaixado automaticamente no IE9
  8. Comportamento personalizado da barra de rolagem

15.2 Instalação

Teste e aprenda
cmd com base no primeiro vue-cli. Entre no diretório myvue e execute

可以用
cnpm install vue-router --save-dev
没成功
npm install vue-router --save-dev --registry=https://registry.npm.taobao.org

15.3 Uso

  1. Limpe o código, exclua as imagens do diretório src e os componentes do diretório de componentes. Modifique App.vue.
  2. Projeto de inicialização
  3. Modificar App.vue
  4. Crie um novo componente Vue em componentes: Content.vue
  5. Crie um novo componente Vue em componentes: Main.vue
  6. Crie um novo pacote (roteador) em src e crie um novo arquivo no pacote: index.js
  7. Modifique main.js
  8. Modifique a parte do modelo em App.vue
  9. abrir página
    imagem.png
    imagem.png
    imagem.png
<template>
  <div id="app">
  </div>
</template>
<script>
  export default {
    name: "App"
  }
</script>
<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

<template>
  <div id="app">
    <h1>呵呵</h1>
  </div>
</template>

O projeto descoberto é automaticamente Bulid e a página é atualizada automaticamente.Esta
é a implantação quente do Vue.

<template>
  <h1>Content</h1>
</template>
<script>
  export default {
    name: "Content"
  }
</script>
<!-- 加上 scoped 表示只会在当前组件生效 -->
<style scoped>
</style>

<template>
  <h1>首页</h1>
</template>
<script>
  export default {
      
      
    name: "main"
  }
</script>
<style scoped>
</style>

// 导入文件
import Vue from "vue";
import VueRouter from "vue-router";
// 导入组件
import Content from "../components/Content";
import Main from "../components/Main";

// 安装路由
Vue.use(VueRouter);

// 配置导出路由
export default new VueRouter({
    
    
  routes: [
    {
    
    
      // 类似于 @RequestMapping 接收一个请求，返回一个页面
      // 路由的路径
      path: '/content',
      // 配置名称
      name: 'content',
      // 跳转的组件
      component: Content
    },
    {
    
    
      // 路由的路径
      path: '/main',
      // 配置名称
      name: 'Main',
      // 跳转的组件
      component: Main
    }
  ]
});

import Vue from 'vue'
import App from './App'
// 导入 vue-router 的路由配置
// 这里是写在 index.js 文件中的所以导入该文件
// 因为文件名是 index 会自动扫描该文件，所以index可省
// 注意！！ 这里必须写 router ，写错前端页面就报错
import router from "./router/index";

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    
    
  el: '#app',
  // 配置路由,上面的组件名
  router,
  components: {
    
     App },
  template: '<App/>'
})

<template>
  <div id="app">
    <h1>呵呵</h1>
    <!--跳转链接，点击链接显示对应内容-->
    <!--类似于原来的 <a></a> ;
    to 类似于原来的 href,后面的值就是配置的路由-->
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <!--展示视图，理解为用于展示上面两个链接对应内容的区域-->
    <router-view></router-view>
  </div>
</template>

16. Vue + Element UI

  1. Crie um projeto chamado vue-elementuivue init webpack vue-elementui
  2. Instale quatro plug-ins: vue-router, element-ui, sass-loader, node-sass
# 进入工程
cd vue-elementui
# 安装 vue-router
cnpm install vue-router --save-dev 
# 安装 element-ui
cnpm i element-ui -S 
# 安装依赖
cnpm install 
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev


测试报错：
cnpm install --save vue-hot-reload-api
  1. Restaure o projeto para um projeto vazio, exclua logo.png e HelloWorld.vue em src e modifique App.vue da seguinte forma:
<template>
 </template>
 <script>
 export default {
      
      
   name: 'App'
 }
 </script>
 <style>
 #app {
      
      
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
 }
 </style>
  1. Crie uma nova pasta roteador: armazene informações de roteamento
    visualizações: armazene
    componentes de visualização de componentes: armazene componentes funcionais
    imagem.png
  2. Crie um novo componente de visualização no pacote de visualizações: Main.vue
<template>
  <h1>首页</h1>
</template>
<script>
  export default {
    name: "Main"
  }
</script>
<style scoped>
</style>
  1. Crie um novo componente de visualização no pacote de visualizações: Login.vue
<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },

        // 表单验证，需要在 el-form-item 元素中增加 prop 属性
        rules: {
          username: [
            {required: true, message: '账号不可为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ]
        },

        // 对话框显示和隐藏
        dialogVisible: false
      }
    },
    methods: {
      onSubmit(formName) {
        // 为表单绑定验证功能
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
            this.$router.push("/main");
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>
  1. Escreva as informações de configuração de roteamento no arquivo do roteador: index.js
import Vue from 'vue';
import VueRouter from "vue-router";

import Main from "../views/Main";
import Login from "../views/Login";

// 显式的使用导入的组件
Vue.use(VueRouter);

export default new VueRouter({
    
    
  routes: [
    {
    
    
      path: "/login",
      name: "login",
      component: Login
    },{
    
    
      path: "/main",
      name: "main",
      component: Main
    }
  ]
});
  1. Modifique main.js
import Vue from 'vue'
import App from './App'
import router from './router'
// 导入 elementUI
import ElementUI from 'element-ui'
// 导入 elementUI 对应的 CSS
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(router)
Vue.use(ElementUI)

new Vue({
    
    
  el: '#app',
  // 配置 elementUI
  render: h => h(App),
  router
})
  1. Modificar App.vue
<template>
  <div id="app">
    <!-- 因为 main.js 中配置了，element-ui 自动渲染，所以这里只需要有一个这个标签就好了 -->
    <router-view></router-view>
  </div>
</template>x
  1. Se um erro for relatado ao iniciar o projeto , tente fazer o downgrade da versão do sass-loader. Encontre o arquivo package.json,
    imagem.png
    encontre o atributo sass-loader,
    imagem.png
    altere o número da versão subsequente para ^7.3.1
    e reinstale as dependências do ambiente.npm install
  2. Basta digitar seu nome de usuário e senha, fazer login e descobrir que você vai para a página inicial para visualizar o código Login.vue , que está em <script>< /script>
    imagem.png

As etapas de instalação são as mesmas de antes

Reinicie o projeto e visite http://localhost:8080/#/login
imagem.png

17. Aninhamento de rota

  • O roteamento aninhado também é chamado de sub-roteamento. Em aplicações práticas, geralmente é composto de múltiplas camadas de componentes aninhados, como:
    imagem.png
  1. Crie um novo pacote de usuário nas visualizações
  2. No pacote do usuário, crie um novo List.vue
<template>
  <h1>用户列表</h1>
</template>
<script>
  export default {
    name: "List"
  }
</script>
<style scoped>
</style>
  1. No pacote do usuário, crie um novo Profile.vue
<template>
  <h1>个人信息</h1>
</template>
<script>
  export default {
    name: "Profile"
  }
</script>
<style scoped>
</style>
  1. Modifique Main.vue e adicione uma barra lateral
<template>
  <div>
  <el-container>
  <el-aside width="200px">
  <el-menu :default-openeds="['1']">
  <el-submenu index="1">
  <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
  <el-menu-item-group>
  <el-menu-item index="1-1">
  <!--插入的地方-->
  <router-link to="/user/profile">个人信息</router-link>
  </el-menu-item>
  <el-menu-item index="1-2">
  <!--插入的地方-->
  <router-link to="/user/list">用户列表</router-link>
  </el-menu-item>
  </el-menu-item-group>
  </el-submenu>
  <el-submenu index="2">
  <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
  <el-menu-item-group>
  <el-menu-item index="2-1">分类管理</el-menu-item>
  <el-menu-item index="2-2">内容列表</el-menu-item>
  </el-menu-item-group>
  </el-submenu>
  </el-menu>
  </el-aside>

  <el-container>
  <el-header style="text-align: right; font-size: 12px">
  <el-dropdown>
  <i class="el-icon-setting" style="margin-right: 15px"></i>
  <el-dropdown-menu slot="dropdown">
  <el-dropdown-item>个人信息</el-dropdown-item>
  <el-dropdown-item>退出登录</el-dropdown-item>
  </el-dropdown-menu>
  </el-dropdown>
  </el-header>
  <el-main>
  <!--在这里展示视图-->
  <router-view />
  </el-main>
  </el-container>
  </el-container>
  </div>
  </template>
  <script>
  export default {
    
    
  name: "Main"
}
  </script>
  <style scoped lang="scss">
  .el-header {
    
    
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
.el-aside {
    
    
  color: #333;
}
</style>
  1. Modifique index.js, informações de roteamento
import Vue from 'vue';
import VueRouter from "vue-router";

import Main from "../views/Main";
import Login from "../views/Login";

import List from "../views/user/List";
import Profile from "../views/user/Profile";

// 显式的使用导入的组件
Vue.use(VueRouter);

export default new VueRouter({
    
    
  routes: [
    {
    
    
      path: "/login",
      name: "login",
      component: Login
    },{
    
    
      path: "/main",
      name: "main",
      component: Main,
      // 嵌套路由
      children: [
        {
    
    
          path: "/user/profile",
          component: Profile
        },{
    
    
          path: "/user/list",
          component: List
        }
      ]
    }
  ]
});
  1. Insira o link de roteamento em Main.vue para exibir a visualização
    imagem.png
    imagem.png
  • Existem dois modos para modificar o roteamento : 1. hash: # no caminho; 2. histórico: modifique o arquivo index.js sem # no caminho
    imagem.png
  1. abrir página
    imagem.png

18. Passagem e redirecionamento de parâmetros

18.1 Passando parâmetros pela rota

  1. Modifique a tag <router-link> do front-end
    imagem.png
  2. Modifique as informações de roteamento em index.js
    imagem.png
  3. Retire os parâmetros da página front-end e modifique: Profile.vue.Observe que é rota, não roteador.
    imagem.png
  4. abrir página
    imagem.png

18.2 Passando parâmetros por meio de adereços

  • Exibir nome de usuário após a conclusão do login
  1. Login.vue modificadoimagem.png
  2. Modifique index.js
    imagem.png
  3. Aquisição da página inicial: Main.vue
    imagem.png

18.3 Redirecionamentos

  1. Modifique index.js e adicione informações de redirecionamento
    imagem.png
  2. Main.vue modificado
    imagem.png
  3. abrir página

imagem.png

19. 404 e ganchos de roteamento

19.1 404

  1. Crie um novo componente de visualização: 404.vue
  2. Configure o componente 404 em informações de roteamento: index.js
    imagem.png
  3. Inicie a página e acesse um caminho inexistente à vontade
<template>
  <div>
    <h1>404,页面走丢了！</h1>
  </div>
</template>
<script>
  export default {
    name: "404"
  }
</script>
<style scoped>
</style>

imagem.png

19.2 Ganchos de roteamento

1. Uso básico

  • beforeRouteEnter: gancho executado antes de entrar na rota
  • beforeRouteLeave: gancho executado antes de sair da rota
  1. Modificar perfil.vue
    imagem.png
  2. abrir página
  • Descrição do parâmetro :
    • to: As informações do caminho para o qual a rota irá saltar
    • from: informações do caminho antes do salto do caminho
    • próximo: parâmetros de controle de roteamento
      • next() salta para a próxima página
      • next('/path') altera a direção de salto da rota para que ela salte para outra rota
      • next(false) retorna à página original
      • next((vm)=>{}) está disponível apenas em beforeRouteEnter, vm é a instância do componente

2. Use solicitações assíncronas em funções de gancho

  1. Instale o Axios
  2. main.js faz referência a Axios
  3. Para preparar os dados, apenas os arquivos do nosso diretório estático podem ser acessados, então colocamos os arquivos estáticos neste diretório. Crie uma nova pasta simulada (dados de teste) em estática e crie um novo data.json
  4. Faça uma solicitação assíncrona em beforeRouteEnter e modifique Profile.vue
  5. Acesse o console da página /user/profile e produza os dados obtidos.
cnpm install --save vue-axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

{
    
    
  "name": "呵呵",
  "url": "https://blog.csdn.net/weixin_44449838",
  "page": 123,
  "isNonProfit": true,
  "address": {
    
    
    "street": "塔克拉玛干沙漠",
    "city": "新疆",
    "country": "中国"
  },
  "links": [
    {
    
    
      "name": "Google",
      "url": "http://www.google.com"
    },
    {
    
    
      "name": "Baidu",
      "url": "http://www.baidu.com"
    }
  ]
}

export default {
    
    
  //第二种取值方式
  // props:['id'],
  name: "UserProfile",
  //钩子函数 过滤器
  beforeRouteEnter: (to, from, next) => {
    
    
    //加载数据
    console.log("进入路由之前")
    next(vm => {
    
    
      //进入路由之前执行getData方法
      vm.getData()
    });
  },
  beforeRouteLeave: (to, from, next) => {
    
    
    console.log("离开路由之前")
    next();
  },
  //axios
  methods: {
    
    
    getData: function () {
    
    
      this.axios({
    
    
        method: 'get',
        url: 'http://localhost:8080/static/mock/data.json'
      }).then(function (response) {
    
    
        console.log(response)
      })
    }
  }
}

Acho que você gosta

Origin blog.csdn.net/qq_53517370/article/details/128875793
Recomendado
Clasificación
Diario
Más
2024-06-16(0)
2024-06-15(0)
2024-06-14(0)
2024-06-13(0)
2024-06-12(0)
2024-06-11(0)
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)

Code World

© 2018 codetd.com