Vue.js ha estado aprendiendo durante algún tiempo, ahora revise y resuelva los puntos de conocimiento para evitar olvidar
Directorio
1. Introducción a los modos MVC y MVVM
Tercero, la instalación de vue.js
1. Importar directamente con script
1. Introducción a los modos MVC y MVVM
1. MVC: Modelo (modelo) + Vista (vista) + controlador (controlador)
Principalmente basado en el propósito de estratificación, para separar las responsabilidades de cada uno. La vista se comunica con el modelo a través del controlador. El controlador es el coordinador de la vista y el modelo. La vista y el modelo no están conectados directamente. El contacto básico es unidireccional. El usuario Usuario opera el modelo de plantilla a través del controlador para lograr el cambio de la vista.
- Vista: se utiliza para presentar datos al usuario de alguna manera
- Modelo: en realidad son datos
- Controlador: reciba y procese solicitudes de usuarios y devuelva el modelo a los usuarios
Sin considerar el marco de fondo, el proceso de interacción MVC debería ser así
Aprender el marco MVC es una nueva comprensión del modelo MVC
modelo: Una parte de la lógica para procesar datos en la aplicación, que generalmente se usa para almacenar y acceder a los objetos del modelo en la base de datos.
vista: la parte de vista, generalmente se refiere a una parte de jsp, html, etc. utilizada para mostrar al usuario
controlador: la capa de control generalmente se usa para procesar la lógica de negocios, responsable de tratar de leer datos y enviar datos al modelo
La operación de vista activará el controlador para cambiar el modelo, y luego el modelo para cambiar la vista . Desde entonces, las tres partes del código se escriben por separado, la lógica será mucho más clara; mvvm se basa en este concepto de diseño para proponer innovadoramente el desarrollo de mvvm La idea es tratar con el desarrollo front-end. Se puede decir que mvvm es equivalente al mvc front-end. Hablemos de mvvm.
2. MVVM: Modelo + Vista + Modelo de vista
Los cambios de vista se actualizarán automáticamente a ViewModel, los cambios de ViewModel se sincronizarán automáticamente a la vista para mostrar. ViewModel es responsable de conectar la Vista y el Modelo para garantizar la coherencia de la vista y los datos. Su núcleo es proporcionar enlace de datos bidireccional a View y ViewModel, lo que permite que los cambios de estado de ViewModel se pasen automáticamente a View, el llamado enlace bidireccional de datos.
Los marcos del modelo MVVM son: AngularJS, Vue.js y Knockout y Ember.js. Los dos últimos son modelos marco menos conocidos y primeros.
La relación entre los tres se puede ver en la figura anterior; ViewMode se puede ver como el puente de conexión entre Modelo y Vista, Ver puede vincular Modelo a través de evento, Modelo puede vincular Ver a través de datos y ViewMode puede realizar datos y ver Completamente separados
2. Introducción a Vue.js
El documento oficial de Vue.js lo presenta de esta manera: núcleo simple y compacto, pila de tecnología progresiva, suficiente para manejar aplicaciones de cualquier escala.
Simple y compacto significa que Vue.js tiene solo 17 KB después de la compresión. El llamado Progresivo (Progresivo) es que podemos usar Vue.js paso a paso, paso a paso, sin tener que usar todo desde el principio.
Basado en el DOM virtual, una tecnología que puede realizar varios cálculos a través de JavaScript por adelantado y calcular y optimizar la operación DOM final. Dado que esta operación DOM es una operación de preprocesamiento, no existe una operación real del DOM. Todos se denominan DOM virtual. El enlace de datos bidireccional evita que los desarrolladores manipulen objetos DOM y pone más energía en la lógica empresarial.
Usar Vue.js puede hacer que el desarrollo web sea simple, y también subvierte el modelo de desarrollo front-end tradicional. Proporciona características avanzadas comunes en el desarrollo web moderno:
- Desacoplar vistas y datos
- Componentes reutilizables
- Enrutamiento frontal
- Gestión del estado
- DOM virtual (DOM virtual)
Tercero, la instalación de vue.js
1, por directamente scriptintroduciendo
En vue web oficial vue.js de descarga directa y con <script>la introducción de un sello local, Vueque será registrado como una variable global.
2. Introducción de CDN
Para la creación de prototipos o el aprendizaje, puede usar la última versión como esta:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>Para entornos de producción, recomendamos vincular a un número de versión claro y un archivo de compilación para evitar daños inesperados causados por la nueva versión:
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>3. Instalación NPM
NPM funciona bien con empaquetadores como webpack o módulos Browserify . Vue también proporciona herramientas de soporte para desarrollar componentes de un solo archivo .
# 最新稳定版
$ npm install vue
Tutorial de código
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
Hello World!
</body>
</html>Resultado de la operación
Si el inglés anterior aparece en la consola, significa que el entorno de desarrollo Vue.js se ha instalado correctamente.
Cuatro, ejemplos de Vue
1. Crear una instancia de Vue
Cada aplicaciones Vue son a través de la Vuecreación de una nueva función de instancia Vue comienza:
var vm = new Vue({
// 选项
})Tutorial de código
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{ message }} {{name}} //文本插值
</div>
<script type="text/javascript">
var app = new Vue({ //vue是对象
el: '#app', //id选择器选中id为app标签
data: {
message: 'Hello Vue!', //注册变量并初始化赋值
name : "Vue"
}
});
</script>
</body>
</html>
Resultado de la operación
2. Datos y métodos.
Cuando se crea una instancia de Vue, será dataSe añadieron todas las propiedades del objeto a la Vue sistema de respuesta de. Cuando el valor de estos atributos cambia, la vista generará una "respuesta", es decir, la coincidencia se actualiza al nuevo valor.
Tutorial de código
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{a}}{{b}}{{c}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
a: 1,
b: 2,
c: 3,
}
});
vm.$watch('a', function(newVal, oldVal){
console.log(newVal, oldVal);
}) //观察data.a的值是变化
vm.$data.a = "test...." //给data.a重新赋值
</script>
</body>
</html>
Resultado de la operación
Puede ver el cambio del valor de a en la salida de la consola, lo que indica que el cambio del valor del atributo de datos hará que la vista cambie, y la vista producirá una "respuesta".
Esta respuesta es el patrón MVVM anterior. La vista puede vincular el modelo a través de eventos, y el modelo puede vincular la vista a través de datos, y el enlace de datos bidireccional entre View y ViewModel. Esto permite que los cambios de estado de ViewModel se transfieran automáticamente a View.
3. ciclo de vida
Cada instancia de Vue se somete a una serie de procesos de inicialización cuando se crea; por ejemplo, debe configurar el monitoreo de datos, compilar plantillas, montar la instancia en el DOM y actualizar el DOM cuando los datos cambien. Al mismo tiempo, algunas funciones llamadas ganchos de ciclo de vida se ejecutarán en este proceso , lo que brinda a los usuarios la oportunidad de agregar su propio código en diferentes etapas.
El ciclo de vida en vue se divide en tres etapas: inicialización, nuevo estado y destrucción.
- Etapa de inicialización: beforeCreated, creado, beforeMount, montado
- Siga el nuevo estado: beforeUpdate, update
- Destruye la instancia vue: beforeDestory, destruido
Entre ellos, creado / montado se puede utilizar para enviar solicitudes e iniciar tareas asincrónicas como temporizadores
beforeDestroy se usa para terminar el trabajo, como borrar el temporizador
Tutorial de código
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : "hi vue",
},
//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
beforeCreate:function(){
console.log('beforeCreate');
},
/* 在实例创建完成后被立即调用。
在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
然而，挂载阶段还没开始，$el 属性目前不可见。 */
created :function(){
console.log('created');
},
//在挂载开始之前被调用：相关的渲染函数首次被调用
beforeMount : function(){
console.log('beforeMount');
},
//el 被新创建的 vm.$el 替换, 挂在成功
mounted : function(){
console.log('mounted');
},
//数据更新时调用
beforeUpdate : function(){
console.log('beforeUpdate');
},
//组件 DOM 已经更新, 组件更新完毕
updated : function(){
console.log('updated');
}
});
// setTimeout(function(){
// vm.msg = "change ......";
// }, 3000);
</script>
</body>
</html>
Consola para ver la salida
He aprendido el desarrollo de los applets de WeChat antes, y la gramática básica de Vue.js es similar a la de los applets de WeChat.
Seguimiento ~~~~~~
