Introdução ao Vue e construção de ambiente

Um aplicativo de página única (SPA) é um aplicativo da web que carrega uma única página HTML e atualiza dinamicamente essa página conforme o usuário interage com o aplicativo

O navegador carregará o HTML, CSS e JavaScript necessários no início. Todas as operações são concluídas nesta página e controladas por JavaScript.

Portanto, o desenvolvimento e o design modular são muito importantes para aplicações de página única.

vantagem:

Proporciona uma experiência de usuário mais envolvente: com o imediatismo dos aplicativos de desktop e a execução e acessibilidade dos sites
As alterações no conteúdo de um aplicativo de página única não exigem o recarregamento da página inteira, tornando o aplicativo da web mais responsivo e envolvente
Os aplicativos de página única não precisam alternar entre as páginas, portanto não haverá "fenômeno de tela branca", nem animação suspensa e fenômeno de "oscilação".
Os aplicativos de página única têm menos pressão sobre o servidor do que o servidor, o servidor só precisa gerar dados, sem se preocupar com a lógica de exibição e a síntese da página, e a capacidade de transferência será aumentada várias vezes.
Boa separação frontal e traseira. O back-end não é mais responsável pela renderização do modelo e pela saída da página. A API de back-end é universal, ou seja, o mesmo conjunto de códigos de programa de back-end pode ser usado para vários clientes, como interfaces web, telefones celulares e comprimidos sem modificação.

Desenvolvimento de componentes Vue

O desenvolvimento baseado em componentes é um dos recursos mais poderosos do Vue. Os programadores usam pequenos componentes independentes e reutilizáveis para construir aplicativos em grande escala, tornando o desenvolvimento mais rápido e ágil.

Aumente a capacidade de manutenção.

A componenteização, como o nome sugere, extrai código duplicado e o mescla em componentes e em pequenas unidades.

O mais importante sobre os componentes é a reutilização. Eles estão localizados na parte inferior do framework. Todas as outras funções dependem de componentes e podem ser usadas por diferentes funções.

Vários componentes podem ser combinados em uma biblioteca de componentes, os componentes também podem ser aninhados e pequenos componentes podem ser combinados em componentes grandes.

Faça bom uso do desenvolvimento baseado em componentes para desenvolver uma página, como blocos de construção, unindo os vários componentes e, finalmente, integrando-os para formar um sistema completo.

O uso do desenvolvimento baseado em componentes pode reduzir o acoplamento de todo o sistema e substituir diferentes componentes para concluir rapidamente os requisitos, mantendo a interface inalterada.

No desenvolvimento de componentes, todo o sistema é combinado por meio de componentes. Quando ocorre um problema, o componente pode ser removido diretamente por meio de solução de problemas ou o problema pode ser localizado rapidamente com base no componente que relatou o erro. Devido ao baixo acoplamento entre cada componente e à sua responsabilidade única, a lógica será mais simples do que analisar todo o sistema, permitindo um posicionamento rápido.

Como cada componente tem uma responsabilidade única e os componentes são reutilizados no sistema, a otimização junto com o código pode alcançar uma atualização geral do sistema e melhorar a capacidade de manutenção do sistema.

Node.js completa funções de servidor

Quando o Chrome foi lançado em 2008, a execução eficiente de seu mecanismo JavaScript V8 chamou a atenção de Ryan Dahl. Em 2009, Ryan usou o mecanismo V8 do Chrome para criar uma estrutura de E/S assíncrona baseada no loop de eventos - nasceu o Node.js.

Características:

Estrutura de E/S assíncrona baseada em loop de eventos, que pode melhorar o rendimento de E/S

A operação de thread único pode evitar o problema de sincronização de variáveis multithread

JavaScript pode ser usado para escrever código de back-end, e as linguagens de programação de front-end e back-end são unificadas.

ElementUI implementa efetivamente a interface

Use ElementUI para implementar a página de gerenciamento em segundo plano

Usado em combinação com Vue

Layout Flexbox e SASS

Caixa flexível é um novo modo de layout do css3

(Flexible Box) é um método de layout que garante que os elementos tenham comportamento adequado quando a página precisar se adaptar a diferentes tamanhos de tela e tipos de dispositivos.

Emparelhado com SASS, é mais fácil de manter.

2. Componentes Vue

1. Registre globalmente os componentes

Componentes: No Vue, os componentes são unidades estruturais independentes que constituem a página. Os componentes existem principalmente na forma de estrutura da página. Diferentes componentes também possuem funções interativas básicas.

Recursos do componente:

Pode reduzir a escrita de códigos duplicados e melhorar a eficiência do desenvolvimento.

Reduza o grau de acoplamento entre códigos e torne o projeto mais fácil de manter e gerenciar

Implemente funções de projeto complexas com base na lógica de negócios

Use Vue.component para definir componentes globais. O formato de definição de componente global é o seguinte:

Vue.component(
          “[组件名]”,

          {       data:function()

                  {//“:function”可以省略
                          return{  name:”[值]”  }
                  },
                  template:”[组件内容]”
          }
)

O primeiro parâmetro é o nome do componente de definição.

