1. Introducción a Vue

Es un marco js
Simplifique la manipulación del DOM
Basado en datos receptivos

2. Empezando con vue

1. El primer programa vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个实例</title>
</head>

<body>
<div id="app">
    {
   
   { message }}
</div>
<script src="./js/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"asdhello！"
        }
    })

</script>
</body>
</html>

El método del selector de id, el mensaje y la instancia de vue están vinculados.

Punto de montaje 2.el

El rol de el: se utiliza para configurar los elementos de la gestión de montaje de instancias vue.

Por lo general, el selector de id se usa para enlazar, y los aciertos cuadrados del selector de clase y el selector de etiqueta causarán semánticas poco claras.

La instancia de encuadernación de etiquetas solo puede ser una etiqueta cerrada, no una nota adhesiva no cerrada, que normalmente se monta en una etiqueta div.

¿Cuál es el alcance de la instancia de vue?

Vue administrará el elemento en el nombre de la opción el y sus elementos descendientes.

¿Es posible utilizar otros selectores?

Se pueden usar otros selectores, pero se recomienda el selector de id.

¿Se pueden configurar otros elementos dom?

Se pueden usar otras etiquetas dobles, no se pueden usar html y body, se recomienda div.

3.objeto de datos de datos

Los datos utilizados en vue se definen en datos
Se pueden escribir tipos complejos de datos en datos
Al renderizar datos complejos, simplemente siga la sintaxis js.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个实例</title>
</head>

<body>
<div id="app">
    {
   
   { message }}
<h2>{
   
   {school.name}}{
   
   {school.mobile}}</h2>
<ul>
    <li>{
   
   {campus[0]}}</li>
    <li>{
   
   {campus[1]}}</li>
    <li>{
   
   {campus[2]}}</li>
    <li>{
   
   {campus[3]}}</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"你好，小黑！！",
            school:{
                name:"黑马程序员",
                mobile:400-618-9990
            },
            campus:["北京校区","上海校区","广州校区","深圳校区"]
        }
    })
</script>
</body>
</html>

3. Aplicación local

Obtenga efectos de páginas web comunes a través de vue.
Aprenda instrucciones vue y consolide puntos de conocimiento con casos.
La instrucción vue se refiere a un conjunto de sintaxis especial que comienza con v-.

Instrucción 1.v-text

Establecer el valor de texto de la etiqueta (textContent)

La redacción predeterminada reemplazará todo el contenido y el contenido especificado se puede reemplazar con la expresión de diferencia { {}}
Apoyar la escritura de expresiones internamente

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个实例</title>
</head>

<body>
<div id="app">
    <h2 v-text="message">深圳<h2>
    <h2>深圳{
   
   {message}}</h2>
</div>
<script src="./js/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"asdhello！"
        }
    })

</script>
</body>
</html>

Comando 2.v-html

Establezca el innerHTML de la etiqueta.
La estructura html del contenido se analizará en etiquetas.
El comando v-text solo se analizará como texto independientemente de su contenido.
Use v-text para analizar el texto y use v-html para analizar la estructura html.

A diferencia del comando v-text, v-html puede reconocer el lenguaje html, mientras que v-text trata el lenguaje html como texto normal.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个实例</title>
</head>

<body>
<div id="app">
   <p v-text='content'></p>
   <p v-html='content'></p>
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
           content:"<a href='http:/www.itheima.com'>黑马程序员！</a>"
        }
    })
</script>
</body>
</html>

[Error en la transferencia de la imagen del enlace externo. El sitio de origen puede tener un mecanismo anti-hotlinking. Se recomienda guardar la imagen y subirla directamente (img-SGiANoNP-1608016665000) (C: \ Users \ jiangdada \ AppData \ Roaming \ Typora \ typora-user-images \ 1594029017433.png)]

Instrucción 3.v-on

