[Vue] Domine rapidamente o uso básico do Vue

1, visão geral do vue

Vue (pronuncia-se /vju/, semelhante a view) é uma estrutura JavaScript progressiva para construção de interfaces de usuário, lançada 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

Site oficial: https://cn.vuejs.org/v2/guide/

Vantagens do vue.js

1. pequeno volume

   33K após compactação

2. Maior eficiência operacional

   Baseado em dom virtual, uma tecnologia que pode realizar vários cálculos através de JavaScript com antecedência para calcular e otimizar a operação final do dom. Como essa operação do dom é pré-processada e não opera realmente o dom, ela é chamada de dom virtual.

3. Vinculação de dados bidirecional

   Isso libera os desenvolvedores da necessidade de manipular objetos DOM e dedicar mais energia à lógica de negócios.

4. Ecologia rica e baixo custo de aprendizagem

   Há um grande número de estruturas de UI maduras e estáveis ​​e componentes comumente usados ​​baseados em vue.js no mercado, que podem ser usados ​​imediatamente para alcançar um desenvolvimento rápido!

   Amigável para iniciantes, fácil de começar e muitos materiais de aprendizagem

vue.js – uma habilidade obrigatória para desenvolvedores front-end

1. Ampla variedade de cenários de uso

   É amplamente utilizado no desenvolvimento de aplicativos web, móveis e multiplataforma.

2. O mercado de recrutamento tem grande procura e boas perspetivas

2. Sistema de conhecimento front-end

2.1. 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.

2.2. Camada de estrutura (html)

Você pode ler meu blog anterior: [Três elementos de front-end] Explicação detalhada em HTML

2.3. Camada de apresentação (css)

Você pode ler meu blog anterior: [Três elementos de front-end] Início rápido com CSS

2.4. Camada de comportamento (JavaScript)

Você pode ler meu blog anterior: [Três elementos de front-end] Introdução ao JavaScript

4. O primeiro programa vue

4.1. O que é MVVM?

MVVM (Model-View-ViewModel) é um padrão de design de arquitetura de software. É um método de programação orientado a eventos que simplifica a interface do usuário .

MVVM se origina do padrão clássico MVC (Model-View-Controller). O núcleo do MVVM é a camada ViewModel, que é responsável por converter objetos de dados no Modelo para facilitar o gerenciamento e 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 descendentemente com a camada do modelo por meio de solicitações de interface

MVVM é bastante maduro. Os principais casos de uso não estão apenas no desenvolvimento de aplicações web. As estruturas MVVM atualmente populares incluem VUE.js e AngularJS, etc.

4.2. Por que usar MVVM?

O padrão MVVM é igual ao padrão MVC. O objetivo principal é separar a visualização e o modelo. Ele tem vários benefícios:

• acoplamento baixo

  A visualização pode ser alterada e modificada independentemente do modelo. Um ViewModel pode ser vinculado a diferentes visualizações. Quando a visualização é alterada, o modelo pode permanecer inalterado e, quando o modelo é alterado, a visualização 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 membros de desenvolvimento 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

4.3. Implementador do padrão MVVM – vue

• Modelo: Camada de modelo, onde os objetos JavaScript são representados