O segundo parâmetro data deve ser uma função que retorna os dados do componente.

O terceiro parâmetro define o conteúdo do componente.

por exemplo:

Vue.component(
          “my-component”,

          {       data ()

                  {
                         return{  name:”One”  }

                  },

                  template:”<div>我是全局组件{
   
   {name}}</div>”
          }
)

Caso:

<div id="app">
      <my-component></my-component >
      <my-component></my-component >
      <my-component></my-component >
  </div>
  <script>
      Vue.component(
      'my-component',
      {	data ()
        { 
          return{  count:0  }
        },
        template:'<button v-on:click="count++">被单击{
   
   {count}}次</button>'
      }
  )
  var vm=new Vue({el:'#app'})
  </script>

2. Componentes parcialmente registrados

Registrar componentes locais: Os componentes de registro local são implementados por meio do atributo de componentes da instância Vue.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
        <my-component></my-component >
    </div>
  <script>
      var com1={
        template:'<p>我是vm实例中的局部组件</p>'//com1对象定义了组件的内容
      }
      var vm=new Vue({
        el:'#app',
        //注册局部组件
        components:{myComponent:com1}
//myComponent是自定义组件的名字。com1是一个对象
      }
      )
  </script>  
  </body>
</html>

3. modelo (altamente recomendado)

Modelo de modelo: Vue fornece a tag <template> para definir um modelo estrutural. Você pode escrever código HTML nesta tag e, em seguida, vinculá-lo ao atributo de modelo no componente por meio do valor id. Este método facilita a gravação de cópias funcionais eficientemente.

Como os componentes são escritos dessa maneira, dicas e destaques de código podem ser exibidos no compilador, o que não apenas melhora a experiência de desenvolvimento, mas também melhora a eficiência do desenvolvimento.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{
   
   {title}}</p>
      <my-component></my-component >
  </div>

  <template id="tmp1">
    <p>{
   
   {title}}</p>
  </template>
  <script>
      Vue.component(
      'my-component',
      {	
        template:'#tmp1',
        data ()
        { 
          return{  
            title:'我是组件内的title',
            }
        },
      }
  )
  var vm=new Vue({el:'#app',
      data:{
        title:'我是vm实例的title'
      }
})
  </script>  
  </body>
</html>

4. Transferência de dados entre componentes

Dependências entre componentes: Algumas ferramentas podem ser usadas para transferir dados entre componentes pais (ou contêineres pais) e componentes filhos.

Caso: O subcomponente props recebe os dados passados pelo contêiner pai.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
        <Child name="八佰"></Child>
        <Child name="花木兰"></Child>
        <Child name="姜子牙"></Child>
    </div>
    <script>
        //'Child'是子组件
        Vue.component('Child',{
            props:['name'],
            //下面是子组件的内容
            template:
            `<div style="color:blue;font-size:30px;">
                今日上映电影:{
   
   {name}}
             </div>`
        })
        var vm=new Vue({
            el:'#app'
        })
    </script>  
  </body>
</html>

$emit transfere valor: $emit pode transferir o valor do componente filho de volta para o contêiner pai. $emit pode acionar eventos definidos no componente pai, e as informações de dados do componente filho são completadas passando parâmetros.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
        <Parent></Parent>
    </div>
//定义子组件模板
    <template id="child">
        <div>
            <button @click="click">Send</button>
            <input type="text" v-model="message">
        </div>
    </template>
    <script>
       //'Parent'是父组件
    //父组件定义事件处理函数transContent，并接收payload参数
        Vue.component('Parent',{
            template:
            `<div>
                <Child @childFn="transContent"></Child>
                子组件传来的值：{
   
   {message}}
             </div>`,
            data(){
                return{
                    message:''
                }
            },
            methods:{
                transContent(playload){
                    this.message=playload
                }
            }
        })
        //Child组件
//触发父组件中绑定的childFn事件，并传递子组件中的message数据
        Vue.component('Child',{
            template:'#child',
            data(){
                return{
                    message:'子组件的消息'
                }
            },
            methods:{
               click(){
                    this.$emit('childFn',this.message);
                }
            }
        })
        var vm=new Vue({
            el:'#app'
        })
    </script>  
  </body>
</html>

5. Troca de componentes

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
        <a href="#"@click.prevent="flag=true">登录</a>
        <a href="#"@click.prevent="flag=false">登录</a>
        <login v-if="flag">
        </login>
        <register v-else="flag"></register>
    </div>
    <script>
        Vue.component('login',{
            template:'<div>登录页面</div>'
        })
        Vue.component('register',{
            template:'<div>注册页面</div>'
        })
        var vm=new Vue({
            el:'#app',
            data:{flag:true}
        })
    </script>  
  </body>
</html>

Página inicial e ao clicar para fazer login:

Ao clicar para se cadastrar:

A troca de componentes também pode ser obtida por meio do atributo is do componente, usando o atributo is para corresponder ao nome do componente.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
        <a href="#"@click.prevent="comName='login'">登录</a>
        <a href="#"@click.prevent="comName='register'">注册</a>
        <component v-bind:is="comName"></component>
    </div>
    <script>
        Vue.component('login',{
            template:'<div>登录页面</div>'
        });
        Vue.component('register',{
            template:'<div>注册页面</div>'
        });
        var vm=new Vue({
            el:'#app',
            data:{comName:''}
        })
    </script>  
  </body>