Vincular eventos al elemento.
No es necesario escribir el nombre del evento
La instrucción se puede abreviar como @
El método de vinculación se define en el atributo de métodos.
Dentro del método, se puede acceder a los datos definidos en data mediante la palabra clave this.

<div id="app">
<!--点击事件-->
<input type="button" value="事件绑定" v-on:click="dolt">
<!--鼠标滑过-->
<input type="button" value="事件绑定" v-on:monseenter="dolt">
<!--双击击事件-->
<input type="button" value="事件绑定" v-on:dblclick="dolt">
<!--vue中支持将v-on转换成@来表示-->
<input type="button" value="事件绑定" @click="dolt">
</div>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
          },
        methods:{
         doft:function(){
         //逻辑
         }
        }
    })
</script>

El código de muestra es el siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个实例</title>
</head>

<body>
<div id="app">
  <input type="button" value="v-on指令" v-on:click="doIT">
  <input type="button" value="v-on简写" @click="doIT">
  <input type="button" value="v-on双击" @dblclick="doIT">
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
       methods:{
           doIT:function(){
               alert("做IT");
           }
       }
    })
</script>
</body>
</html>

4. Contador

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计数器</title>
</head>

<body>
<div id="app">
 <button @click="sub">-</button>
 <span>{
   
   {num}}</span>
 <button @click="add">+</button>
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
            num:1,
        },
       methods:{
         add:function(){
            if(this.num<10){
            this.num++;
            }
            else{
                alert("别加了！")
            }

         },
         sub:function(){
            if(this.num>0){
            this.num--;
            }
            else{
                alert("别减了！")
            }
         }
       }
    })
</script>
</body>
</html>

Comando 5.v-show

Según el verdadero o falso de la expresión, cambie la visualización y ocultación del elemento.
El principio es modificar la visualización del elemento para lograr mostrar y ocultar.
El contenido después de la instrucción finalmente se analizará como un valor booleano.
Se muestran los elementos con un valor de verdadero y se ocultan los elementos con un valor de falso.
Después de que se cambien los datos, el estado de visualización del elemento correspondiente se actualizará sincrónicamente.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show指令</title>
</head>

<body>
<div id="app">
    <input type="button" value="切换显示状态" @click="changeIsShow">
    <div v-show="isShow">saodjasoid</div>
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
            isShow:false,
        },
        methods:{
            changeIsShow:function(){
            this.isShow=!this.isShow;
            }
        }
    })
</script>
</body>
</html>

6.v-if instrucción

Según el verdadero o falso del valor indicado, cambie la visualización y oculte el elemento (manipule el elemento dom)
La esencia es manipular el elemento dom para cambiar el estado de visualización.
El valor de la expresión es verdadero, el elemento existe en el árbol dom y falso se elimina del árbol dom.
Conmutación frecuente de v-show, y viceversa, usando v-if, el primero consume menos conmutación.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if指令</title>
</head>

<body>
<div id="app">
    <input type="button" value="切换显示状态" @click=" toggleIsShow">
    <p v-if="isShow">黑马程序员</p>
    <p v-show="isShow">黑马程序员 v-show!</p>
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
            isShow:false,
        },
        methods:{
           toggleIsShow:function(){
               this.isShow=!this.isShow;
           }
        }
    })
</script>
</body>
</html>

Nota: a diferencia de v-show, v-if es el dominio de operación, mientras que v-show es el estilo de operación.

Instrucción 7.v-bind

Establecer atributos de elementos como src, titile, class
Necesita agregar y eliminar clases dinámicamente para sugerir el uso de objetos.

Método de escritura:

v-bind:src="imgsrc"
可以简写为:
:src=""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show指令</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <img v-bind:src="imgSrc" alt="">
    <br>
   <img :src="imgSrc" alt="" :class="isActive?'active':''" @click="toggleActive">
   <br>
   <img :src="imgSrc" alt="" :class="{active:isActive}"  @click="toggleActive">

