Vista
Vue es un framework js front-end, desarrollado por You Yuxi, es un proyecto personal actualmente mantenido por el equipo hambriento de ude
Vue ha recibido especial atención en los últimos años. Hace tres años, angularJS dominó el mercado de frameworks JS front-end durante mucho tiempo, y luego nació el framework reaccionar, porque tiene una característica que es un DOM virtual, que elimina el rendimiento de angularJS. Vue 1.0 fue lanzado silenciosamente. Su elegancia y portabilidad también atrajo a algunos usuarios. Comenzó a recibir atención. A mediados de los 16 años, salió VUE 2.0. En este momento, vue superó la reacción en términos de rendimiento y costo. El incendio fue un completo desastre. En este momento, el equipo de desarrollo angular también desarrolló la versión angular 2.0, y la renombró angular, absorbiendo las ventajas de reaccionar y reaccionar, además de las características de angular, y también atrajo a muchos usuarios.
Learning vue es una habilidad imprescindible para los desarrolladores front-end.
El rol del front-end js framework, ¿por qué usarlo?
El marco js ayuda a los desarrolladores a escribir código lógico js. Las funciones de js se dividen en los siguientes puntos al desarrollar aplicaciones:
-
Renderizando datos
-
Operar dom (escribir algunos efectos)
-
Operación cookie y otro mecanismo de almacenamiento api
En el desarrollo front-end, la forma eficiente de operar DOM y renderizar datos es un problema que los ingenieros front-end deben tener en cuenta, y cuando la cantidad de datos es grande y el flujo es caótico, también es un problema cómo usar correctamente los datos y manipularlos.
El marco js tiene su propia solución perfecta para los problemas anteriores, lo que reduce los costos de desarrollo, el alto rendimiento y la alta eficiencia. El único inconveniente es que requiere un cierto costo para aprender.
Introducción al sitio web oficial de Vue
vue es un framework de JavaScript progresivo. Qué funciones se usan, solo qué módulos funcionales necesitan ser introducidos
El reclamo de Vue es débil
Vue se puede usar en cualquier otro tipo de proyecto. El costo de uso es más bajo, más flexible y más débil. En los proyectos Vue, otras tecnologías también se pueden integrar fácilmente para desarrollar, y debido a que el ecosistema Vue es particularmente grande, puede encontrar Básicamente, todos los tipos de herramientas se utilizan en proyectos vue
Características: fácil de usar (bajo costo de uso), flexible (ecosistema completo, adecuado para proyectos de cualquier tamaño), alta eficiencia (tamaño pequeño, buena optimización, buen rendimiento)
Vue es un framework MVVM js, sin embargo, la biblioteca central de Vue solo se enfoca en la capa de vista, y los desarrolladores solo se enfocan en la relación de mapeo de mv
Introducción y uso simple de vue framework
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test">
<!-- 声明一条数据，然后用特殊的模板语法将其渲染到界面中 ===> 声明式渲染 -->
{{msg}}
</div>
<!-- 引入vue框架 新手建议引入开发版的vue，有错误代码提示 -->
<script src="./base/vue.js"></script>
<script>
// 创建vue实例
new Vue ({
el:"#test", //el ==> 挂载点
data:{ //data ==> 数据
msg:"hello world"
}
})
</script>
</body>
</html>
Modo MV * (MVC / MVP / MVVM)
MVC
Controlador de vista de modelo
Después de que el usuario opera la Vista, la Vista captura esta operación y transferirá la potencia de procesamiento al Controlador; el Controlador preprocesará los datos de la Vista y decidirá a qué interfaz de Modelo llamar; luego el Modelo ejecutará la lógica comercial relevante Solicitud); Cuando se cambia el Modelo, la Vista será notificada a través del Patrón de Observador (Patrón de Observador); Después de recibir el mensaje de Cambio de Modelo a través del Modo de Observador, la Vista solicitará los últimos datos del Modelo y luego actualizará la interfaz.
把业务逻辑和展示逻辑分离，模块化程度高。但由于View是强依赖特定的 Model的，所以View无法组件化，无法复用
MVP
Presentador de vista de modelo
Al igual que el modo MVC, la operación del usuario de la Vista se transferirá de la Vista al Presentador. El presentador ejecutará la lógica de aplicación correspondiente y realizará las operaciones correspondientes en el modelo. En este momento, después de que el modelo ejecuta la lógica de negocios, también transmite su mensaje modificado a través del modo de observador, pero se pasa al presentador en lugar de la vista. Después de que el presentador obtiene la noticia del cambio de modelo, actualiza la interfaz a través de la interfaz proporcionada por la Vista.
View不依赖Model，View可以进行组件化。但Model->View的手动同步逻辑麻烦，维护困难
Ejemplo Por
ejemplo, para hacer clic en el botón de alternar para hacer que el cuadro rojo aparezca oculto, se logra lo siguiente usando js nativo.
<body>
<div id="box">
<button class="btn">toggle</button>
<button class="btn2">big</button>
<div class="box">
</div>
</div>
<script>
//面向过程的代码
let btnDom = document.querySelector(".btn")
let boxDom = document.querySelector(".box")
let flag = true
btnDom.onclick = function(){
if(flag){
boxDom.style.display = "none"
flag = false
}else{
boxDom.style.display = "block"
flag = true
}
}
</script>
</body>
Si solo se implementa una función, es relativamente fácil usar js nativos, pero si necesita agregar múltiples funciones, este método es sin duda el más difícil. Si se reemplaza con un marco vue, será mucho más fácil. Veamos cómo usar el marco vue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="box">
<button class="btn">toggle</button>
<button class="btn2">big</button>
<div class="box">
</div>
</div>
<!-- 引入vue框架 新手建议引入开发版的vue，有错误代码提示 -->
<script src="./base/vue.js"></script>
<script>
/*
mvc:
m:model 数据模型层 dao层
v:view 视图层
c:controller 控制器 service
controller的作用：就是将m层的数据在view层进行显示
*/
// m层
let model = {
isShow: true,
isBig: true
}
// v 层
let boxDom = document.querySelector(".box")
//c层
function controller() {
this.init()
}
controller.prototype = {
init() {
this.addEvent()
},
addEvent() {
let btnDom = document.querySelector(".btn")
let btn2Dom = document.querySelector(".btn2")
// 实现显示隐藏功能
btnDom.onclick = () => {
// 更改数据
model.isShow = !model.isShow
// 渲染视图
this.render()
}
// 添加放大 还原功能
btn2Dom.onclick = () => {
// 更改数据
model.isBig = !model.isBig
// 渲染视图
this.render()
}
},
// 要实现的效果
render() {
boxDom.style.display = model.isShow ? "block" : "none"
boxDom.style.width = model.isBig ? "300px" : "100px"
}
}
new controller()
</script>
</body>
</html>
De esta manera, es mucho más fácil.
MVVM
Vista Modelo Vista Modelo
La relación de llamada de MVVM es la misma que MVP. Sin embargo, habrá algo llamado Binder o motor de enlace de datos en ViewModel. Solo necesita declarar imperativamente en la sintaxis de la plantilla de la vista a qué parte del modelo están vinculados los datos que se muestran en la vista. Cuando ViewModel actualiza el Modelo, Binder actualizará automáticamente los datos a la Vista; cuando el usuario opera la Vista (como la entrada de formulario), Binder actualizará automáticamente los datos al Modelo. Este método se llama: enlace de datos bidireccional, enlace de datos bidireccional .
Utiliza el enlace bidireccional (enlace de datos): los cambios de vista se reflejan automáticamente en ViewModel y viceversa
Uso de Vue
Vue no es compatible con IE8 porque se utilizan muchas características de ES5
Object.defineProperty (_data, "msg", {get (), set ()}) _data.msg
- Vue.js se puede introducir directamente a través de la etiqueta del script. Hay una versión de desarrollo y una versión de producción. La versión de desarrollo generalmente se presenta cuando desarrollamos el proyecto. Cuando se completa el desarrollo final y en línea, se introduce la versión de producción. , Y la versión de producción se elimina
Descargar y usar directamente
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- Se proporciona un andamio (herramienta de línea de comandos) en Vue para ayudarnos a construir rápidamente un entorno de desarrollo basado en webpack ...
npm install ‐g @vue/cli
Ejemplos de vue
Cada aplicación tiene una instancia raíz. En la instancia raíz, implementamos aplicaciones grandes anidando componentes
En otras palabras, los componentes no son necesariamente necesarios, pero se requieren ejemplos
Al crear una instancia de una instancia, podemos pasar una; los elementos de configuración, establecer muchos métodos de atributos en los elementos de configuración pueden lograr funciones complejas
La propiedad el se puede establecer en la configuración. La propiedad el representa el alcance de esta instancia
Establezca la propiedad de datos en la configuración para vincular datos a la instancia
Principio del enlace de datos bidireccional de vue
-
Cuando pasa un objeto JavaScript normal a una instancia de Vue como una opción de datos, Vue atravesará todas las propiedades de este objeto y usará Object.defineProperty para convertir todas estas propiedades en getter / setter. Object.defineProperty
es una característica que no se puede simular en ES5, por lo que Vue no es compatible con IE8 y navegadores anteriores. Cada instancia de componente corresponde a una instancia de observador, que registra los atributos de datos "tocados" como dependencias durante la representación del componente. Luego, cuando se activa el configurador de la dependencia, se notificará al observador, de modo que sus componentes asociados se vuelvan a representar. -
Cuando vue crea un vm, configurará los datos en la instancia y luego usará el método Object.defineProperty para agregar dinámicamente métodos getter y setter para los datos. Al obtener datos, se activa el método getter correspondiente, y al configurar los datos, se activa el método setter correspondiente. Luego, cuando el método de establecimiento activa la finalización, el observador se activará aún más internamente. Cuando los datos cambien, se completará la operación de actualización de la vista.
Vue implementa internamente el enlace de datos bidireccional a través del modelo de secuestro de datos y publicación-suscripción
- A través del método Object.defineProperty para secuestrar todos los datos, es agregar dinámicamente métodos getter y setter a estos datos. Cuando los datos cambian, publica un mensaje para el suscriptor (Observador), desencadenando la devolución de llamada de monitoreo de respuesta.
<body>
<div id="app">
</div>
<script src="./base/vue.min.js"></script>
<script>
var obj = {}
let middel = 100
Object.defineProperty(obj,"msg",{
get(){
return middel
},
set(val){
middel = val
}
})
console.log(obj.msg) //获取对象的属性的时候，会调用自身的get方法
obj.msg = 1111 //设置对象的属性的时候，会调用自身的set方法
console.log(obj.msg)
</script>
</body>
Extensión:
Nota: El cambio de vue3 Object.defineProperty tiene las siguientes desventajas.
1. No se pueden monitorear los cambios de Set y Map de es6;
2. No se puede monitorear los datos del tipo de clase;
3. Los atributos nuevos o eliminados no pueden ser monitoreados;
4. La adición y eliminación de elementos de matriz no se pueden monitorear.
Por las deficiencias de Object.defineProperty, el Proxy ES6 se puede resolver perfectamente. Su único inconveniente es que no es amigable con IE, por lo que vue3 detecta que si está usando IE (sí, IE11 no es compatible con Proxy), lo hará Cambiar automáticamente al sistema de monitoreo de datos de Object.defineProperty.
