Introdução detalhada ao Vue2.0

Um, noções básicas de Vue

1.1. Visão geral

Autor: especialmente a chuva do rio

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

Vue.js é uma estrutura progressiva para a construção de interfaces de usuário . O Vue adota um design de desenvolvimento incremental ascendente . A biblioteca central do Vue se concentra apenas na camada de visualização. Não é apenas fácil de usar, mas também fácil de integrar com bibliotecas de terceiros ou projetos existentes. Por outro lado, quando combinado com componentes de arquivo único e bibliotecas suportadas pelo ecossistema Vue, o Vue também é totalmente capaz de fornecer drivers para aplicativos complexos de página única. (Aplicativo de página única do SPA, todas as exibições estão em uma página)

Progressivo: passo a passo, não que você precise usar tudo de uma vez

Projeto ascendente: é um processo e método de elaboração de um programa, que consiste em escrever primeiro um segmento básico do programa e, em seguida, expandir gradualmente a escala, complementar e atualizar algumas funções. Na verdade, é um processo de construção de um programa de baixo para cima.

Do ponto de vista do design, o Vue pode cobrir todas as coisas nesta imagem, mas você não precisa usar tudo assim que começar, todos são opcionais. A renderização declarativa e os sistemas de componentes estão incluídos na biblioteca central do Vue , e as ferramentas de roteamento, gerenciamento de estado e construção têm soluções especiais. Essas soluções são independentes umas das outras e podemos escolher outros componentes com base no núcleo arbitrariamente, não necessariamente todos integrados.

1.2, renderização declarativa e componentização

• Renderização declarativa

O núcleo do Vue.js é um sistema que permite o uso de sintaxe de modelo concisa para renderizar dados declarativamente no DOM, por exemplo:

<div id="app">
  <!-- 渲染 -->
  {
   
   { message }}
</div>

<script type='text/javascript'>
var app = new Vue({
     
     
  el: '#app',
  data: {
     
     
	// 声明一下变量
    message: 'Hello Vue!'
  }
})
</script>

• Construção de aplicativo com componentes

Sistema de componentes é outro conceito importante do Vue (estudo de acompanhamento), porque é uma abstração que nos permite usar "pequenos blocos de construção" pequenos, independentes e geralmente reutilizáveis para construir grandes aplicações. Quase qualquer tipo de interface de aplicativo pode ser abstraído como uma árvore de componentes.

1.3, modo de desenvolvimento

Nota: modo de desenvolvimento ≠ modo de design

O modelo de desenvolvimento é o método ou padrão de um projeto de desenvolvimento.

Três modos de desenvolvimento comuns: MVC, MVP, MVVM

• MVC

O nome completo de MVC é Model View Controller, que é uma abreviatura de model-view-controller, um modelo de design de software, usando uma lógica de negócios (C), dados (M), display de interface (V) Método separado para organizar o codifique e reúna a lógica de negócios em um componente. Ao melhorar e personalizar a interface e a interação do usuário, não há necessidade de reescrever a lógica de negócios.

1. O usuário pode enviar instruções (eventos DOM) para a View, e a View pede diretamente ao Model para alterar o estado.
2. O usuário também pode enviar instruções diretamente para o Controlador (alterar a URL para acionar o evento hashChange), que são então enviadas para a Visualização pelo Controlador.
3. O controlador é muito fino e desempenha apenas uma função de roteamento, enquanto o View é muito denso e a lógica de negócios é implantada no View.

vantagem

Baixo acoplamento, alta reutilização, implantação rápida, alta capacidade de manutenção, o que é propício para o gerenciamento de engenharia de software

Desvantagem

Uma vez que o modelo e a vista devem ser estritamente separados, isso traz grandes dificuldades ao programa de front-end, e cada operação precisa ser exaustivamente testada

• MVP

MVP é a abreviatura de Model-View-Presenter. O MVP evoluiu do modelo clássico MVC. Suas ideias básicas são semelhantes. Controller / Presenter é responsável pelo processamento lógico, Model fornece dados e View é responsável por exibir:

1. A comunicação entre as várias partes é bidirecional.
2. A visualização e o modelo não estão conectados, eles são todos passados ​​pelo Presenter. Você pode usar um Presenter para várias visualizações sem alterar a lógica do Presenter. Este recurso é muito útil porque a visualização muda com mais frequência do que as mudanças do modelo.
3. O View é muito thin e não implanta nenhuma lógica de negócios, chamada de “Passive View” (Passive View), ou seja, não há iniciativa, enquanto o Presenter é muito denso, e toda lógica é implantada ali.

Desvantagem

Como a renderização da visualização é colocada no Apresentador, a interação entre a visualização e o Apresentador será muito frequente. Uma vez que a visualização precisa ser alterada, o Apresentador também precisa ser alterado.