• View: Camada de visualização, aqui representa DOM (elemento de operação 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 mudanças nos dados e atualizar o conteúdo correspondente à visualização

• ViewModel pode monitorar alterações na visualização e notificar os dados sobre alterações.

Neste ponto, entendemos que vue é um implementador de MVVM e seu núcleo é implementar monitoramento DOM e vinculação de dados.

4.4. O primeiro programa vue

Para alunos que não têm nenhum conhecimento básico, você pode primeiro ler meu outro blog, que é considerado conhecimento preparatório. Claro, você pode continuar acompanhando este blog e descer [Vue] Alguns conhecimentos de front-end que você precisa saber antes de aprender Vue

1. Idea instala plug-in vue

   

2. Crie um novo projeto em branco Vue

3. Adicione um novo arquivo demo01.html

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Title</title>
   </head>
   <body>
   
   <!-- view层 模板 -->
   <div id="app">
       <h2>{
        
        {message}}</h2>
   </div>
   
   <!-- 1. 导入vue.js -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
   <script>
       var vm = new Vue({
           
           
           el:"#app",
           // Model 数据
           data:{
           
           
               message:"hello,vue"
           }
       });
   </script>
   </body>
   </html>
   

4. Abrir com navegador

   

5. Modificação do console do navegador

   vm.message='zyy'
   

   Descobri que a página também foi modificada

   

Basicamente, Vue.js é um sistema que permite a renderização declarativa de dados no DOM usando uma sintaxe de modelo concisa.

Oito funções de gancho de ciclo de vida

função	Duração da chamada
antes de criar	Chamado antes da instância vue ser inicializada
criada	Chamado após a inicialização da instância vue
antes de montar	Chamado antes de montar na árvore dom
montado	Chamado após a montagem na árvore dom
antes da atualização	Chamado antes da atualização de dados
Atualizada	Chamado após a atualização dos dados
antesDestruir	Chamado antes que a instância vue seja destruída
destruído	Chamado após a instância vue ser destruída

5. Sintaxe básica básica do vue

5.1、v-bind

Além da interpolação de texto, também podemos vincular atributos de elementos como este

<div id="app">
  <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div>

var vm = new Vue({
    
    
    el: "#app",
    // Model 数据
    data: {
    
    
        message:  message:"hello Vue!"
    }
});

Aqui encontramos algo novo. Os atributos que você vê v-bindsão chamados de diretivas . As diretivas são prefixadas v-para indicar que são atributos especiais fornecidos pelo Vue. Como você deve ter adivinhado, eles aplicam um comportamento responsivo especial ao DOM renderizado. Aqui, o significado desta instrução é: "Mantenha titleo atributo deste nó de elemento messageconsistente com a propriedade da instância Vue."

Se você abrir novamente o console JavaScript do navegador e digitar vm2.message = '新消息', verá novamente que o titleHTML vinculado ao atributo foi atualizado.

5.2、v-se…v-else-if…v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
  <h v-if="ok">Yes</h>
  <h v-else>No</h>

  <h v-if="type==='A'">A</h>
  <h v-else-if="type==='B'">B</h>
  <h v-if="type==='C'">C</h>
  <h v-else>D</h>
</div>

<!--  1. 导入vue.js  -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<script>
  var vm = new Vue({
      
      
    el:"#app",
    data:{
      
      
      ok: true,
      type: 'A'
    }
  });
</script>
</body>
</html>

5.3、v-para

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <li v-for="(item,index) in items">
        {
   
   {item.message}}--{
   
   {index}}
    </li>
</div>

<!--  1. 导入vue.js  -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<script>
  var vm = new Vue({
      
      
    el:"#app",
    data:{
      
      
        items: [
            {
      
      message: "Genius Sue"},
            {
      
      message: "Genius"},
        ]
    }
  });
</script>
</body>
</html>

6. Evento de ligação vue

6.1、v ligado

<!DOCTYPE html>
<head xmlns:v-on="http://www.w3.org/1999/xhtml">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- view层 模板 -->
<div id="app">
    <button v-on:click="sayHello">点击</button>
</div>


<!-- 1. 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    var vm = new Vue({
      
      
        el: "#app",
        data: {
      
      
        },
        methods: {
      
      //方法必须定义在vue methods对象中
            sayHello: function () {
      
      
                alert("hello");
            }
        }
    });
</script>

</body>
</html>

7. Ligação bidirecional Vue

A vinculação de dados bidirecional significa que quando os dados mudam, a visão muda, e quando a visão muda, os dados também mudam de forma síncrona.

7.1、modelo v

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    输入的文本：<input type="text" v-model="message">{
   
   {message}}
</div>

<!--  1. 导入vue.js  -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
  var vm = new Vue({
      
      
    el:"#app",
    data:{
      
      
        message: "Genius Sue"
    }
  });
</script>
</body>
</html>

<!DOCTYPE html>
<head xmlns:v-model="http://www.w3.org/1999/xhtml">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    性别：
    <input type="radio" value="1" name="sex" v-model="Genius">男
    <input type="radio" value="2" name="sex" v-model="Genius">女
    <p>选中了{
   
   {Genius}}</p>
</div>

<!-- 1. 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    var vm = new Vue({
      
      
        el: "#app",
        data: {
      
      
            "Genius":""
        }
    });
</script>

</body>
</html>

8. Explicação dos componentes vue

Componentes são Vueinstâncias reutilizáveis. Para ser franco, eles são um conjunto de modelos que podem ser reutilizados.

8.1、Vue.componente

1. Use componentes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
   <sue>6</sue>
</div>

<!--  1. 导入vue.js  -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    /*定义一个Vue组件component
    注意这里的组件名不能用驼峰命名，只能是小写并且不能空格
    */
    Vue.component("sue",{
      
      
        "template": '<li>Hello</li>'
    });

  var vm = new Vue({
      
      
    el:"#app",
    data:{
      
      

    }
  });
</script>
</body>
</html>

2. Passe adereços

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--  组件：传递给组件中的值：props  -->
   <sue v-for="item in items" v-bind:Genius="item"></sue>
</div>

<!--  1. 导入vue.js  -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    //定义一个Vue组件component
    Vue.component("sue",{
      
      
        props:['Genius'],
        "template": '<li>{
      
      {Genius}}</li>'
    });

  var vm = new Vue({
      
      
    el:"#app",
    data:{
      
      
        items:["Java","Linux","前端"]
    }
  });
