Basado en datos es la característica más importante de vue.js. En vue.js, el llamado basado en datos significa que cuando los datos cambian, la interfaz de usuario cambia en consecuencia y los desarrolladores no necesitan modificar manualmente el dom .
patrón de diseño MVVM
El principio del enlace bidireccional de Vue.
MVVM es la abreviatura de Model-View-ViewModel. Es esencialmente una versión mejorada de MVC . El patrón MVVM ayuda a separar claramente la lógica empresarial y de presentación de una aplicación de la interfaz de usuario (UI). Mantener una separación clara entre la lógica de la aplicación y la interfaz de usuario ayuda a resolver muchos problemas de desarrollo y hace que las aplicaciones sean más fáciles de probar, mantener y evolucionar. También aumenta significativamente las oportunidades de reutilización de código y permite a los desarrolladores y diseñadores de UI colaborar más fácilmente al desarrollar sus respectivas partes de la aplicación.
Echemos un vistazo a la idea de MVVM.
Tomemos un ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue程序！</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
{
{message}}
</div>
<script src="js/v2.6.10/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
<!-- Model : 数据-->
data:{
message:"Hello Vue!"
}
});
</script>
</body>
</html>Eche un vistazo a los resultados de ejecución:
Parece que no tiene nada de especial, también podemos utilizar HTML tradicional para lograrlo.
Por ejemplo, <p>¡Hola Vue!</p>
Sí. No veo nada especial, pero si miras este código con atención, verás que tanto la Vista como el Modelo están presentes, entonces, ¿a dónde va ViewModel?
Ahora abrimos la consola,
Simplemente presione Enter y el contenido de la página cambiará sin actualizar la página.
Si escribimos el código HTML anterior, <p>Hello Vue!</p>, tenemos que modificar el contenido del archivo, guardarlo y luego actualizar la página antes de que el contenido de la página pueda cambiar.