02_Vue Basics_Primeira introdução ao Vue

1 Introdução ao Vue

Site oficial do Vue

Site oficial em inglês: https://vuejs.org/Site
oficial em chinês: https://cn.vuejs.org/

Introdução e descrição

• Vue é uma estrutura JavaScript progressiva para construir interfaces de usuário dinamicamente
  • Construa uma interface de usuário: transforme dados em uma interface de usuário de alguma forma
  • Progressivo: o Vue pode ser aplicado camada por camada, de baixo para cima. Aplicativos simples requerem apenas uma biblioteca central leve e compacta, enquanto aplicativos complexos podem introduzir uma variedade de plug-ins Vue.
• Autor: Você Yuxi
  • Em 2013, inspirado no framework Angular, You Yuxi desenvolveu um framework leve chamado SEED. Em dezembro do mesmo ano, o SEED passou a se chamar VUE, versão número 0.6.0.
  • Em 2014, o VUE foi lançado oficialmente ao público com o número de versão 0.8.0.
  • Em 27 de outubro de 2015, VUE1.0.0 EVANGELION foi lançado oficialmente
  • Em 1º de outubro de 2016, VUE2.0.0 GHOST IN THEELL foi lançado oficialmente
  • Em 18 de setembro de 2020, VUE3.0.0NEPIECE (One Piece) foi lançado oficialmente

Recursos do Vue

• Siga o padrão MVVM
• Codificação simples, tamanho pequeno, alta eficiência operacional, adequada para desenvolvimento móvel/PC
• Ele se concentra apenas na própria IU e também pode apresentar outros projetos de desenvolvimento de bibliotecas de terceiros
• Adote um modelo componenteizado para melhorar a taxa de reutilização de código e facilitar a manutenção do código
• A codificação declarativa elimina a necessidade de os codificadores manipularem diretamente o DOM e melhora a eficiência do desenvolvimento.
  • Programação imperativa, um comando por linha de código

let persons = [
    {
    
    id:1,name:'张三',age:18},
    {
    
    id:2,name:'李四',age:20},
    {
    
    id:3,name:'赵武',age:28}
]

// 命令式编程
let _str = '';
persons.forEach(i=>{
    
    
    _str +=`<li>${
      
      i.id}-${
      
      i.name}-${
      
      i.age}</li>`
});
let _ul = document.querySelector('#list');
_ul.innerHtml = _str;

// 声明式编码
<ul id="list">
    <li v-for="i in persons">
        {
   
   {i.id}}-{
   
   {i.name}}-{
   
   {i.age}}
    </li>
</ul>

• Use DOM virtual e algoritmo Diff para reutilizar nós DOM tanto quanto possível
  • Processo de renderização comum, usando JS para renderizar dados diretamente no DOM
  • No processo de renderização do Vue, o DOM virtual é usado para atualizar os dados no DOM virtual e o algoritmo Diff é usado para atualizar apenas os dados alterados.

Links para outras estruturas JS

• Aprenda com o modelo e a tecnologia de vinculação de dados do Angular
• Aprenda com a componentização e a tecnologia DOM virtual do React

Biblioteca periférica Vue

• vue-cli: apoio para as pernas vue
• recurso vue:
  • axios: solicitação ajax
• roteador vue: roteamento
• vuex: gerenciamento de estado (é um plug-in para vue, mas não usa as regras de nomenclatura de vue-xxx)
• vue-lazyload: carregamento lento de imagens
• vue-scroller: relacionado ao deslizamento de página
• element-ui: biblioteca de componentes de UI baseada em vue (lado do PC)
• mint-ui: biblioteca de componentes de UI baseada em vue (terminal móvel)

2 Primeiro aprendizado Vue

Trabalho preliminar

• Instale o plug-in Vue Devtools para o navegador
  • Endereço de download: https://devtools.vuejs.org/guide/installation.html
• Use a tag script para apresentar o pacote Vue na página
• (Opcional) Impedir que o vue gere dicas de produção na inicialização Vue.config.productionTip = false
• favicon precisa colocar o ícone da guia no caminho raiz do projeto e reabri-lo (shfit+F5 força uma atualização)

Usando Vue

• Crie uma instância Vue e passe um objeto de configuração
• O código no contêiner raiz ainda está em conformidade com a especificação HTML, mas alguma sintaxe especial do Vue está misturada
• O código no contêiner raiz é chamado de modelo Vue
• Existe uma correspondência individual entre instâncias e contêineres do Vue.
• No desenvolvimento real, existe apenas uma instância do Vue e ela será usada junto com os componentes.
• O xxx no modelo { {xxx}} significa escrever uma expressão js e xxx pode ler automaticamente todos os atributos nos dados
  • Observe a distinção: expressões js e códigos js (instruções)
  • expressão js: uma expressão produzirá um valor e pode ser colocada em qualquer lugar em que um valor seja necessário.
    • a a+b demo(1) x === y ? 'a' : 'b'
  • código js (instrução)
    • if(){} for(){}
• Assim que os dados nos dados forem alterados, os locais onde os dados são usados ​​no modelo serão atualizados automaticamente.

<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>

<!-- 显示容器 -->
<div id="root">
    <h1>Hello，{
   
   { name.toUpperCase() }}，{
   
   { address }}</h1>
</div>

<script>
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    // 创建Vue实例
    new Vue({
      
      
        el: '#root',  // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data: {
      
             // data中用于存储数据，数据供el所指定的容器去使用，值暂时先写成一个对象
            name: '张三',
            address: '郑州'
        }
    })
</script>