</script>
</body>
</html>

9. Comunicação assíncrona Axios

Axios é uma biblioteca de solicitação de rede baseada em promessas que funciona em node.jsnavegadores. É isomórfico (ou seja, o mesmo código pode ser executado no navegador e no node.js). Ele usa httpmódulos node.js nativos no lado do servidor e XMLHttpRequests no lado do cliente (navegador).

característica

• Crie XMLHttpRequests a partir do navegador
• Crie uma solicitação http de node.js
• API de promessa de suporte
• Interceptar solicitações e respostas
• Transforme dados de solicitação e resposta
• Cancelar pedido
• Converta dados JSON automaticamente
• Cliente oferece suporte à defesa contra XSRF

Crie um novo arquivo data.json

{
    
    
  "name": "狂神说Java",
  "url": "https://www.baidu.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    
    
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
    
    
      "name": "bilibili",
      "url": "https://space.bilibili.com/95256449"
    },
    {
    
    
      "name": "狂神说Java",
      "url": "https://blog.kuangstudy.com"
    },
    {
    
    
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

Crie um novo html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--  cloak:解决闪烁问题  -->
    <style>
        /*属性选择器*/
        [v-cloak]{
      
      
            display: none;
        }
    </style>

</head>
<body>

<div id="vue" v-cloak>
    <div>{
   
   {info.name}}</div>
    <div>{
   
   {info.address.street}}</div>
    <div>{
   
   {info.address.city}}</div>
    <div>{
   
   {info.address.country}}</div>
    <a v-bind:href="info.url">点我</a>
</div>

<!--  1. 导入vue.js  -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  var vm = new Vue({
      
      
    el:"#vue",
      data(){
      
      
        return{
      
      
            //请求的返回参数格式，必须和json字符串一样
            info:{
      
      
                name: null,
                url: null,
                address: {
      
      
                    street: null,
                    city: null,
                    country: null
                }
            }
        }
      },
    mounted(){
      
      //钩子函数,链式编程
        axios.get('../data.json').then(response=>(this.info=response.data));
    }
  });
</script>
</body>
</html>

10. Propriedades calculadas

O que é uma propriedade computada?

O foco dos atributos computacionais está na palavra atributo (atributo é um substantivo). Primeiro, é um atributo. Em segundo lugar, esse atributo tem a capacidade de calcular (calcular é um verbo). O cálculo aqui é uma função: colocá-lo simplesmente, é uma função que pode Propriedades onde os resultados do cálculo são armazenados em cache (convertendo o comportamento em propriedades estáticas), nada mais; pense nisso como armazenamento em cache!

10.1、calculado

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="vue">
    <!--  method通过方法()来调用  nowTime()  -->
<!--    <p>NowTime=>{
    
    {nowTime()}}</p>-->
    <!--  computed通过属性来调用  nowTime  -->
    <p>NowTime=>{
   
   {nowTime}}</p>
</div>

<!--  1. 导入vue.js  -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
  var vm = new Vue({
      
      
    el:"#vue",
      data:{
      
      
        message: "Genius Sue"
      },
      // methods: {
      
      
      //   nowTime: function (){
      
      
      //       console.log("methods");
      //       return Date.now();//返回一个时间戳
      //   }
      // },
      computed:{
      
      //计算属性：methods和computed中的方法名不能重名，重名后只会调用methods
          nowTime: function (){
      
      
              console.log("computed");
              return Date.now();//返回一个时间戳
          }
      }
  });
</script>
</body>
</html>

11. Slot Sold

11.1、slot

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- view层 模板 -->
<div id="app">
    <!-- 老代码 -->
    <!--<p>课程</p>
    <ul>
        <li>java</li>
        <li>linux</li>
    </ul>-->
    <todo>
        <!-- <todo-head slot="todo-head" v-bind:title="ti"></todo-head> -->
        <!-- v-bind可以简写为 -->
        <todo-head slot="todo-head" :title="ti"></todo-head>
        <todo-item slot="todo-item" v-for="it in its" :item="it"></todo-item>
    </todo>
</div>


<!-- 1. 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    Vue.component("todo", {
      
      
        template: '<div>\
                       <slot name="todo-head"></slot>\
                       <ul>\
                           <slot name="todo-item"></slot>\
                       </ul>\
                   </div>'
    });

    Vue.component("todo-head", {
      
      
        props: ['title'],
        template: '<p>{
      
      {title}}</p>'
    });


    Vue.component("todo-item", {
      
      
        props: ['item'],
        template: '<li>{
      
      {item}}</li>'
    });
    var vm = new Vue({
      
      
        el: "#app",
        data: {
      
      
            ti:'必修课程',
            its:['java','linux','spring']
        },
    });
