directorio
1.MVC diferencia con MVVM
modelo MVC representa el Modelo-Vista-Controlador (Model - Controlador - Vista) patrón.
Ver (View): la interfaz de usuario.
Un controlador (Controller): lógica de negocio
modelo (modelo): manipulación de datos (CRUD)
El modo interactivo es el siguiente (cuadro tomado de Ruan registro Yifeng):
Los usuarios pueden enviar comandos (eventos DOM) a Ver, luego por el Modelo Vista petición directa para cambiar el estado, a continuación, actualizar Vista de
los usuarios también pueden enviar comandos directamente al controlador (cambiando el evento de disparo URL hashChange), y luego se envían al controlador de vista
MVVM es una abreviatura Model-View-ViewModel. Es esencialmente una versión mejorada del MVC.
Ver (View): la interfaz de usuario.
el enlace de datos de dos vías (ViewModel): Ver obligados a ViewModel, a continuación, con el fin de realizar alguna acción que una solicitud. A su vez, la comunicación con el modelo de vista de modelo, dilo a actualizar la respuesta de la interfaz de usuario
del modelo (Modelo): operativo de datos
en modo interactivo es el siguiente:
Resumen: MVC y MVVM hecho, las diferencias no son significativas. Es un tipo de diseño. Principalmente en mvc Controller evolucionado en MVVM en modelo de vista. MVVM principalmente a resolver un gran número de manipulación del DOM MVC la degradación del rendimiento renderización de páginas, los tiempos de carga lentos, que afecta a la experiencia del usuario. VM proporciona datos bidireccionales vinculante cuando los datos en la vista del modelo y hay un cambio, el otro cambiarán a medida
La estructura de código básico 2.Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<!--将来new的Vue的实例会控制这个元素的所有内容-->
<div id="app"></div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app", //当前我们new的这个Vue实例要控制页面上的哪个区域
data: {
msg: "HelloWorld" //data属性中，参访的是el中要用到的数据
},
methods: {
},
});
</script>
</body>
</html>
El uso de los comandos comunes 3.Vue
1. Expresión de interpolación {} {}, los datos insertados en la página de datos, reemplazará el marcador de posición en sí, que no borra el contenido original de los elementos
2.V-capa :( mediante el establecimiento de pantalla de estilo:) Solución de ninguna interpolación expresión parpadeo
3.V-texto: (v-texto = 'de datos en el nombre del atributo ") sobrescribe el contenido original del elemento, el parpadeo
4.v-html: (v-html =' datos nombre de atributo en ') en las etiquetas HTML, se sobrescribe el contenido original de los elementos
5.V una vez: no modificar los datos. etiqueta P con v-una vez que la pantalla es sólo el valor inicial de la msg, msg no ser modificado con cambios.
6.V-bind: (v-bind : Título = " datos de nombres de atributo de 'js sintaxis legales' + ') para las propiedades de unión, abreviado como:
7.V-ON: (ON-V: Click = 'show') para los eventos de unión, abreviado como @
8.v-Model: datos bidireccionales entre un estado de aplicación y una serie de elementos unidos forman
9.v-para: instrucción de bucle, una lista basada representación una matriz o un objeto, deben cumplir con los valores clave para el uso.
10.v-si: El valor de la expresión de condición verdadera o falsa, destruir o elemento de etiqueta reconstrucción. bandera p etiqueta representación es cierto, no prestar a falso
11.v-show: La expresión de valor verdadero o falso estado, el elemento de conmutación de visualización atributo CSS. bandera será establecido en false propiedad display etiquetas p a ninguno
<div id="app">
<p v-once>{{ msg }}</p>
<p v-cloak>{{msg}}显示出来了</p>
<p v-text="msg"></p>
<p v-html="htmlmsg"></p>
<p v-once>{{msg}}</p> //显示msg的初始值，不会随着msg被修改而变化。
<a v-bind:href="url"></a>
<a :href="url"></a> //简写
<button v-on:click="show">BOTTON</button>
<button :click="show">BOTTON</button> //简写
<input v-model="name"></input> //输入值的改变，会即时在下面显示
<p>{{ name }}</p>
<ul>
<li v-for="(item,index) in myarray"> {{ item }} </li>
</ul>
<p v-if="flag">123</p> //flag 为true 渲染<p>标签，false 不渲染
<p v-show="flag">123</p> //flag 为 false 将<p> 标签的 display属性设置为 none
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "HelloWorld" ,
htmlmsg:"<p>hello world</p>",
name:"",
url:"www.baidu.com",
myarray:[1,2,3],
flag:true
},
methods: {
show(){
console.log(123)
}
},
});
</script>
v-si se utiliza con el resumen v-show:
v-si o no es controlado por el elemento de control de nodo presencia dom explícito e implícito; v-show es proporcionada por el estilo de visualización elemento DOM, la visualización de secuencia, ninguno oculto;
V -si un mayor consumo de conmutación; v-show mayor consumo inicial de representación;
para cambiar muy frecuentemente, preferiblemente usando v-show; si las condiciones rara vez cambian en tiempo de ejecución, con el v-si más buena.
4. El modificador de evento (.Stop / .prevent / .capture / .self / .Una vez)
<a v-on:click.stop="doThis"></a> //阻止单击事件冒泡
<form v-on:submit.prevent="onSubmit"></form> //阻止默认事件，默认提交时重载页面，使用后不会重载页面
<a v-on:click.stop.prevent="doThat"></a> //修饰符可以串联使用，并且使用的顺序很重要
<div v-on:click.capture="doThis">...</div> //添加事件监听器时使用事件捕获模式
<div v-on:click.self="doThat">...</div> //点击自身时才会触发函数，冒泡或捕获都会略过自身
<a v-on:click.once="doThis"></a> //点击事件将只会触发一次
5.Vue la moda estilo de encuadernación
v-bind: class: dinámicamente conmutación de clase, v-bind: instrucciones clase puede también coexistir con atributo de clase convencional
<div class="myclass" v-bind:class="{ active: isActive }"></div>
datos:
data: {
isActive: true,
hasError: false
}
Rendering resultados:
<div class="myclass active"></div>
v-bind: Estilo:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
Rendering resultados:
<div style="color: red; font-size: 30px;"></div>