</html>

3. Construção do ambiente Vue

1. O pré-requisito para instalar o Vue é instalar o node.js

下载链接: Baixar | Node.js Node.js® é um tempo de execução de JavaScript desenvolvido no mecanismo JavaScript V8 do Chrome. https://nodejs.org/en/download/

Eu escolhi 64 bits no formato zip

Após descompactar, clique duas vezes para instalar e continue até que a instalação seja concluída. Não há nada de especial.

(Você também pode baixar diretamente os recursos que carreguei)

https://download.csdn.net/download/pzcxl/87849399 https://download.csdn.net/download/pzcxl/87849399

Após a instalação ser bem-sucedida, configure as variáveis de ambiente do nó (Este PC -> Propriedades -> Configurações avançadas do sistema -> Variáveis de ambiente), edite o caminho da variável do sistema e clique em Novo para inserir o caminho de instalação do nó
.

Depois que o ambiente for configurado com sucesso, cmd abre a interface do prompt de comando, digite node -v e npm -v para verificar se a instalação foi bem-sucedida.

2. Instale o andaime vue

O andaime é oficial, o comando de instalação é:

①npm i -g @vue/cli (instalar andaimes)

②npm i -g @vue/cli-init (compatível com 2.0 (suporta npm run dev e outros comandos))

③Depois de instalar os dois acima, configure as variáveis de ambiente do vue, encontre o diretório vue.cmd (se você esquecer onde está instalado, você pode pesquisar em todo o disco), copie o caminho e adicione a variável de ambiente ao caminho, como mostrado abaixo:

④Continue digitando no prompt de comando: vue --version ou vue -V para visualizar a versão atual. do seguinte modo

3. Crie um novo projeto vue no código do visual studio

1. Crie um arquivo vazio em seu computador para armazenar o projeto vue (no vue, o nome do projeto não pode conter caracteres chineses, letras maiúsculas ou símbolos especiais. O nome do projeto pode estar em letras minúsculas e separado por travessões)

2.打开Visual Studio Code软件（去官网下载就可以Visual Studio Code - Edição de código. Redefinido Visual Studio Code é um editor de código redefinido e otimizado para construir e depurar aplicativos modernos da web e da nuvem. O Visual Studio Code é gratuito e está disponível em sua plataforma favorita – Linux, macOS e Windows. https://code.visualstudio.com/）

Clique em Arquivo->abrir pasta->
selecione a nova pasta vazia, clique em OK e clique nas teclas ctrl+shift+~ ao mesmo tempo para abrir a janela do terminal e digite vue init webpack [nome do projeto]

3. Aparecerá após o sucesso? Nome do projeto [nome do projeto]

4. Clique na tecla Enter e você será solicitado a selecionar algumas opções, basta pressionar Enter para finalizar todas.

Aguarde o download ser concluído, pode demorar muito, não se apresse

5. A seguinte página aparece, indicando que o projeto foi criado com sucesso. A seguinte estrutura do projeto aparece no canto superior esquerdo, e você pode desenvolver o projeto vue.

Conforme mostrado na imagem acima, vue.js precisa ser baixado do site oficial. As etapas são as seguintes:

4. Baixe o código-fonte do arquivo vue.js

1. Clicamos no link abaixo para acessar vue.jso site oficial, vue.jso endereço do link do site oficial: https://cn.vuejs.org https://cn.vuejs.org/ 2. Após entrar no site oficial, selecione o documento vue 2 文档, conforme mostrado na figura abaixo:

3. Após entrar na página inicial do Vue 2, clique no botão Iniciar.

4. Na vue 2página, deslize o mouse para baixo até ver <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>, conforme mostrado abaixo Mostrar

5. Abra uma nova janela do navegador e copie o srcarquivo js(como https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js ) para a barra de endereço da janela, conforme mostrado na figura abaixo :

6. Clique Ctrl+A para copiar tudo, cole no novo arquivo vue.js e salve-o.

Depois de concluir as etapas acima, vamos experimentar o programa agora mesmo.

3. Programa Vue em execução

1. Crie uma nova página index.html e insira o vue.js recém-criado agora

O código completo é o seguinte:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue2023test</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
      <my-component></my-component >
      <my-component></my-component >
      <my-component></my-component >
  </div>
  <script>
      Vue.component(
      'my-component',
      {	data ()
        { 
          return{  count:0  }
        },
        template:'<button v-on:click="count++">被单击{
   
   {count}}次</button>'
      }
  )
  var vm=new Vue({el:'#app'})
  </script>  
  </body>
</html>

2. Clique no botão Executar e Depurar à esquerda

3. Após selecionar o navegador, você poderá ver a página

Esses três botões não têm influência um sobre o outro. Clicar cada vez aumentará o número de cliques em um.

O texto acima é a introdução do Vue, configuração do ambiente e execução do primeiro programa.

Se houver algum erro, espero que todos possam me criticar e corrigir, e não hesitarei em ensiná-los.