</script>

</body>
</html>

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

12.1、this.$emit

this.$emit==>O componente filho passa valor para o componente pai

Sintaxe: this.$emit(“function”,param); //função é a função definida pelo componente pai e param é o parâmetro que precisa ser passado

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="vue">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    v-bind:items="item" v-bind:index="index" v-on:remove="removeItem(index)"></todo-items>
    </todo>
</div>
<!--  1. 导入vue.js  -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<script>
    //slot:插槽
    Vue.component("todo",{
      
      
        template:
            `<div>
                <slot name="todo-title"></slot>
                <ul>
                    <slot name="todo-items"></slot>
                </ul>
            </div>`
    });
    Vue.component("todo-title",{
      
      
        props:['title'],
        template:
            `<div>{
       
       { title }}</div>`
    });
    Vue.component("todo-items",{
      
      
        props:['items','index'],
        //只能绑定当前组件的方法
        template:
            `<li>{
       
       {index}}---{
       
       { items }}   <button v-on:click="remove()">删除</button></li>`,
        methods:{
      
      
            remove: function (index){
      
      
                //this.#emit 自定义事件分发
                this.$emit('remove',index);
            }
        }
    });

    var vm = new Vue({
      
      
        el:"#vue",
        data:{
      
      
            title: "Genius Sue",
            todoItems:['Java','Linux','C','C++']
        },
        methods: {
      
      
            removeItem: function (index){
      
      
                console.log("删除了=>",this.todoItems[index]);
                this.todoItems.splice(index,1);//一次删除一个元素
            }
        }
    });
</script>
</body>
</html>

13. O primeiro programa vue-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 e nosso desenvolvimento é mais rápido;

A principal função:

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

13.2. Ambiente necessário

• Instalar nodejs
• Instale o git

Confirme se a instalação do nodejs foi bem-sucedida

• Digite-o em cmd node -ve verifique se o número da versão pode ser impresso corretamente!
• Digite-o em cmd npm -ve verifique se o número da versão pode ser impresso corretamente!

npm

npm 是JavaScript 世界的包管理工具，并且是Node.js 平台的默认包管理工具。通过npm 可以安装、共享、分发代码，管理项目依赖关系。

Instale o acelerador de imagem Node.js Taobao (cnpm)

Neste caso, o download será muito mais rápido~

# -g 就是全局安装
npm install cnpm -g

# 若安装失败，则将源npm源换成淘宝镜像
# 因为npm安装插件是从国外服务器下载，受网络影响大
npm install --registry=https://registry.npm.taobao.org
# 然后再执行
npm install cnpm -g

Local de instalação

C:\Users\{管理员}\AppData\Roaming\npm\node_modules

13.3. Instale o vue-cli

#在命令台输入
cnpm instal1 vue-cli -g
#测试是否安装成功#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack
vue list

13.4. O primeiro aplicativo vue-cli

1. Crie uma nova pasta em branco VUE

2. Abra a janela de comando cmd e entre no diretório que você acabou de criar.

3. Executando um pedido

   vue init webpack myvue
   

   1.Project name：项目名称 ，默认回车即可
   2.Project description：项目描述，默认回车即可
   3.Author：作者，如果有配置git的作者，自动会读取。默认回车即可
   4.vue build (Use arrow keys) 有下面两个选择，推荐选择第一个
   > Runtime + Compiler:recommended for most users
   > Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY 
   5.Install vue-router? 是否安装vue的路由插件，选择n不安装（后期需要在手动添加）
   6.Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。选择n不安装（后期需要在手动添加）
   7.setup unit tests? 是否需要安装单元测试工具，选择n不安装（后期需要在手动添加）
   8.Setup e2e tests with Nightwatch? 是否安装e2e来进行用户行为模拟测试，选择n不安装（后期需要在手动添加）
   9.Should we run 'npm install' for you after the project has been created? 有下面三个选择，这里选择最后一个
   > yes,use npm 使用npm
   > yes,use yarn  使用yarn
   > no,I will handle that myself 自己操作
   