• MVVM
  • M: objeto de dados javascript comum (modelo)
  • V: (ver) página de exibição de front-end
  • VM: (ViewModel) é usado para vinculação bidirecional de dados e páginas. Para o nosso curso, é uma instância do Vue

O modelo MVVM renomeado Presenter para ViewModel, que é basicamente o mesmo que o modelo MVP. A única diferença é que ele usa vinculação bidirecional (vinculação de dados): as alterações de visualização são refletidas automaticamente no ViewModel e vice-versa. Neste modo, a entrada da página altera os dados, e a alteração dos dados afeta a exibição e a renderização dos dados da página

O Vue usa o modelo de programação responsivo MVVM para evitar a manipulação direta do DOM e reduzir a complexidade das operações do DOM.

vantagem

• Baixo acoplamento. As visualizações podem ser independentes das alterações e modificações do modelo. Um ViewModel pode ser vinculado a diferentes visualizações. Quando a visualização muda, o modelo pode permanecer inalterado, e quando o modelo muda, a visualização também pode permanecer inalterada.
• Reutilização. 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.
• Pode ser testado. A interface sempre foi difícil de testar, mas agora o teste pode ser escrito para o ViewModel.

2. Introdução ao Vue

1. Comparação da implementação tradicional de DOM e Vue

Tomando a saída de "Hello World" como exemplo, os códigos nativos de JavaScript e jQuery do modelo de desenvolvimento tradicional são os seguintes:

Use Vue.js para realizar o caso de saída "Hello World":

degrau

1. Defina o rótulo usado para preencher os dados
2. Apresente o arquivo de biblioteca vue.js ( 学习测试使用开发版本，项目上线换成生产版本)
3. Use a sintaxe vue para atender aos requisitos
4. Preencha os dados fornecidos por vue no rótulo na "Etapa 1"

O snippet de código é o seguinte:

<body>
    <!-- 1. 定义用于填充数据的标签 -->
    <div id="app">{
   
   {msg}}</div>
</body>
<!-- 2. 引入vue.js库文件 -->
<script src="./js/vue.js"></script>
<script type="text/javascript">
    // 3. 使用vue语法实现需求
    var vue = new Vue({
     
     
        // 4. 将vue提供的数据填充到“第1步”中的标签里
        el: "#app",
        data: {
     
     
            msg: "Hello World",
        },
    });
</script>

Análise detalhada da instância Vue:

• Propriedades do objeto de parâmetro Vue

  • el: o local onde o elemento é montado, o valor pode ser um seletor CSS ou um elemento DOM
  • dados: dados do modelo, o valor é um objeto

• Expressão de interpolação{ {msg}}

  • Preencher dados em tags HTML

Compreensão : método de renderização de front-end

Os métodos de renderização front-end são:

• Strings de emenda JavaScript nativa (difícil de manter)
• Use o mecanismo de template de front-end (fácil de manter, mas falta de suporte a incidentes)
• Use a sintaxe de modelo exclusiva do Vue
  • Expressão de interpolação
  • instrução
  • Associação de eventos
  • Vinculação de propriedade
  • Encadernação de estilo
  • Estrutura do laço de ramificação
  • …

2. Instalação da ferramenta Vue devtools

Instale a ferramenta Vue Devtools através da loja de plug-ins do Google no Chrome. Esta ferramenta nos ajuda a depurar dados Vue e deve ser instalada. O endereço da ferramenta Vue na Google Store é: https://chrome.google.com/webstore?utm_source=chrome-ntp-icon

Observação: para abrir a loja de aplicativos do Chrome, você precisa acessar a Internet cientificamente . Quanto a como acessar a Internet cientificamente, resolva você mesmo.

Após a instalação, abra o Chrome 开发者工具（F12或Ctrl+Shift+I）para usar:

Suplemento: O que devo fazer se não conseguir resolver o problema do acesso científico à Internet, mas preciso usar as ferramentas de desenvolvimento Vue?

Se isso realmente não puder resolver o problema do acesso científico à Internet, o Vue fornece oficialmente o código-fonte do plug-in para nos permitir compilar / construir o plug-in Google Chrom por nós mesmos. As etapas são as seguintes (o processo de plug-in é um pouco mais problemático < não requer domínio de como construir >, que foi criado para os alunos aqui., Pode ser usado diretamente).

• Armazém clone
  • Endereço do armazém Git: https://github.com/vuejs/vue-devtools
• Instale dependências
• Construir
• Abra a página de extensões do Chrome
• Abra o modo de desenvolvedor
• Carregue a extensão descompactada, selecione o diretório shells-chrome
• Arraste o .crxarquivo gerado para a 扩展程序interface do navegador Google
• Adicione o arquivo de modelo de política do Google no Gerenciador de políticas do Windows e adicione o ID correspondente ao plug-in para配置扩展程序白名单
  • .crxE o .admarquivo foi empacotado e carregado para a nuvem pública, você pode clicar para visitar 2url.cc/l3M5x1 para fazer o download
