Inicio rápido con Vue
-
Prefacio
Para un novato que es nuevo en la programación, la sintaxis de JavaScript tiende a ser complicada.Se puede decir que elegir la biblioteca Vue es una experiencia relativamente buena. De muchas formas, Vue simplifica la gramática de JavaScript y se da cuenta de los datos y la vistaEncuadernación bidireccional,lograrSensibleEl propósito de la página.
El blogger es un novato en programación de segundo año. El siguiente contenido es su propio entendimiento de Vue. El propósito de escribir este blog es consolidar sus conocimientos básicos de Vue. Puede verlo como una especie de notas. Un gran honor para mis amigos de la escuela Vue por ayudar, y espero que todos tengan razón en las áreas donde hay muchas expresiones inapropiadas y errores lógicos.
Material de referencia: "Vue.js de la entrada a la práctica"
1. Ejemplos de Vue y sintaxis de plantillas
<body>
<div id="app">
<p>{
{
message}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'hello,word!'
},
methods:{
},
})
</script>
</body>
- el
La sintaxis de Vue está escrita en un script como JavaScript , y DOM está vinculado por el selector de id . En Vue , solo necesita montar el id de DOM en el , que puede entenderse simplemente comogancho, El engancha todo el contenido en el <div> a través de la característica de id = "app", para que podamos implementar operaciones en el DOM en Vue .
- datos
Los datos en Vue se utilizan para declarar los datos que queremos usar. Esta operación nos ayuda a aclarar más fácilmente los datos que necesitan ser modificados en una determinada sección al momento de mantener u operar el documento, y no necesita operar directamente en el DOM . En este momento Los datos y el DOM son vinculantes bidireccionales, cuando modificamos los datos declarados en los datos, el DOM también sucederá al mismo tiempoSensibleEl cambio.
- métodos
Lo que contienen los métodos es nuestrológicaY el gatillo en la paginaevento, El contenido es equivalente al contenido de la función en JavaScript
2. Instrucciones
integradas Hay muchas instrucciones integradas en Vue, que reemplazan las operaciones de documentos y eventos en JavaScript .
- v-html
v-html: convierte los datos aetiqueta htmlformularioActualizar
<body>
<div id="app">
<p>{
{
website}}</p>
<p v-html="message">{
{
website}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
website:'Vue,js',
message:'<h1>hello,word!</h1>'
},
methods:{
},
})
</script>
</body>
Se puede encontrar que el enlace de Vue.js en la segunda etiqueta <p> es ¡hola, palabra! Actualizado y pasado en el mensaje declarado '<h1> hola, palabra! <\ H1>'actualización de etiqueta htmlDespués de leer el contenido, vi que este es un título de primer nivel de hola, palabra! .
- texto-v
<body>
<div id="app">
<p>{
{
website}}</p>
<p v-text="message">{
{
website}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
website:'Vue,js',
message:'<h1>hello,word!</h1>'
},
methods:{
},
})
</script>
</body>
A través de la instrucción v-txet, aunque el contenido de la etiqueta <p> todavía se reemplaza, pero solo a través deCuerdaSe muestra en lugar de pasar como htmletiqueta htmlEn forma de exhibición.
- capa en v
Cuando se carga el código, el HTML se carga primero, y la sintaxis de interpolación se carga en la página como contenido HTML, y la sintaxis de interpolación se reemplaza después de que se carga el js, por lo que veremos el problema de parpadeo, y v-clock puede resuelve este problema.
<div v-cloak>{
{
msg}}</div>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
- v-una vez
La instrucción v-once solo representa elementos y componentes una vez, y la representación posterior, los elementos, componentes y todos sus nodos secundarios que utilizan esta instrucción se tratarán como contenido estático y se omitirán. Esto se puede utilizar para optimizar el rendimiento de la actualización.
<body>
<div id="app">
<p v-once>can not change:{
{
website}}</p>
<p>change: {
{
website}}</p>
<p ><input type="text" v-model = "website"></p>
</div>
<script>
new Vue({
el:'#app',
data:{
website:"hello"
},
methods:{
},
})
</script>
</body>
- v-en
Para el enlace de eventos de Vue, use la instrucción v-on incorporada para completar y pasar parámetros.
<body>
<div id="app">
<input type="button" value="单击事件" v-on:click="alert"> //@click="alert"
</div>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
alert:function() {
alert('触发了点击事件');
}
},
})
</script>
</body>
En v-on: haga clic en la parte posterior para agregar un evento de clic llamado métodos de alerta , antes de intentar dirigir el uso de v-on: haga clic = "alerta ('activó el evento de clic')," pero después de un clicError de consola, No sé si hay un gran dios que entienda por qué es así.
Cuando se usa la instrucción v-on, no solo se pueden activar eventos de clic, como eventos de doble clic y eventos de clic del teclado, etc., solo es necesario modificar v-on: clic o (mousedown, mouseup, etc.) , y podemosv-on: clic se abrevia como @click, El método para desencadenar el evento debe estar escrito en métodos .
- v-si
v-if y v-show pueden lograr una representación condicional, y Vue representará los elementos de acuerdo con las condiciones verdaderas y falsas del valor de la expresión. También hay comandos v-else y v-else-if que se pueden combinar con v-if, similar a if-else y if-elseif-elseif en JavaScript.
En pocas palabras, v-if es equivalente a nuestra operación condicional en el DOM en JavaScript. De acuerdo con el valor de expresión verdadero o falso, podemos realizar una operación condicional en el DOM. Veamos cómo operarlo.
<body>
<div id="app">
<input type="button" value="切换" @click="go">
<p v-if="jump">我跳出来拉</p>
</div>
<script>
new Vue({
el:'#app',
data:{
jump:false
},
methods:{
go:function(){
this.jump=!this.jump;
}
},
})
</script>
</body>
Tenga en cuenta que el v-ifEl valor booleano predeterminado es falso, Y v-if está directamente enJUICIOOperación, y el subsecuente v-show es correctoestiloOperación.
- v-show
El uso de v-show es aproximadamente el mismo que v-if. La diferencia es que los elementos con v-show siempre se renderizarán y se mantendrán en el DOM. V-show simplemente cambia la visualización de la propiedad CSS del elemento, cuando la propiedad de la plantilla es true Cuando la consola muestra display: block; cuando el valor del atributo es falso, la consola muestra display: none.
v-show no es compatible con la sintaxis <tempalte>, ni es compatible con v-else.
<body>
<div id="app">
<input type="button" value="切换" @click="go">
<p v-show="jump">我跳出来拉</p>
</div>
<script>
new Vue({
el:'#app',
data:{
jump:false
},
methods:{
go:function(){
this.jump=!this.jump;
}
},
})
</script>
</body>
La diferencia entre v-show y v-if
- Todos se basan en el verdadero o falso de la expresión para determinar la visualización y ocultación del elemento.
- v-if solo representa el elemento cuando la condición es verdadera, y v-show siempre representa el elemento independientemente de la condición inicial.
- El costo inicial de v-show es mayor y el costo de cambio de v-if es mayor
- Use v-show cuando cambie con frecuencia; use v-if cuando las condiciones de funcionamiento rara vez cambian
- v-for
In Vue, se proporciona la instrucción v-for para realizar un bucle de datos.
<body>
<div id="app">
<h>开始循环</h>
<li v-for="index in item"> //index用于遍历item中的所有元素
{
{
index}}
</li>
</div>
<script>
new Vue({
el:'#app',
data:{
item:[1,2,3,4,5],
},
methods:{
},
})
</script>
</body>
<body>
<div id="app">
<h>开始循环</h>
<li v-for="(index,items) in item">//index表示数组中的元素，items表实元素的下标
{
{
index}},{
{
items}}
</li>
</div>
<script>
new Vue({
el:'#app',
data:{
item:[1,2,3,4,5],
},
methods:{
},
})
</script>
</body>
Puede usar de en lugar de in como delimitador, porque está más cerca de la sintaxis de los iteradores de JavaScript
<div v-for = "index in items">
- Lo
más importante de v-model es el enlace de datos bidireccional . Cuando se usa Vue para manipular elementos DOM, la vista y los datos cambian al mismo tiempo según cada lado.
<body>
<div id="app">
输入内容：<input type="text" v-model="message"><br/> <!--v-model绑定了输入框与message中的内容-->
反转内容：{
{
reversedMessage}}
</div>
<script>
new Vue({
el:'#app',
data:{
message:''
},
computed:{
//计算属性在computed选项中定义，当计算属性所依赖的值发生变化时，这个属性的值会自动更新
//computed可以换做methods定义一个方法实现相同的功能
reversedMessage: function(){
return this.message.split('').reverse().join('') //选中message中的内容，反转后添加
}
}
})
</script>
</body>
Cuando ingresamos un valor en el cuadro de entrada de entrada, el límitemensajeEl valor del atributo también ha cambiado.Cuando el enlace es exitoso, Vue actualizará cualquier cadena o número válido que ingresemos en la entrada.mensajeValor de atributo para que coincida con el valor que ingresamos, y luego pasarinvertedMessageEl métodomensajeVuelva a imprimirlo al revés en == { {reversedMessage}} ==, debido a que es un enlace de datos bidireccional , los tres ocurren al mismo tiempo.
- v-bind
La función de v-bind es vincular atributos a elementos, escrito v-bind: nombre de atributo, que puede abreviarse como ": nombre de atributo".
<body>
<div id="app">
<img :src="imgsrc" :title="imgtitle">
</div>
<script>
new Vue({
el:'#app',
data:{
imgsrc:"xxx",
imgtitle:"获得图片",
},
methods:{
},
})
</script>
</body>
Ya sea que se trate de etiquetas de clase u otras, puede aprobar ": Nombre de etiqueta"Para vincular atributos al elemento. El contenido del elemento vinculado se utiliza como una variable de JavaScript, por lo que las expresiones de JavaScript se pueden escribir en él.
3. Comentarios finales Hay
un largo camino por recorrer para aprender a programar. Si crees que es bueno, por favor dale Me gusta y compártelo. Gracias por mirar.