4. Entre no projeto myvue que você acabou de criar, instale e execute-o

   cd myvue
   npm install
   npm run dev
   

abra a página da Web:

14. Aprenda a usar o webpack

O que é webpack? – Ferramenta de empacotamento de modelos estáticos

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

Instalar webpack

npm install webpack -g
npm install webpack-cli -g

Instalação de teste bem-sucedida

webpack -v
webpack-cli -v

Caso

1. Crie um novo projeto (PS: adicione uma nova pasta), webpack-study e abra-o com a ideia

2. Adicione um novo diretório de módulos

3. Crie hello.js em módulos

   exports.sayHi = function () {
         
         
       document.write("<h1>Genius Sue</h1>")
   }
   

4. Crie um novo main.js em módulos

   var hello = require('./hello');
   hello.sayHi();
   

5. Crie um novo webpack.config.js no diretório mais externo

   module.exports={
         
         
       entry:'./modules/main.js',
       output:{
         
         
           filename:"./js/bundle.js"
       }
   }
   

6. Entre na janela de comandowebpack

Gerar arquivos

7. Crie um novo index.html no diretório mais externo

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Title</title>
   </head>
   <body>
   
   <script src="dist/js/bundle.js"></script>
   
   </body>
   </html>
   

8. Abrir com navegador

Efeito de implantação a quente (código modificado, não há necessidade de executar o comando webpack, apenas atualize a página)

webpack --watch

15. roteamento do roteador vue

Documentação oficial: https://router.vuejs.org/zh/guide/#html

Instalar

npm install vue-router --save-dev
# 上面报错的话，可以尝试降低版本
npm install [email protected] --save-dev

verificar

1. Abra o primeiro projeto vue-cli anterior myvue

2. Limpe todos os arquivos em src/assets/ e todos os arquivos em src/components

3. Adicione uma nova página de conteúdo componentes/Content.vue

   <template>
   
     <h1>内容页</h1>
     
   </template>
   
   <script>
   export default {
     name: "Content"
   }
   </script>
   
   <style scoped>
   
   </style>
   
   

4. Adicione uma nova página inicial componentes/Main.vue

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

5. Adicione um novo diretório src/router e adicione um arquivo de roteamento de configuração index.js neste diretório

   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',
         pathname:'content',
         //跳转的组件
         component:Content
       },
       {
         
         
         //路由路径---->页面跳转
         path:'/main',
         pathname:'main',
         //跳转的组件
         component:Main
       }
     ]
   });
   
   

6. Adicionar roteamento em main.js

   import Vue from 'vue'
   import App from './App'
   import router from "./router";//自动扫描里面的路由配置
   
   Vue.config.productionTip = false
   
   
   //显示声明使用VueRouter
   // Vue.use(VueRouter);
   
   new Vue({
         
         
     el: '#app',
     //配置路由
     router,
     components: {
         
          App },
     template: '<App/>'
   })
   
   

7. Usando roteamento em App.vue

   <template>
     <div id="app">
       <h1>Genius Sue</h1>
       <router-link to="/main">首页</router-link>
       <router-link to="/content">内容页</router-link>
       <!--控制页面展示-->
       <router-view></router-view>
   
     </div>
   </template>
   
   <script>
   import Content from "./components/Content";
   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>
   
   

8. Executar a partir da linha de comandonpm run dev

9. Verificação do navegador aberto

16、vue+elementUI

1. Crie um projeto chamado hello-vue

   vue init webpack hello-vue
   

2. Entre no diretório do projeto e instale as dependências

   # 进入工程目录
   cd hello-vue
   # 安装vue-routern 报错的都可以尝试用cnpm去安装
   npm install vue-router --save-dev
   # 上面报错的话，可以尝试降低版本
   npm install [email protected] --save-dev
   # 安装element-ui
   npm i element-ui -S
   # 安装依赖
   npm install
   # 安装SASS加载器 可能会报错，可以尝试降低版本
   cnpm install sass-loader node-sass --save-dev
   # 启功测试
   npm run dev
   

   descrição do comando npm

   npm install moduleName：安装模块到项目目录下
   
   npm install -g moduleName：-g的意思是将模块安装到全局，具体安装到磁盘哪个位置要看npm config prefix的位置
   
   npm install -save moduleName：–save的意思是将模块安装到项目目录下， 并在package文件的dependencies节点写入依赖，-S为该命令的缩写
   
   npm install -save-dev moduleName:–save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写
   