• Autorizar o plug- in na 扩展程序interface de gerenciamento do Google ChromeVue.js devtools
  • Permitir acesso ao URL do arquivo
  • Colete vários erros

3. O princípio da vinculação de dados bidirecional Vue

Núcleo: Agente de Dados + Publicação e Assinatura

Quando um objeto JavaScript comum é passado para a opção de dados de uma instância do Vue, o Vue percorre todas as propriedades desse objeto e usa Object.defineProperty para converter todas essas propriedades em getter / setter (sequestro de dados / mapeamento de dados). Notifique as alterações quando as propriedades são acessadas e modificadas. Cada instância do componente tem um objeto de instância do inspetor correspondente, que gravará a propriedade como uma dependência durante o processo de renderização do componente e, em seguida, quando o configurador da dependência for chamado, ele notificará o inspetor para recalcular, para que seus componentes associados possam atualizado.

Object.defineProperty(obj, prop, descriptor)

obj

O objeto cujos atributos devem ser definidos.

suporte

O nome do atributo a ser definido ou modificado.

descritor

Para definir opções.

Código de amostra:

<body>
    <div id="app">
        <div id="msg"></div>
        <input type="text" name="" id="" oninput="changeVal(this)" />
    </div>
</body>
<script src="./js/vue.js"></script>
<script type="text/javascript">
    // 1. 定义对象
    var userInfo = {
     
     
        name: "这个信息虽然用户看不到，但是Vue可以追踪到",
    };
    
    // 2. 数据劫持
    var obj = {
     
     };
    Object.defineProperty(obj, "name", {
     
     
        get() {
     
     
            return userInfo.name;
        },
        set(data) {
     
     
            userInfo.name = data;
            document.getElementById("msg").innerHTML = data;
            return true;
        },
    });

    // 3. 实时渲染
    document.getElementById("msg").innerHTML = obj.name;

    // 4. 发布订阅
    function changeVal(eleObj) {
     
     
        let value = eleObj.value;
        obj.name = value;
        return true;
    }
</script>

4. Sintaxe do modelo Vue

4.1, expressão de interpolação

** Expressão de interpolação: ** é uma maneira de vincular dados em modelos HTML fornecidos pela estrutura vue. O { {变量名}}método de uso vincula as variáveis ​​de dados nos dados na instância Vue, e os dados vinculados serão exibidos na visualização em tempo real . saia.

O método de escrita da expressão de interpolação suporta o uso de:

• nome variável
• Parte da expressão JavaScript
  • Observação: a { { }}área delimitada é a área de sintaxe js, na qual parte da sintaxe js pode ser escrita. Não é possível escrever var a = 10; instrução de ramificação; instrução de loop
• Operador ternário
• Chamada de método (o método deve ser declarado primeiro)
• …

<body>
    <div id="app">
        <!-- 直接使用变量名 -->
        <h5>{
   
   {name}}</h5>
        <!-- 运算 -->
        <h5>{
   
   {name + '--好的'}}</h5>
        <h5>{
   
   { 1 + 1 }}</h5>
        <!-- 使用函数 -->
        <h5>{
   
   {title.substr(0,6)}}</h5>
        <!-- 三目运算 -->
        <h5>{
   
   { age > 18 ? '成年' : '未成年'}}</h5>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    var vm = new Vue({
     
     
        el: "#app",
        data: {
     
     
            title: "我是一个标题，你们看到没有",
            name: "tianqin",
            age: 21,
        },
    });
</script>

4.2. Instruções

Pergunta 1: O que é uma instrução?

• A essência da instrução é o atributo personalizado Vue no rótulo
• O formato do comando começa com "v-", por exemplo: v-cloak, v-text, v-html, etc.

Para obter detalhes, consulte as instruções no site oficial: https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4

Questão 2: Qual é a função da instrução?

Quando o valor da expressão muda, os efeitos colaterais produzidos por ela agirão no DOM de forma responsiva. (Operação simplificada)

Pequeno teste : comando v-text e comando v-html [equivalente a innertHTML e innerText]

Website oficial

v-text ： https: //cn.vuejs.org/v2/api/#v-text

v-html ： https: //cn.vuejs.org/v2/api/#v-html

Lembrete amigável: Use v-html o menos possível ou não, porque pode causar ataques XSS.

<body>
    <div id="app">
        <!-- 插值表达式形式 -->
        <div>{
   
   {str1}}</div>
        <!-- 插值表达式此时与v-text是等效的 -->
        <div v-text='str2'></div>
        <div v-html='str1'></div>
    </div>
</body>

<script src="./js/vue.js"></script>
<script>
    new Vue({
     
     
        el: '#app',
        data: {
     
     
            str1: 'hello tianqin',
            str2: '<a href="http://www.baidu.com">百度</a>'
        }
    })
</script>