English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Vue es una biblioteca JavaScript ligera y compacta. Tiene una API sencilla y comprensible, lo que permite a los desarrolladores desarrollar aplicaciones web de manera más sencilla y conveniente. En realidad, lo que siempre ha sido una característica destacada de Vue es su conveniencia, ejecución y flexibilidad.
El objetivo de este tutorial es, a través de algunos ejemplos, permitirle obtener una visión general de algunos conceptos y características básicas. En otros tutoriales que vendrán, aprenderá más características útiles de Vue, para poder construir proyectos escalables con Vue.
Crear una instancia de Vue utilizando new Vue()
Podemos inicializar una página html primero, luego necesitamos incluir el archivo js de Vue. Hay muchas formas de incluirlo, podemos incluir Vue a través de cdn en el script, o descargar el min.js de Vue desde el sitio web oficial, o instalar una dependencia de Vue con npm. Por conveniencia, en este artículo utilizamos la inclusión de cdn.
<!DOCTYPE html>
<html>
<head>
<title>Desde cero aprendiendo Vue</title>
</head>
<body>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
</body>
</html>
Asegúrate de usar la versión sin comprimir durante el desarrollo, ya que la versión sin comprimir proporciona advertencias detalladas útiles que pueden ahorrar mucho tiempo en la escritura de código.}
Primero escribimos un div en el body y creamos una instancia de Vue, luego vinculamos la instancia y el div.
Cuando crees una nueva instancia de Vue, utiliza el constructor Vue(), luego especifica tu punto de montaje en tu instancia. Este punto de montaje es el límite del área de la instancia de Vue que deseas dividir. El punto de montaje y el límite de la instancia son uno a uno. Solo puedes manejar asuntos dentro del límite de la instancia en el punto de montaje, no puedes manejar asuntos fuera del límite de la instancia en el punto de montaje.
En la instancia de Vue, el parámetro del punto de montaje es "el", el valor de el se puede definir mediante un elemento DOM.
<!DOCTYPE html>
<html>
<head>
<title>Desde cero aprendiendo Vue</title>
</head>
<body>
<div id="vueInstance">Este es el límite de la instancia del punto de montaje</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<script>
// Crear una nueva instancia de Vue y configurar el punto de montaje
var V = new Vue({
el : '#vueInstance'
});
</script>
</body>
</html>
como puedes ver en el ejemplo anterior, new un Vue() crea una nueva instancia, luego especifica un elemento DOM como el punto de montaje de la instancia. Al definir el punto de montaje, utilizamos el id del selector css para definir. El nombre de la instancia también se puede definir por sí mismo, para facilitar la llamada posterior.
Utilizar v-model para realizar el enlace de datos bidireccional
podemos usar v-model realiza el enlace de un cuadro de entrada de input, por lo que podemos obtener dinámicamente el valor del objeto de datos. Puedes considerar v-model es una propiedad específica, como las propiedades de los elementos html. Aquí, el enlace de datos bidireccional se puede usar en muchos elementos de formulario, como input, textarea, select.
Vue utiliza v-La instrucción model binding una dato, y este dato es el que esperamos que se actualice a través de la operación de entrada del usuario.
Por ejemplo, en el siguiente ejemplo, queremos enlazar los datos name en la etiqueta input, por lo que necesitamos implementar la declaración en el objeto data del ejemplo Vue.
<div id="vueInstance">
Escriba su nombre: <input type="text" v-model="name">
</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>//Esta línea se omitirá después
<script>
var V = new Vue({
el: '#vueInstance',
data: {
name : '_Appian'
}
});
</script>
Independientemente de cuántas veces el usuario ingrese, este name se actualizará automáticamente. Además, si el valor de name se cambia, también se modificarán los valores en otros lugares que mapean name. La razón de la modificación sincronizada de este cuadro de entrada y el mapeo es utilizar v-La instrucción model, permite que los datos se enlacen a través del flujo de datos subyacente y se modifican directamente. Esto es el concepto de双向绑定 de datos.
Para probar este concepto, podemos usar $data para imprimir la mapeo de los datos para ver.
<div id="vueInstance">
Escriba su nombre: <input type="text" v-model="name">
<p>{{ $data | json }}</p>/p> //#1
<p>{{ name }}</p>/p> //#2
</div>
<script>
var V = new Vue({
el: '#vueInstance',
data: {
name : '_Appian'
}
});
</script>
1en:
$dataes el objeto de datos observado por la instancia de Vue, su tipo es esencialmente un objeto, por lo que se puede convertir en json. Puede reemplazarlo con un nuevo objeto. La instancia proxy las propiedades de su objeto de datos.
{{}}. Utiliza dos corchetes para la interpolación. El valor insertado aquí es el valor en tiempo real de $data.
| json, es solo una manera más intuitiva de que los datos se muestren. También se puede considerar como un filtro, al igual que el efecto de JSON.stringify().
2en: {{ name }}. Esto es insertar directamente un variable de datos variable entre dos corchetes, mapeando directamente el valor de name.
Vue realiza la双向绑定 de datos de esta manera, solo necesita una v-La instrucción model puede hacerlo, sin necesidad de utilizar js o jq para controlar los datos. Creo que puedes aclarar la lógica en los ejemplos anteriores.
Utilizar v-on para enlazar eventos
Vue utiliza v-on para escuchar eventos y distribuir eventos. Puede crear un método para enlazar eventos de escucha en la instancia de Vue, y puede crear un método para distribuir un evento de clic.
En el siguiente ejemplo, crearemos un método say, que se enlaza a un botón. El efecto del clic es mostrar un cuadro emergente de bienvenida con el nombre del usuario. Para asignar este método al botón, necesitamos usar v-on:click para enlazar eventos.
<div id="vueInstance">
Escriba su nombre: <input type="text" v-model="name">
<button v-on:click="say">Bienvenido a hacer clic</button> //#1
<button @click="say">Bienvenido a hacer clic</button> //#2
</div>
<script>
var V = new Vue({
el: '#vueInstance',
data: {
name : '_Appian'
},
methods: {
say : function() {
alert('Bienvenido' + this.name);
}
}
});
</script>
Por supuesto, no solo se puede enlazar eventos de clic, sino que también se pueden enlazar otros eventos del ratón, eventos de entrada del teclado y otros tipos de eventos de js. Por ejemplo, v-on:mouseover, v-on:keydown, v-on:submit, v-on:keypress, v-on:keyup.13etc., o algunos otros eventos personalizados.
En el proceso de desarrollo, es posible que utilices eventos de enlace con frecuencia, v-on es un poco molesto de escribir, por lo que el ejemplo anterior proporciona dos formas de escribir, #2es para #1es la abreviatura de la escritura. Utiliza @ en lugar de v-on, aquí no se menciona más.
Utilizar v-if o v-show para hacer la condición de juicio
Si queremos que los usuarios vean el cuadro emergente de bienvenida después de iniciar sesión, y si no están registrados, les mostraremos una interfaz de inicio de sesión. Vue nos proporciona v-La instrucción if y v-La instrucción show se utiliza para controlar el contenido que se muestra en diferentes estados de inicio de sesión.
Utilizando el ejemplo anterior, podemos usar el valor de loginStatus para controlar si se ha iniciado sesión, si es true, se mostrarán los cuadros de entrada y los botones para que puedan ver el cuadro emergente de bienvenida, pero si es false (es decir, no se ha iniciado sesión), solo se verán los cuadros de entrada para la cuenta y la contraseña y el botón de envío (no se realizará la verificación de identidad, solo se cambiará el estado de inicio de sesión).
<div id="vueInstance">
//section que se mostrará cuando loginStatus sea true
<section v-if="loginStatus">
Escriba su nombre: <input type="text" v-model="name">
<button v-on:click="say">Bienvenido a hacer clic</button>
<button @click="switchLoginStatus">Salir de la sesión</button>
</section>
//section que se mostrará cuando loginStatus sea false
<section v-if="!loginStatus">
Nombre de usuario de inicio de sesión: <input type="text">
Contraseña de inicio de sesión: <input type="password">
<button @click="switchLoginStatus">Iniciar sesión</button>
</section>
</div>
<script>
var V = new Vue({
el: '#vueInstance',
data: {
name : '_Appian',
loginStatus : false
},
methods: {
say : function() {
alert('Bienvenido' + this.name);
},
switchLoginStatus : function() {
this.loginStatus = !this.loginStatus;
}
}
});
</script>
La ejecución de this es la instancia V. La dirección de this es un problema que uno necesita entender por sí mismo, aquí no se mencionará más. En el ejemplo anterior, simplemente cambiar V-si reemplaza v-show, también se puede obtener el mismo efecto. Al mismo tiempo, v-if y v-show ambos soportan v-else, pero debe estar vinculado v-El elemento hermano anterior al comando de etiqueta else debe tener v-if o v-show.
En el ejemplo anterior, hacer clic en el botón "Iniciar sesión" o "Salir de la sesión" desencadenará el método switchLoginStatus, y al desencadenarse este método, se cambiará el estado de loginStatus (cambiando entre true y false), lo que cambia v en html-El resultado de la condición de juicio de if cambia, basado en el valor booleano actual de loginStatus, lo que hace que el section mostrado sea diferente en diferentes estados.
v-show y v-if entre ellos, ¿cuál es la diferencia?63;
en la transición de v-if tiene una compilación local/if también incluye el proceso de desmontaje, ya que v-v-if es una renderización condicional verdadera, ya que asegura que los bloques condicionales se destruyan y reconstruyan adecuadamente los oyentes de eventos y los componentes hijos en la transición.
v-if también es perezoso: si la condición es falsa en el renderizado inicial, no se hace nada; comienza a compilar localmente cuando la condición se convierte por primera vez en verdadera (la compilación se almacena en caché).
Por otro lado, v-show es mucho más simple: los elementos siempre se compilan y conservan, simplemente se cambia con base en CSS.
En general, v-if tiene un mayor costo de cambio mientras que v-show tiene un mayor costo de renderizado inicial. Por lo tanto, si necesitas cambiar con frecuencia v-show es mejor, si la condición no es probablemente cambiar en tiempo de ejecución v-if es mejor.
Esta diferencia puede no ser importante para tu desarrollo actual, pero debes prestar atención y tenerla en cuenta, porque a medida que tu proyecto de desarrollo se convierte en mayor, esto se vuelve importante.
Utilizar v-for generar lista
Si eres un comerciante que gestiona una plataforma de comercio electrónico, probablemente tengas muchas páginas que necesiten renderizar la salida de listas de productos. v-El bucle for permite recorrer nuestros objetos de array, utilizando la forma “elemento en arrayObj”, que se lee como “recorrer cada elemento en el objeto de datos arrayObj”.
En el siguiente ejemplo, utilizaremos v-El bucle for permite generar una lista de productos. Cada producto se mostrará en un li, donde se mostrarán el nombre, el precio y el tipo de producto.
<div id="vueInstance">
<ul>
<li v-for="el in products">
{{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
</li>
</ul>
</div>
<script>
var V = new Vue({
el: '#vueInstance',
data: {
products : [
{name: 'micrófono', price: 25, category: 'electronics'},
{name: 'cartera de portátil', price: 15, category: 'accesorios'},
{name: 'limpiador de pantalla', price: 17, category: 'accesorios'},
{name: 'cargador de portátil', price: 70, category: 'electronics'},
{name: 'ratón', price: 40, category: 'electronics'},
{name: 'auriculares', price: 20, category: 'electronics'},
{name: 'monitor', price: 120, category: 'electronics'}
]
}
});
</script>
Por supuesto, los objetos de arrays en data pueden no definirse de la manera anterior, también podemos importarlos desde la base de datos o obtenerlos mediante solicitudes AJAX. Aquí solo se muestra para demostrar v-for。
A veces, podríamos necesitar obtener el índice correspondiente del producto en el objeto de la matriz. Podemos usar $index para obtenerlo.
//#1
<li v-for="el in products">
{{ $index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
</li>
//#2
<li v-for="(index,el) in products">
{{ index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
</li>
Atributo computado Computed
Las aplicaciones del atributo computado, generalmente se utilizan cuando el valor de una variable necesita ser calculado por otras variables.
por ejemplo, si el usuario ingresa un número x en el cuadro de entrada, se devolverá automáticamente al usuario el cuadrado de este número x⊃2;. Necesitas realizar un enlace de datos en el cuadro de entrada, y cuando los datos se modifican, se calculará inmediatamente.
<div id="vueInstance">
ingresar un número: <input type="text" v-model="value">
<p>Resultado de la calculación: {{ square }}</p>/p>
</div>
<script>
var V = new Vue({
el: '#vueInstance',
data: {
value: 1
},
computed: {
square: function(){
return this.value * this.value;
}
}
});
</script>
Se define el atributo computado mediante la definición de una serie de funciones, como cuando definimos el objeto methods anteriormente. Por ejemplo, el método square se utiliza para calcular la variable "square", y su valor de retorno es el producto de dos this.value.
a continuación, se puede hacer un ejemplo más complejo con computed. El sistema elegirá aleatoriamente un1~10dentro de los números, el usuario puede ingresar un número aleatorio en el cuadro de entrada.1~10dentro de los números, si el número ingresado por el usuario coincide con el número aleatorio del sistema, el juego tiene éxito, de lo contrario, fracasa.
<div id="vueInstance">
ingresar1~10dentro de los números: <input type="text" v-model="value">
<p>Resultado de la calculación: {{ resultMsg }}</p>/p>
</div>
<script>
var V = new Vue({
el: '#vueInstance',
data: {
value: null,
randNum: 5//El primer número aleatorio es5
},
methods: {
getRandNum: function(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
},
computed: {
resultMsg : function(){
if (this.value == this.randNum) {
this.randNum = this.getRandNum(1, 10);
return '¡Lo acertaste!';
} else {
this.randNum = this.getRandNum(1, 10);
return '¡Te equivocaste, intenta de nuevo!';
}
}
}
});
</script>
Epílogo
Hasta aquí, ya has dominado el uso básico de Vue, uno de los marcos más sencillos y hermosos del mundo, su construcción tiene su propia idea de diseño completa y se hace cada vez más popular. Este marco es suficientemente pequeño y ligero, lo que le dará una experiencia de usuario más fluida en su desarrollo y aumentará la eficiencia de desarrollo.¿Han dominado todos los ejemplos que se mencionaron anteriormente?
Crear una nueva instancia de Vue utilizando new Vue() y establecer el punto de montaje
Utilizar v-La directiva model realiza un enlace bidireccional con los controles de formulario
Entender el uso de $data, {{}}, $index en la salida de datos
Utilizar v-on para enlazar eventos, uso de methods
combinado con v-on, utilizando v-if o v-show para hacer un juicio condicional y entender la diferencia
Utilizar v-Salida de lista con bucle for
Aplicación básica de la propiedad computada Computed
Ahora ya has dominado básicamente Vue. Lo que debes hacer a continuación es leer más sobre las últimas noticias de Vue o seguir conociendo mi viaje de Vue.
Dirección de github:https://github.com/AppianZ/Cerrar2Vue
Esto es todo el contenido del artículo, espero que haya sido útil para su aprendizaje y que apoyen más al tutorial de grito.
Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido ha sido contribuido y subido por usuarios de Internet de manera autónoma, este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume responsabilidad alguna por las responsabilidades legales. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.