3. O Idea abre o projeto criado, limpa arquivos inúteis e cria uma estrutura de projeto, conforme mostrado abaixo

4. Adicione Main.vue nas visualizações

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

5. Adicione Login.vue nas visualizações

   <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: {
         handleClose: function () {
           this.dialogVisible = false;
         },
         onsubmit(formName) {
           //为表单绑定验证功能
           this.$refs[formName].validate((valid) => {
             if (valid) {
               //使用vue-router路由到指定界面，该方式称为编程式导航
               this.$router.push('/main');
             } else {
               this.dialogVisible = true;
               return false;
             }
           });
         }
       }
     }
   </script>
   
   <style 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>
   

6. Adicione index.js no roteador

   import Vue from "vue";
   import Router from 'vue-router';
   
   import Main from "../views/Main";
   import Login from "../views/Login";
   
   Vue.use(Router);
   
   export default new Router({
         
         
     routes:[
       {
         
         
         path:"/login",
         pathname:"login",
         component:Login
       },
       {
         
         
         path:"/main",
         pathname:"main",
         component:Main
       }
     ]
   })
   

7. Modificação do App.vue

   <template>
     <div id="app">
       <router-view></router-view>
     </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>
   

8. modificação main.js

   import Vue from 'vue'
   import App from './App'
   
   import router from "./router";
   
   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   
   Vue.use(router);
   Vue.use(ElementUI);
   
   new Vue({
         
         
     el: '#app',
     router:router,
     render:h=>h(App)//ElementUI
   })
   

9. testenpm run dev

17. Roteamento aninhado

Continue a otimizar no projeto acima

1. Crie um novo usuário de pasta no diretório de visualizações e crie List.vue e Profile.vue abaixo

   Lista.vue

   <template>
   
     <h1>用户列表</h1>
   
   </template>
   
   <script>
   export default {
     name: "UserList"
   }
   </script>
   
   <style scoped>
   
   </style>
   

   Vista de perfil

   <template>
   
     <h1>个人信息</h1>
   
   </template>
   
   <script>
   export default {
     name: "UserProfile"
   }
   </script>
   
   <style scoped>
   
   </style>
   

2. index.js adiciona roteamento aninhado

   import Vue from "vue";
   import Router 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(Router);
   
   export default new Router({
         
         
     routes:[
       {
         
         
         path:"/Login",
         component:Login
       },
       {
         
         
         path:"/Main",
         component:Main,
         children:[
           {
         
         path:"/user/Profile",component:Profile},
           {
         
         path:"/user/List",component:List},
         ]
       }
     ]
   })
   
   

3. Otimização principal.vue

   <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-submenu index="3">
               <template slot="title"><i class="el-icon-caret-right"></i>系统管理</template>
               <el-menu-item-group>
                 <el-menu-item index="3-1">用户设置</el-menu-item>
                 <el-menu-item index="3-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>
   .el-header {
     background-color: #0fa9e5;
     color: #333;
     line-height: 60px;
   }
   .el-aside {
     color: #333;
   }
   </style>
   

4. atualizar a página

18. Passagem e redirecionamento de parâmetros

18.1. Passagem de parâmetros

Continuando a transformação na demonstração acima, como passar parâmetros?

1. Main.vue modificado

   <el-menu-item index="1-1">
                   <!--插入的地方-->
                   <!--name传组件名，params传递参数,需要v-bind绑定参数 name属性的值需要和路由name保持一致-->
                   <router-link v-bind:to="{name:'UserProfile',params:{id:1}}" >个人信息</router-link>
   </el-menu-item>
   

2. Modifique a configuração de roteamento index.js

   {
         
         
         path:"/Main",
         component:Main,
         children:[
           {
         
         path:"/user/Profile/id",name:'UserProfile',component:Profile},
           {
         
         path:"/user/List",name:'UserList',component:List},
         ]
   }
   

3. Modificar perfil.vue

   <template>
   
     <!-- 注意这里所有元素必须在根节点下，这里根节点就是div -->
     <div>
       <h1>个人信息</h1>
       <!-- 注意这里的route不要写错了 -->
       {
        
        {$route.params.id}}
     </div>
   
   </template>
   
   <script>
   export default {
     name: "UserProfile"
   }
   </script>
   
   <style scoped>
   
   </style>
   