</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
         imgSrc:"http://www.itheima.com/images/logo.png",
         isActive:true,
        }, 
        methods:{
        toggleActive:function(){
             this.isActive=!this.isActive;
             console.log("点击事件被触发")
        }
        },
    })
</script>
</body>
</html>
</html>

Puede usar expresiones ternarias y también puede usar objetos, como

<!--对三元表达式写法的时候要记得给css样式加上单引号-->
<img :src="imgSrc" alt="" :class="isActive?'active':''" @click="toggleActive">
   <br>
<!--对象的写法，css样式的显示取决于冒号后面对象的真假-->
<img :src="imgSrc" alt="" :class="{active:isActive}"  @click="toggleActive">

8.v-para instrucción

Genere una estructura de lista basada en datos.
Las matrices se utilizan a menudo en combinación con v-for.
La sintaxis es (elemento, índice) en el elemento de la matriz y el índice se puede cambiar siempre que se ajusten a las reglas de nomenclatura
El elemento y el índice se pueden utilizar junto con otras instrucciones.
La actualización de la longitud de la matriz se sincronizará con la página, que responde.

item corresponde a cada valor de elemento de la matriz y el índice corresponde al valor de subíndice de la matriz. Las variables se pueden cambiar a otras representaciones, simplemente siga las reglas de nomenclatura.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for指令</title>
</head>

<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in arr">{
   
   {index+1}}黑马程序员校区:{
   
   {item}}</li>
    </ul>
    <input type="button" value="添加数据" @click="add">
    <input type="button" value="移除数据" @click="remove">
   <ul>
       <li v-for="(item,index) in vegetables"  :title="item.name">
         {
   
   {index}}{
   
   {item.name}}
       </li>
   </ul>
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
          arr:["北京","上海","广州"],
          vegetables:[
              {name:"西兰花炒蛋"},
              {name:"蛋炒西兰花"}
          ],
        },
        methods:{
           add:function(){
               //push方法将元素追加到数组是尾部
               this.vegetables.push({name:"花菜炒蛋"})
           },
           remove:function(){
               //shift方法删除数组第一个元素
               this.vegetables.shift();
           }
        }
    })
</script>
</body>
</html>

Suplemento 9.v-on

Pase parámetros personalizados, modificadores de eventos.

El evento es seguido por el modificador. Para limitar el evento.
.enter puede limitar el botón activado para ingresar
Hay muchos modificadores de eventos.
Evento de teclado hacia abajo: keydown () se activa cuando se presiona el
teclado . Evento de teclado hacia arriba: keyup () se activa cuando se suelta el teclado.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on补充</title>
</head>

<body>
<div id="app">
    <input type="button" value="点击" @click="doIt(6666,'老铁')">
    <input type="text"  @keyup.enter="sayhi">
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{        
        },
        methods:{
         doIt:function(p1,p2){  
            console.log("do it!!!!")
            console.log(p1,p2)
         },
         sayhi:function(){
             alert("吃了没！")
         }
        }
    })
</script>
</body>
</html>

Instrucción del modelo 10.v

Obtenga y establezca el valor del elemento de formulario (enlace de datos bidireccional).
Los datos enlazados se asociarán con el valor del elemento de formulario.
Los datos enlazados son equivalentes al valor del elemento de formulario, enlace bidireccional.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个实例</title>
</head>

<body>
<div id="app">
  <input type="button" value="修改"    @click="setM">
  <input type="text" v-model="message" @keyup.enter="getM">
  <h2>{
   
   {message}}</h2>

</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
            message:"黑马程序员"
        },
       methods:{
         getM:function(){
             alert(this.message);
         },
         setM:function(){
             this.message="酷丁鱼";
         }
       }
    })
</script>
</body>
</html>

11 Aplicación-Bloc de notas

Funciones: agregar, eliminar, contar, borrar, ocultar

1. Nuevo

