Tabla de contenido
Ejemplo de inicio
1. Primero introduzca el entorno de producción vue en la página html y pegue el siguiente código en la etiqueta del cuerpo.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2. Hagamos un ejemplo introductorio, como sigue.
el punto de montaje
La parte encerrada entre llaves será reemplazada por los datos con el mismo nombre en datos.
También puede usar el selector de clases, pero se recomienda usar el selector de identificación porque la identificación es única en el desarrollo real.
Vue gestionará las opciones.elemento de golpey su internoElementos descendientes
De hecho, además de hacer coincidir sin usar etiquetas div, también se pueden usar etiquetas p. La premisa es que id y el coinciden. Pero solo admite etiquetas dobles, como p, h1, head, etc. (las etiquetas html y body no son compatibles).
objeto de datos
Escriba el objeto en datos de la siguiente manera:
para mostrar los datos del tipo de objeto, puede usar directamente el nombre y el atributo del objeto definido.
Por ejemplo
{
{ student.name }} {
{ student.age }}
, de esta manera puede llamar directamente las propiedades del objeto y mostrarlas.
Para las matrices declaradas en datos, el uso es el siguiente:
Uso:
{
{ 数组名[0] }}esto es para mostrar directamente el primer elemento de la matriz.
etiquetas básicas de vue
texto v
Establecer el valor de texto de la etiqueta (textContent)
<h2 v-text="message">hello, world!</h2>
Reemplazará el contenido en h2 con el contenido del mensaje de texto.
Un ejemplo es el siguiente:
También puedes utilizar expresiones de interpolación para concatenar cadenas.
Los resultados son los siguientes
También puede utilizar el siguiente método para realizar expresiones de interpolación
<body>
<div id="app">
<h2 v-text="'hello ' + message"></h2>
<h2>{
{
"hello " + message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Chain"
}
})
</script>
El resultado es el siguiente
- La función de la directiva v-text es establecer el contenido de la etiqueta (textContent)
- El método de escritura predeterminado reemplazará todo el contenido. Utilice la expresión de diferencia {copias} para reemplazar el contenido especificado.
v-html
Su función principal es representar el código html en la etiqueta en lugar de texto sin formato.
<body>
<div id="app">
<p v-html="content"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
content:"<a href='https://www.baidu.com/'>屌毛是你</a>"
}
})
</script>
</body>
El resultado es el siguiente: se representa en un enlace y se puede hacer clic para saltar.
La función de la instrucción v-html es: la estructura html en el contenido HTML interno del elemento establecido se analizará como una etiqueta, y la
instrucción v-text solo se analizará como texto sin importar cuál sea el contenido.
v-encendido
Vincular eventos a elementos
El código de muestra es el siguiente:
<body>
<div id="app">
<input type="button" value="单击事件" v-on:click="doIt">
<input type="button" value="单击事件" @click="doIt">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
methods:{
doIt:function(){
alert("are you 叼毛");
}
}
})
</script>
</body>
Los resultados de la demostración son los siguientes:
pero el uso general no es tan simple, sino con varias funciones y varias palabras clave, como sigue
<body>
<div id="app">
<input type="button" value="单击事件" v-on:click="doIt">
<input type="button" value="单击事件" @click="doIt">
<input type="button" value="双击事件" @dblclick="doIt">
<h2 @click="changeFood">{
{
food }}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Chain",
content:"<a href='https://www.baidu.com/'>屌毛是你</a>",
food:"石头拌稀饭"
},
methods:{
doIt:function(){
alert("are you 叼毛");
},
changeFood:function(){
this.food += "炒鸡好吃！"
}
}
})
</script>
</body>
- La función de la directiva v-on es: vincular eventos para elementos
- No es necesario escribir el nombre del evento.
- El comando se puede abreviar como @
- El método vinculado se define en el atributo de métodos.
Implementación de contraejemplo
Probablemente logre este efecto.
Implementar lógica de pasos:
1. Definir datos en datos: como num
2. Agregar dos métodos en métodos: como agregar (incrementar), sub (disminuir)
3. Usar v-text para establecer num en la etiqueta span
4. Usar v-on para agregar , sub Vinculado a los botones + y - respectivamente
5. La lógica de acumulación: si es menor que 10, se acumulará, de lo contrario solicitará
6. La lógica de decremento: si es mayor que 0, disminuirá, de lo contrario le indicará.
<body>
<div id="app">
<button @click="sub">-</button>
<span>{
{
num }}</span>
<button @click="add">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
add:function(){
if(this.num < 10){
this.num++;
}else{
alert("最大为10，叼毛别点了");
}
},
sub:function(){
if(this.num > 0){
this.num--;
}else{
alert("不能为负");
}
}
}
})
</script>
</body>
El resultado es el siguiente:
Las cosas a tener en cuenta son las siguientes
- Al crear un ejemplo de Vue: el (punto de montaje), datos (datos), métodos (métodos)
- La función de la instrucción v-on es vincular eventos, abreviada como @
- En el método, los datos en datos se obtienen a través de this y palabras clave
- La función de la directiva v-text es establecer el valor de texto del elemento, abreviado como { {}}
v-show
El código de implementación es el siguiente: (Todos lo saben, puedes mostrar u ocultar algo según la edad)
<body>
<div id="app">
<input type="button" value="切换限制级别" @click="man">
<input type="button" value="切换青少年级别" @click="boy">
<img v-show="age >= 18" src="https://img1.mydrivers.com/img/20230305/e103b86e-b368-45bb-93aa-8e4d51964fe2.png">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
age:16
},
methods:{
man:function(){
this.age = 18;
},
boy:function(){
this.age = 16;
}
}
})
</script>
</body>
El efecto es como se muestra a continuación.
Volviendo al tema, la etiqueta v-show esencialmente cambia el atributo de visualización de estilo a ninguno.
Precauciones
- La función de la instrucción v-show es cambiar el estado de visualización del elemento según verdadero y falso.
- El principio es modificar la visualización del elemento para lograr visualización y ocultación.
- El contenido que sigue a la instrucción eventualmente se analizará en un valor booleano.
- Los elementos con un valor verdadero se muestran, los elementos con un valor falso se ocultan.
- Después de que cambien los datos, el estado de visualización del elemento correspondiente se actualizará sincrónicamente.
v-si
v-if y v-show son en realidad similares, ambos se usan para controlar la visualización u ocultación de elementos. La sintaxis es la siguiente.
código de demostración
<body>
<div id="app">
<p v-if="isShow">叼毛</p>
<input type="button" value="切换显示" @click="change">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false
},
methods:{
change:function(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
Resultados de la demostración
La diferencia entre v-show y v-if es que al cambiar, v-if eliminará directamente la etiqueta cuando no se muestra la decoración, mientras que v-show solo cambia el estado de la etiqueta de estilo.
La siguiente figura puede ver claramente los cambios en las dos modificaciones de etiquetas al cambiar.
Utilice v-show para elementos que se cambian con frecuencia, porque v-if modificará el árbol dom y v-show es solo un estilo de operación, por lo que v-show tiene un mejor rendimiento, pero los elementos ocultos de v-show aún se mostrarán. lo cual será una pregunta insegura.
- La función de la instrucción v-if es cambiar el estado de visualización del elemento según si la expresión es verdadera o falsa.
- La esencia es cambiar el estado de visualización manipulando el elemento dom.
- El valor de la expresión es verdadero, el elemento existe en el árbol dom y falso, se elimina del árbol dom.
- Cambie v-show con frecuencia; de lo contrario, use v-if, el consumo de conmutación del primero es pequeño
enlace v
Sintaxis: v-bind: nombre de atributo = expresión
Este v-bind también se puede omitir. Ambas formas son posibles como se muestra a continuación.
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="">
<img :src="imgSrc" alt="" :title="imgtitle+'!!!'">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"https://img0.baidu.com/it/u=340747937,2651100772&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
imgtitle:"可可奈奈"
}
})
</script>
</body>
La etiqueta de título es para mostrar el texto cuando se pasa el mouse sobre ella. Después de la configuración, el texto del título se mostrará cuando se pase el mouse sobre la segunda imagen, pero no se muestra la primera imagen. También se puede ver en el código anterior que el título también se puede concatenar con cadenas.
:title="imgtitle+'!!!'"
<img :src="imgSrc" alt="" :title="imgtitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
La clase de esta etiqueta, es decir, si active tiene efecto depende de si isActive es verdadero o falso.
Ejemplo de cambio de imagen
Este ejemplo combina todo el aprendizaje anterior. Es una buena demostración. Para lograr el efecto, haga clic en la flecha izquierda para cambiar a la imagen anterior; haga clic en la flecha derecha para cambiar a la siguiente imagen y oculte la flecha izquierda, oculte la derecha flecha en el último gráfico.
Sus pasos de implementación son los siguientes.
Explicación: Escribir JavaScript: void (cualquier número) puede evitar que los hipervínculos salten
<body>
<div id="mask">
<div class="center">
<h2 class="title">
<img src="./images/logo.png" alt="">
</h2>
<!-- 图片 -->
<img :src="imgArr[index]" alt="" />
<!-- 左箭头 -->
<a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
<img src="./images/prev.png" alt="" />
</a>
<!-- 右箭头 -->
<a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
<img src="./images/next.png" alt="" />
</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#mask",
data: {
imgArr: [
/* 添加图片路径 */
"./images/00.jpg",
"./images/01.jpg",
"./images/02.jpg",
"./images/03.jpg",
"./images/04.jpg",
"./images/05.jpg",
"./images/06.jpg",
"./images/07.jpg",
"./images/08.jpg",
"./images/09.jpg",
"./images/10.jpg",
],
/* 数组索引 */
index: 0
},
methods: {
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
},
})
</script>
</body>
v-para
Se utiliza para atravesar la matriz para generar automáticamente una estructura de lista, que puede entenderse como copiar y pegar, atravesar automáticamente la matriz y vincular y mostrar los datos del elemento a su vez.
Análisis como se muestra a continuación.
Nota: Lo anterior
:titlees el v-bind utilizado, establezca un atributo tiele para él, pero se puede omitir como: título; entonces {{ index}} significa tomar el subíndice de la matriz
Ejemplo de uso práctico:
código primero
<body>
<div id="app">
<ul>
<li v-for="item in arr">
人称：{
{
item}}
</li>
</ul>
<h2 v-for="i in food">
{
{
i.name}}
</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["你","我","他"],
food:[
{
name:"石头拌稀饭"},
{
name:"黄沙炒米饭"}
]
}
})
</script>
</body>
Los resultados de la demostración son los siguientes:
De hecho, a través del ejemplo anterior, debe comprender que se utiliza v-for, es decir, atraviesa los elementos de datos y los presenta en el mismo formato.
Le estamos agregando dos métodos de clic,Utilice la directiva v-on para vincular
El efecto es el siguiente:
El principio es muy simple: el método para agregar alimentos es agregar nuevos elementos a la matriz y luego, debido a la etiqueta v-for, se recorre y el método para
reducir alimentos es el mismo, usando el método de cambio. cada vez que se elimina el elemento más a la izquierda de la matriz, no se puede atravesar. A este elemento, no se mostrará de forma natural.
v-for puede ser muy conveniente para ayudarnos a generar una lista.
suplemento v-on
Pasar parámetros personalizados, modificadores de eventos.
Ejemplo de uso:
Los resultados de la verificación son los siguientes:
Otro ejemplo, según la tecla Enter del teclado para activar la ventana emergente
modelo v
Obtener y establecer el valor de los elementos del formulario (enlace de datos bidireccional)
Ejemplo de demostración
solicitud de red axios
uso básico de axios
Al usar axios, debe estar conectado a Internet e introducir la sintaxis básica de la biblioteca de solicitud de direcciones en línea de axios proporcionada por el sitio web oficial
. En realidad, es una encapsulación de Ajax.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Se divide en dos, la función de devolución de llamada en respuesta a una ejecución exitosa y la función de devolución de llamada en respuesta a una ejecución fallida, como se muestra en la siguiente figura.
post请求中，第一个参数是url的地址，第二个参数是post的数据
Los siguientes dos documentos de interfaz se utilizan como demostraciones.
Código de muestra (sin vue, js nativo)
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话
*/
document.querySelector(".get").onclick = function () {
axios.get("https://autumnfish.cn/api/joke/list?num=6")
// axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
.then(function (response) {
console.log(response);
},function(err){
console.log(err);
})
}
/*
接口2:用户注册
请求地址:https://autumnfish.cn/api/user/reg
请求方法:post
请求参数:username(用户名,字符串)
响应内容:注册成功或失败
*/
document.querySelector(".post").onclick = function () {
axios.post("https://autumnfish.cn/api/user/reg",{
username:"盐焗西兰花"})
.then(function(response){
console.log(response);
console.log(this.skill);
},function (err) {
console.log(err);
})
}
</script>
</body>
Usando axios en vue
El núcleo de los datos de la red es que parte de los datos de los datos se obtienen a través de la red.Entonces, la solicitud de red se envía en el método y, una vez que la respuesta es exitosa, los datos devueltos por el servidor se vinculan al valor de datos correspondiente.
Pise el pozo, ajax es asíncrono, esta no es una instancia de vue en la función ajax, no puede obtener la instancia en vue a través de esto, por lo que no usará esto en la función axios
esto cambiará, así que la solución es guardarlo primero y definir a that, var that = this;
<body>
<div id="app">
<input type="button" value="获取笑话" @>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
joke:"很好笑的笑话"
},
methods:{
getJoke:function(){
var that = this;
axios.get("https://autumnfish.cn/api/joke").then
(function(response){
console.log(response.data);
that.joke = response.data;
},function(err){
})
}
}
})
</script>
</body>