Com base no exposto, otimize novamente e use adereços para reduzir o acoplamento.

1. Modificar configuração de roteamentoprops:true

    {
         
         
         path:"/Main",
         component:Main,
         children:[
           {
         
         path:"/user/Profile/id",name:'UserProfile',component:Profile,props:true},
           {
         
         path:"/user/List",name:'UserList',component:List},
         ]
   }
   

2. Modificar perfil.vue

   <template>
   
     <!-- 注意这里所有元素必须在根节点下，这里根节点就是div -->
     <div>
       <h1>个人信息</h1>
       {
        
        {id}}
     </div>
   
   </template>
   
   <script>
   export default {
     props:['id'],
     name: "UserProfile"
   }
   </script>
   
   <style scoped>
   
   </style>
   

3. Verifique o mesmo que acima

4. Modifique Login.vue para trazer o nome de usuário ao pular para a página principal

   onsubmit(formName) {
   //为表单绑定验证功能
   this.$refs[formName].validate((valid) => {
   if (valid) {
   //使用vue-router路由到指定界面，该方式称为编程式导航
   this.$router.push('/main/'+this.form.username);
   } else {
   this.dialogVisible = true;
   return false;
   }
   });
   }
   

5. Modifique a configuração de roteamento index.js

   {
         
         
         path:"/Main/:name",
         props:true,
         component:Main,
         children:[
           {
         
         path:"/user/Profile/id",name:'UserProfile',component:Profile,props:true},
           {
         
         path:"/user/List",name:'UserList',component:List},
         ]
   },
   

6. Main.vue modificado

   <el-header style="text-align: right; font-size: 12px">
       <span>{
        
        {name}}</span>
       <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>
   

7. verificar

   

18.2. Redirecionar

1. Modifique index.jsredirect

   {
         
         
         path:'/goHome',
         redirect:'/main'
   },
   

2. Main.vue modificado

             <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">
                   <!--插入的地方-->
                   <!--name传组件名，params传递参数,需要v-bind绑定参数 name属性的值需要和路由name保持一致-->
                   <router-link v-bind:to="{name:'UserProfile',params:{id:1}}" >个人信息</router-link>
                 </el-menu-item>
                 <el-menu-item index="1-2">
                   <!--插入的地方-->
                   <router-link to="/user/List">用户列表</router-link>
                 </el-menu-item>
                 <el-menu-item index="1-3">
                   <!--插入的地方-->
                   <router-link to="/goHome">回到首页</router-link>
                 </el-menu-item>
               </el-menu-item-group>
             </el-submenu>
   

3. verificar

   

19, 404 e ganchos de roteamento

19.1、404

Digitei um endereço que não existe, o que devo fazer? Além disso, como o # no endereço não pode ser exibido?

1. Crie visualizações/NotFound.vue

   <template>
     <div>
       <h1>404,你的页面走丢了</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: "NoFound"
   }
   </script>
   
   <style scoped>
   
   </style>
   

2. Modifique index.js

   import Vue from "vue";
   import Router 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";
   import NoFound from "../views/NoFound";
   import Axios from "axios";
   import VueAxios from 'vue-axios'
   
   Vue.use(Router);
   Vue.use(VueAxios, Axios)
   
   export default new Router({
         
         
     mode:"history",
     routes:[
       {
         
         
         path:"/Login",
         component:Login
       },
       {
         
         
         path:"/Main/:name",
         props:true,
         component:Main,
         children:[
           {
         
         path:"/user/Profile/id",name:'UserProfile',component:Profile,props:true},
           {
         
         path:"/user/List",name:'UserList',component:List},
         ]
       },
       {
         
         
         path:'/goHome',
         redirect:'/main'
       },
       {
         
         
         path:'*',
         component:NoFound
       }
     ]
   })
   

3. verificar

   

Modo de roteamento:

• hash: caminho com símbolo #, como http://localhost/#/login
• histórico: caminho sem símbolo #, como http://localhost/login

Modificar configuração de roteamento