Generar estructura de lista v-for array
Obtener el modelo v de entrada del usuario
Presione Enter para agregar datos @ keyup.enter push

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本</title>
</head>
<body>
<div id="todoapp">
    <input type="text" v-model="inputValue"  @keyup.enter="add">
    <ul>
        <li v-for="(item,index) in list"> {
   
   {index+1}}{
   
   {item}}</li>
    </ul>
   
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#todoapp",
        data:{
           list:["写代码","吃饭饭","睡觉觉"],
           inputValue:"好好学习，天天向上！",
        },
        methods:{
        add:function(){
            this.list.push(this.inputValue);
        },
        }
    })
</script>
</body>
</html>

2. Eliminar función

Eliminar el empalme v-on de contenido especificado
Los datos cambian y el elemento de enlace de datos cambia sincrónicamente
Parámetros personalizados para eventos
La función del método de empalme, el primer parámetro es el valor del índice que se eliminará y el segundo parámetro es el número de eliminaciones.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本</title>
</head>
<body>
<div id="todoapp">
    <input type="text" v-model="inputValue"  
    placeholder="请输入任务...." @keyup.enter="add">
    <ul>
        <li v-for="(item,index) in list"> {
   
   {index+1}}{
   
   {item}}
            <button   @click="remove(index)">x</button>           
        </li>
    </ul>
   
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#todoapp",
        data:{
           list:["写代码","吃饭饭","睡觉觉"],
           inputValue:"好好学习，天天向上！",
        },
        methods:{
        add:function(){
            this.list.push(this.inputValue);
        },
        remove:function(index){
         console.log("remove",index)
         this.list.splice(index,1)
        }
        }
    })
</script>
</body>
</html>

3. Función estadística

Número de información estadística, texto en V, longitud

<div>统计功能:{
   
   {list.length}}</div>

Método de desarrollo basado en datos
El papel del comando v-text

4. Función clara

Haga clic para borrar toda la información v-on

  clear:function(){
            this.list=[];
        }

¡Esencialmente, el vaciado de la matriz!

5. Funciones ocultas

Cuando no haya datos, oculte el elemento. v-show, v-if, la matriz no está vacía

<div V-if="list.length!=0">
     <div>统计功能:{
   
   {list.length}}</div>
     <input type="button" value="清空" @click="clear">
   <div>

Cuatro, aplicación de red

La biblioteca de solicitudes de red axios combina vue.

1.axios + vue

https://autumnfish.cn/api/joke Interfaz de broma aleatoria

La función this in the axios callback ha sido modificada y no se puede acceder a los datos en data.
Guarde esto y use lo guardado directamente en la función de devolución de llamada
La mayor diferencia con las aplicaciones locales es que se cambia la fuente de datos.

<div id="app">
    <input type="button" value="获取笑话" @click="getJoke">
    <p>{
   
   {joke}}</p>
</div>
<script src="./node_modules/axios/dist/axios.js"></script>
<script src="./js/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)
                    console.log(response.data)
                    that.joke=response.data;
                },function(err){
                    console.log(err)
                })
            }
        }
    })
</script>

2. Dios sabe-aplicación

Presione enter v-on enter
Consulta de datos axios interfaz modelo v
Representación de datos

<body>
<div id="app">
  <input type="text" v-model="city" @keyup.enter="searchWeather">
  <ul>
      <li v-for="item in weatherList">{
   
   {item.date}}{
   
   {item.type}}</li>
  </ul>
</div>
<script src="./node_modules/axios/dist/axios.js"></script>
<script src="./js/vue.js"></script>  
<script> 
    var app=new Vue({
        el:"#app",
        data:{
            city:'',
            weatherList:[],
        },
        methods:{
                searchWeather:function(){
               var that=this;
                axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
                .then(function(response){
                   console.log(response.data);
                   that.weatherList=response.data.data.forecast;
                   console.log(that.weatherList);
                }).catch(function(err){})
                }
            }
    })
</script>
</body>

Uso simple de Vue para el desarrollo web front-end