Una cartilla minimalista con Vue

1. Visión general de Vue

Vue (pronunciado /vjuː/, similar a view ) es un marco progresivo para construir interfaces de usuario . A diferencia de otros marcos grandes, Vue es un implementador del patrón MVVM y está diseñado para aplicarse capa por capa de abajo hacia arriba. La biblioteca central de Vue solo se enfoca en la capa de visualización, que no solo es fácil de usar, sino también fácil de integrar con bibliotecas de terceros o proyectos existentes. .

¿Qué es la arquitectura MVVM?

MVVM se deriva del patrón clásico MVC (Model-View-Controller). El núcleo de MVVC es la capa ViewModel, que es responsable de transformar los objetos de datos en el modelo para que los datos sean más fáciles de administrar y usar . Su función es la siguiente:

Esta capa realiza un enlace de datos bidireccional con la capa Vista hacia arriba;
Interacción de datos con la capa del modelo a través de solicitudes de interfaz;

Model: Modelo se refiere al modelo de datos, que generalmente se refiere a varios procesamientos de lógica comercial y manipulación de datos realizados por el backend, principalmente alrededor del sistema de base de datos. La dificultad aquí radica principalmente en la necesidad de reglas de interfaz unificadas con el acuerdo inicial;
View: Ver es la capa de vista, que es la interfaz de usuario. El front-end está construido principalmente por HTML y CSS. Para mostrar los datos de la capa ViewModel o Model de manera más conveniente, se han producido varios lenguajes de plantilla de front-end y back-end, como FreeMarker, Thymeleaf, etc. ., y los principales marcos de MVVM como Vue.js, AngularJS, EJS, etc. también tienen sus propios lenguajes de plantilla incorporados para crear interfaces de usuario;
ViewModel: Middleware que conecta vistas y datos, Vue.js es el implementador de la capa ViewModel en MVVM.

En la arquitectura MVVM, los datos y las vistas no pueden comunicarse directamente, solo a través de ViewModel, y ViewModel define un observador. ViewModel puede observar cambios en los datos y actualizar el contenido correspondiente a la vista. ViewModel puede escuchar los cambios de vista y puede notificar los cambios de datos. El estado de vista y el comportamiento están encapsulados en ViewModel . Esta encapsulación permite que ViewModel describa completamente la capa de Vista. Debido al enlace bidireccional, el contenido de ViewModel se muestra en la capa View en tiempo real, lo cual es emocionante porque el desarrollador front-end ya no tiene que manipular el DOM para actualizar la vista de manera ineficiente y engorrosa .

Nota: La capa de vista no muestra los datos de la capa de modelo, sino los datos de ViewModel. ViewModel es responsable de interactuar con la capa de modelo, lo que desacopla completamente la capa de vista y la capa de modelo. Este desacoplamiento es crucial, ya que es la parte delantera y trasera Una parte importante de la implementación del esquema de separación final.

MVVM es bastante maduro, se usa principalmente pero no solo en el desarrollo de aplicaciones web, los marcos de MVVM populares actuales son Vue.js, AngularJS, etc.

2. Programa Vue

Vamos a escribir el primer programa Vue. El proceso de escritura es el siguiente:

1. Cree archivos HTML, importe Vue.js y escriba scripts JS

<div id="app">
    ...
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm = new Vue({
      
      
        el:"#app",  //绑定元素的id
        //Model:数据
        data:{
      
      
            "message":"Hello Vue!",
        }
    })
</script>

el:"#app": ID del elemento vinculante;
data:{message:"Hello Vue!"}: Hay una propiedad llamada mensaje en el objeto de datos y se establece el valor inicial Hello Vue!;

2. Vincular datos a elementos de página

<!--View 视图层-->
<div id="app">
    <h3>{
   
   {message}}</h3>
</div>

Descripción: solo necesita usar llaves dobles para envolver el mensaje de propiedad llamado creado por Vue en el elemento enlazado para implementar la función de enlace de datos, que también logra el efecto deseado de la capa ViewModel.

3. Código HTML completo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个Vue程序</title>
</head>
<body>
    <!--View 视图层-->
    <div id="app">
        <h3>{
   
   {message}}</h3>
    </div>
    
    <!--导入Vue.js-->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        var em = new Vue({
      
      
            el:"#app",  //绑定元素的id
            //Model:数据
            data:{
      
      
                "message":"Hello Vue!",
            }
        })
    </script>
</body>
</html>

4. Efecto de prueba

Para experimentar la función de vinculación de datos que trae Vue de manera más intuitiva, podemos probarla en las herramientas de desarrollo del navegador. El proceso de prueba es el siguiente:

Ejecute la primera prueba de la aplicación Vue en el navegador, en las herramientas de desarrollo;
Ingrese en la consola vm.message = "Hello World!"y luego presione Entrar para encontrar que el contenido que se muestra en el navegador cambiará directamente a ¡Hola mundo!

inserte la descripción de la imagen aquí

El núcleo de Vue.js es implementar el modo MVVM, que desempeña el papel de la capa ViewModel.Su núcleo es implementar el monitoreo DOM y el enlace de datos , y vincular dinámicamente los datos sin cambiar los elementos DOM o actualizar la página.