// ...
export default new VueRouter({
    
    
  mode: 'history',
  routes: []
// ...

19.2. Gancho

Guarda de navegação de rota

• antesRouteEnter

  在渲染该组件的对应路由被验证前调用
  不能获取组件实例 `this` ！
  因为当守卫执行时，组件实例还没被创建！
  

  beforeRouteEnterO guarda não está acessível thisporque o guarda é chamado antes da confirmação da navegação, portanto o novo componente que está prestes a aparecer ainda não foi criado.

  No entanto, você pode nextacessar a instância do componente passando um retorno de chamada para . Execute o callback quando a navegação for confirmada e passe a instância do componente como parâmetro do método de callback:

  beforeRouteEnter (to, from, next) {
        
        
    next(vm => {
        
        
      // 通过 `vm` 访问组件实例
    })
  }
  

• antesRouteUpdate

  在当前路由改变，但是该组件被复用时调用
  举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
  由于会渲染同样的组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  

• beforeRouteLeave: executado antes de sair da rota

  在导航离开渲染该组件的对应路由时调用
  与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
  

1. Usando funções de gancho em Profile.vue

   <template>
   
     <!-- 注意这里所有元素必须在根节点下，这里根节点就是div -->
     <div>
       <h1>个人信息</h1>
       {
        
        {id}}
     </div>
   
   </template>
   
   <script>
   export default {
     props:['id'],
     name: "UserProfile",
     beforeRouteEnter:(to,from,next)=>{
       console.log("进入路由之前");//加载数据
   
       next(vm => {
         vm.getData();//进入路由之前执行方法
       });
     },
     beforeRouteLeave:(to,from,next)=>{
       console.log("进入路由之后");
       next();
     },
     methods:{
       getData:function (){
         this.axios({
           method:"GET",
           url:"http://localhost:8080/static/mock/data.json"
         }).then(function (response){
           console.log(response);
         });
       }
     }
   }
   </script>
   
   <style scoped>
   
   </style>
   

   钩子函数参数说明
   to: 路由将要跳转的路径信息
   from：路径跳转前的路径信息
   next：路由的控制参数
   - next()：跳入下一个页面
   - next('/path')：改变路由的跳转方向，使其跳到另一个路由
   - next(false)：返回原来的页面
   - next(vm => {})：仅在beforeRouteEnter中也可用，vm是组件实例
   

2. Instale axios, vue-axios

   npm install axios vue-axios --save
   

3. index.js importar axios e usar

   import Vue from "vue";
   import Router 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";
   import NoFound from "../views/NoFound";
   import Axios from "axios";
   import VueAxios from 'vue-axios'
   
   Vue.use(Router);
   Vue.use(VueAxios, Axios)
   
   export default new Router({
         
         
     mode:"history",
     routes:[
       {
         
         
         path:"/Login",
         component:Login
       },
       {
         
         
         path:"/Main/:name",
         props:true,
         component:Main,
         children:[
           {
         
         path:"/user/Profile/id",name:'UserProfile',component:Profile,props:true},
           {
         
         path:"/user/List",name:'UserList',component:List},
         ]
       },
       {
         
         
         path:'/goHome',
         redirect:'/main'
       },
       {
         
         
         path:'*',
         component:NoFound
       }
     ]
   })
   

4. Prepare um novo diretório simulado sob os dados estáticos e crie o arquivo data.json

   {
         
         
     "name": "狂神说Java",
     "url": "https://www.baidu.com",
     "page": 1,
     "isNonProfit": true,
     "address": {
         
         
       "street": "含光门",
       "city": "陕西西安",
       "country": "中国"
     },
     "links": [
       {
         
         
         "name": "bilibili",
         "url": "https://space.bilibili.com/95256449"
       },
       {
         
         
         "name": "狂神说Java",
         "url": "https://blog.kuangstudy.com"
       },
       {
         
         
         "name": "百度",
         "url": "https://www.baidu.com/"
       }
     ]
   }
   

   Nota: Somente os arquivos em nosso diretório estático podem ser acessados ​​diretamente, por isso colocamos os arquivos estáticos neste diretório.

5. beforeRouteEnter em Profile.vue faz solicitações assíncronas

   <template>
   
     <!-- 注意这里所有元素必须在根节点下，这里根节点就是div -->
     <div>
       <h1>个人信息</h1>
       {
        
        {id}}
     </div>
   
   </template>
   
   <script>
   export default {
     props:['id'],
     name: "UserProfile",
     beforeRouteEnter:(to,from,next)=>{
       console.log("进入路由之前");//加载数据
   
       next(vm => {
         vm.getData();//进入路由之前执行方法
       });
     },
     beforeRouteLeave:(to,from,next)=>{
       console.log("进入路由之后");
       next();
     },
     methods:{
       getData:function (){
         this.axios({
           method:"GET",
           url:"http://localhost:8080/static/mock/data.json"
         }).then(function (response){
           console.log(response);
         });
       }
     }
   }
   </script>
   
   <style scoped>
   
   </style>
   

6. teste