Vue learning --- conocimiento básico de instrucciones, monitoreo, filtros, etc. basados en vue2.

1. Conoce Vue

Motivo: el uso de la operación directa nativa de los nodos dom hará que la página se vuelva a procesar cada vez. Si la operación es frecuente, la página se procesará con frecuencia, se congelará con frecuencia y será de baja eficiencia.

Vu es un marco progresivo para construir interfaces de usuario.

A diferencia de otros marcos grandes, Vue está diseñado para aplicarse capa por capa de abajo hacia arriba. La biblioteca central de Vue solo se enfoca en la capa de vista, que no solo es fácil de usar, sino también fácil de integrar con bibliotecas de terceros o proyectos existentes.

El contenido involucrado en el marco Vue incluye: descripción general del desarrollo de Vue.js, construcción del entorno, instrucciones de Vue, construcción de aplicaciones de componentes, comunicación de componentes, anidamiento de componentes, instrucciones personalizadas, filtros personalizados, propiedades de componentes, enrutamiento de componentes, saltos de enrutamiento.

Nota : Vue no admite versiones anteriores a IE8.

1.1vue.js es el modelo de desarrollo de MVVM

MVVM es un acrónimo de Model-View-ViewModel. MVVM es una filosofía de diseño. La capa Modelo representa el modelo de datos, y la lógica comercial de modificación y operación de datos también se puede definir en el Modelo; la Vista representa el componente de IU, que es responsable de convertir el modelo de datos en una pantalla de IU, y ViewModel es un objeto que sincroniza la Vista y el Modelo

Bajo la arquitectura MVVM, no hay conexión directa entre View y Model, sino interacción a través de ViewModel.La interacción entre Model y ViewModel es bidireccional, por lo que los cambios en los datos de View se sincronizarán con Model, mientras que los cambios en los datos de Model también serán inmediatos. reflejada en la Vista.

1.2 Características del marco vue

1. Desarrollo de componentes, mejorar la tasa de reutilización de código

2. Programación declarativa (más enfoque en los datos), anteriormente programación imperativa, ya no se manipulan árboles DOM complejos

3. DOM virtual

   En Vue.js, usamos plantillas para describir la relación de mapeo entre el estado y el DOM. Vue.js convierte la plantilla en una función de renderizado (render) al compilar la plantilla y ejecuta la función de renderizado (render) para obtener un nodo virtual El árbol de nodos virtuales puede representar la página.

   Plantilla -------->Función de representación----------->vnode---------->Ver (página)

   vnode: es un nodo virtual, que se genera en la memoria de la computadora y tiene una alta eficiencia; la eficiencia de ejecución de la modificación repetida de datos en un corto período de tiempo sigue siendo muy alta

   El objetivo final del DOM virtual es representar nodos virtuales (vnodes) en vistas. Pero si usa directamente el nodo virtual para cubrir el nodo anterior, habrá muchas operaciones DOM innecesarias.

   Para evitar operaciones DOM innecesarias, el DOM virtual compara los nodos virtuales con los antiguos nodos virtuales utilizados para representar la vista la última vez durante el proceso de mapeo de los nodos virtuales a la vista, y encuentra los nodos que realmente necesitan ser actualizados. para realizar operaciones DOM. Evite manipular otros DOM sin ningún cambio .

   1. Proporcione el nodo virtual vnode correspondiente al nodo DOM real

   2. Compare el nodo virtual vnode con el antiguo nodo virtual oldVnode, cómo actualizar la vista.

2. Construcción del entorno

2.1 <script>Importar directamente

Descargue el archivo vue.js directamente e <script>impórtelo con etiquetas

<script src=”c:/vue/2.6.14/vue.min.js” />

2.1, cdn

<script src=”https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js” />

2.3, npm

Se recomienda la instalación de NPM al crear aplicaciones grandes con Vue . NPM funciona bien con paquetes de módulos como webpack o Browserify. Al mismo tiempo, Vue también proporciona herramientas de apoyo para desarrollar componentes de un solo archivo.

npm i vue

2.4 Herramienta de línea de comandos (cli)

Vue proporciona una herramienta de línea de comandos oficial que se puede usar para crear rápidamente aplicaciones grandes de una sola página. La herramienta proporciona configuraciones de compilación listas para usar para flujos de trabajo de desarrollo front-end modernos. Solo toma unos minutos crear e iniciar un proyecto con recarga en caliente, verificación estática al guardar y una configuración de compilación lista para producción:

# 全局安装 vue-cli
$ npm i -g @vue/cli
# 创建一个基于 webpack 模板的新项目
$ vue create my-project
# 进入项目目录, 启动服务，走你
$ cd my-project
$ npm run serve

Solo necesita usar una de las cuatro formas anteriores para presentar Vue.

3. Comando Vue

sintaxis de plantilla

Vue.js utiliza la sintaxis de plantilla de HTML básico, lo que permite a los desarrolladores vincular declarativamente DOM a los datos de la instancia subyacente de Vue.

En esencia, Vue.js es un sistema que le permite representar datos de forma declarativa en el DOM mediante una sintaxis de plantilla concisa.

En combinación con el sistema de respuesta, cuando cambia el estado de la aplicación, Vue puede calcular de manera inteligente el costo mínimo de volver a renderizar los componentes y aplicarlo a las operaciones DOM.

3.1 Enlace de datos (interpolación)

• { {…}} (llaves dobles) interpolación de texto, utilizada para enviar datos al contenido del elemento

Gramática:<div>{ {表达式}}</div>

• v-bind: vincula datos al atributo de la etiqueta, que se puede abreviar como: (dos puntos)

  gramática:<div v-bind:id=”表达式”></div>

  <h2 :style="{ color: color }" :title="title" id="big"> { {title}} </h2>

Obtenga los datos definidos en la instancia fuera de la instancia de vue

vm.título

vm.$datos.título

Modificar los datos definidos en la instancia fuera de la instancia de vue

vm.title = 'Expresión'

Ejemplo:

archivo html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 挂载节点 -->
    <div id="app">
        <!-- {
    
    {}} 插值表达式, 用来绑定数据到标签内容区 -->
        <h2> {
   
   {title}} </h2>
        <!-- v-bind: 绑定数据到 标签的属性, 可以简写为 : -->
        <h2 :style="{ color: color }" :title="title" id="big"> {
   
   {title}} </h2>
        <h2> {
   
   {count}} </h2>    
        
    </div>

    <script src="./vue-2.5.21.js"></script>
    <script src="./index.js"></script>
</body>
</html>

archivo js

// 由于 vue-2.5.21.js 文件( vue的核心库文件 ) 对外暴露了Vue函数, 所以就可以直接使用Vue函数实例化对象

//实例化Vue对象, 并挂载对象到app节点
var vm = new Vue({
    
    
    el: '#app',
    data: {
    
     //data 负责定义数据, 内部定义的数据都是响应式数据, 数据会自动添加在Vue实例对象身上.
        title: '今天开始学习vuejs',
        count: 888,
        color: 'red'
    }
})

// 在Vue实例的外面 获取实例中定义的数据
// vm.title
// vm.$data.title

// 在Vue实例的外面 修改实例中定义的数据, 修改响应式数据的同时,任何绑定了该数据的地方都会自动更新(程序员只需要提前绑定数据到页面, 操作数据就可以了,页面的更新交给vuejs完成).
// vm.title = 'vuejs'

3.2 Representación de listas

v-forLas listas se pueden representar en función de matrices y objetos.

gramática:

<div v-for=”(item,index) in数组” :key=”index”>

{ {elemento}}

</div>

Caso 1:

archivo HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
      
      
            padding: 5px 10px;
            background-color: #aaa;
            margin-right: 10px;
            margin-bottom: 5px;
            display: inline-block;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- v-for 列表渲染, item 是数组元素, index 是元素下标 -->
        <!-- v-for="(item,index) in 数组" -->
        <span v-for="(item,index) in arr">{
   
   {item}}</span>
    </div>
</body>

</html>
<script src="vue-2.5.21.js"></script>
<script src="index-列表渲染.js"></script>

archivo js:

var vm = new Vue({
    
    
    el: '#app',
    data: {
    
    //负责定义数据
        arr: ['麻辣烫', '米线', '披萨', '蛋糕', '汉堡', '腊八粥', '烤肉拌饭', '炸鸡', '味多美']
    }
});

Caso 2:

archivo HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
      
      
            margin: 0;
            padding: 0;
        }

        #app {
      
      
            display: flex;
            flex-wrap: wrap;
        }

        .block {
      
      
            width: 20%;
            text-align: center;
            font-size: 12px;
            margin-bottom: 10px;
        }

        .block img {
      
      
            width: 60%;
            margin-bottom: 10px;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="block" v-for="(item,index) in arr">
            <img v-bind:src="item.pic" alt="">
            <div class="name">{
   
   {item.name}}</div>
        </div>
    </div>
</body>

</html>
<script src="vue-2.5.21.js"></script>
<script src="index-列表渲染2.js"></script>

archivo js

var picUrl = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F23%2F20210723125859_f6b2f.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668062633&t=127aac56735411349eab6ddb49fd8cce';

var vm = new Vue({
    
    
    el: '#app',
    data: {
    
    
        arr: [
            {
    
     pic: picUrl, name: '护肤' },
            {
    
     pic: picUrl, name: '彩妆' },
            {
    
     pic: picUrl, name: '香氛' },
            {
    
     pic: picUrl, name: '进口酒' },
            {
    
     pic: picUrl, name: '国产酒' },
            {
    
     pic: picUrl, name: '精品奢货' },
            {
    
     pic: picUrl, name: '食品百货' },
            {
    
     pic: picUrl, name: '母婴专区' },
            {
    
     pic: picUrl, name: '直播专区' },
            {
    
     pic: picUrl, name: '特卖专场' }
        ]
    }
})

3.3 Gestión de eventos

v-on se utiliza para vincular eventos al elemento de destino, cualquier evento compatible con el elemento se puede vincular

gramática:<div v-on:事件类型=”js代码”></div>

Si hay mucho código js que debe ejecutarse cuando se activa el evento, puede escribir el código js en una función js y llamar a la función cuando se activa el evento.

gramática:<div v-on:事件类型=”函数名”></div>

Si se llama a la función cuando se activa el evento y se deben pasar parámetros, se puede escribir así:

gramática: <div v-on:事件类型=”函数名(参数)”></div>

caso:

Al hacer clic en el botón de reclamo en qué pestaña, se puede usar el botón en la pestaña actual

archivo html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
      
      
            margin: 0;
            padding: 0;
        }

        #app {
      
      
            display: flex;
            flex-wrap: wrap;
            padding: 10px;
            font-size: 12px;
            justify-content: space-between;
            align-items: center;
        }

        .card {
      
      
            width: 30%;
            background-color: #f5f5f5;
            margin-bottom: 10px;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="card" v-for="(item,index) in arr">
            <div class="price">￥{
   
   {item.price}}</div>
            <div class="title">{
   
   {item.title}}</div>
            <div class="cond">满{
   
   {item.cond}}元可用</div>
            <!-- v-on： 事件绑定  , 可以简写为 @ -->
            <!-- v-on:事件类型="js代码"  js代码的位置可以放置一个函数,或 函数调用, 调用时可以向函数内部传参 -->
            <!-- <button v-on:click="lingqu(item,index)">{
    
    {item.lq?'去使用':'领取'}}</button> -->
            <button @click="lingqu(item,index)">{
   
   {item.lq?'去使用':'领取'}}</button>
        </div>
    </div>
</body>

</html>
<script src="vue-2.5.21.js"></script>
<script src="index-列表渲染3.js"></script>

archivo js

var vm = new Vue({
    
    
    el: '#app',
    data: {
    
    
        arr: [
            {
    
     title: '大型超市外送', price: 6, cond: 8, lq: false },
            {
    
     title: '吃货红包', price: 3, cond: 6, lq: false },
            {
    
     title: '买药红包', price: 3, cond: 8, lq: false },
            {
    
     title: '水果外送红包', price: 7, cond: 10, lq: false },
            {
    
     title: '吃货红包', price: 6, cond: 6, lq: false },
            {
    
     title: '吃货红包', price: 5, cond: 10, lq: false },
        ]
    },
    methods: {
    
    //负责定义函数，多个函数用逗号分割
        // lingqu:function(){
    
    

        // }
        lingqu(item, index) {
    
    
            // 修改当前点击红包对象的lq属性的值，改为true
            item.lq = true;
            // 在函数(方法)中，使用this，this是当前Vue实例对象
            console.log(this.arr);
        }

    }
})

3.4 Entrada de formulario

v-model se utiliza para vincular el contenido del formulario a las variables, v-model es una instrucción de "vinculación de datos bidireccional" (cuando el usuario opera un elemento de formulario, el valor del elemento se guardará automáticamente en la variable vinculada, cuando el el valor de los cambios de la variable se mostrará automáticamente en el elemento de formulario)

gramática: <input v-model=”变量”></input>

el caso

archivo html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
      
      
            margin: 0;
            padding: 0;
        }

        #app {
      
      
            margin: 10px 5px;
        }

        .searchbox {
      
      
            display: flex;
            align-items: center;
        }

        .searchbox input {
      
      
            height: 40px;
            border: 0px;
            outline: none;
            background-color: #f5f5f5;
            padding-left: 20px;
            color: #999;
            font-size: 14px;
            flex: 1;
            border-radius: 20px;
        }

        .searchbox span {
      
      
            width: 40px;
            text-align: center;
        }

        .block {
      
      
            margin: 10px;
        }

        .block .title {
      
      
            font-weight: bold;
            padding: 10px 0;
        }

        .block .list span {
      
      
            display: inline-block;
            background-color: #f5f5f5;
            padding: 5px 10px;
            border-radius: 5px;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="searchbox">
            <!-- v-model 表单数据绑定, 也是唯一一个具有双向数据绑定特点的指令 -->
            <!-- v-model 指令主要配合表单元素使用 -->
            <input type="text" placeholder="输入关键字" v-model="searchText">
            <span @click="search">搜索</span>
        </div>
        <div class="block">
            <div class="title">历史搜索</div>
            <div class="list">
                <span v-for="(item,index) in searchArr">{
   
   {item}}</span>
            </div>
        </div>
    </div>
</body>

</html>
<script src="vue-2.5.21.js"></script>
<script src="输入框的绑定.js"></script>

archivo js

var vm = new Vue({
    
    
    el: '#app',
    data: {
    
    //负责定义响应式数据
        searchText: '',//保存输入框输入的内容(临时)
        searchArr: [
            '三文鱼', '慈善', '与'
        ]
    },
    methods: {
    
    //负责定义方法(函数)
        search() {
    
    

            if (this.searchText) {
    
    
                // 将输入框中输入的内容 保存到searchArr中
                this.searchArr.push(this.searchText);
                // 清空输入框
                this.searchText = '';
            }
        }
    }
})

3.5 Caso de inicio de sesión

archivo html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
      
      
            margin: 0;
            padding: 0;
        }

        #app {
      
      
            margin: 50px;
        }

        .title {
      
      
            font-weight: bold;
            margin: 50px 0;
            text-align: center;
            font-size: 20px;
        }

        .block {
      
      
            margin: 50px 0;
        }

        .block input {
      
      
            height: 40px;
            width: 100%;
            border: none;
            outline: none;
            background-color: #f5f5f5;
            padding-left: 20px;
            border-radius: 20px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="title">登录页</div>
        <div class="block">
            <input type="text" placeholder="账号" v-model="id">
        </div>
        <div class="block">
            <input type="password" placeholder="密码" v-model="pwd">
        </div>
        <div class="block">
            <input type="button" value="登陆" @click="login">
        </div>
    </div>
</body>

</html>
<script src="vue-2.5.21.js"></script>
<script src="登录.js"></script>

archivo js

var vm = new Vum({
    
    
    el: '#app',
    data: {
    
    
        id: '',
        pwd: ''
    },
    methods: {
    
    
        login() {
    
    
            console.log(this.id, this.pass);
            // 获取到输入的账号，密码，发请求
            // 。。。

            // 可以随时清空输入框的值
            this.phone = '';
            this.pass = ''
        }
    }
})

3.6 carrito de compras

representación condicional

Cuando la condición v-if es verdadera, el elemento se representa; de lo contrario, no se representa

Cuando la condición v-else no es verdadera, renderiza el elemento

v-otro-si

Cuando se cumple la condición v-show, se muestra el elemento; de lo contrario, no se muestra

Aviso:

• Las instrucciones de representación condicional v-if , v-else se utilizan para controlar la visualización/ocultación de la etiqueta, deben colocarse en dos etiquetas hermanas, la etiqueta se representa cuando la condición es verdadera y la etiqueta no se representa si la condición no es verdad
• Cuando v-if y v-for se colocan en la misma etiqueta, v-for tiene una prioridad más alta y v-if no será válido. Este uso debe evitarse.
• v-show controla la visualización y ocultación de etiquetas a través de condiciones, esencialmente realizando la visualización/ocultación de etiquetas controlando la visualización de etiquetas de estilo css
• v-show Ya sea que la condición sea verdadera o no, la etiqueta definitivamente representará

el enlace de datos

La directiva v-html se usa para enviar datos al contenido del elemento (que puede analizar etiquetas).

gramática:<div v-html=”表达式”></div>

La directiva v-text se usa para enviar datos al contenido del elemento (no se pueden analizar las etiquetas).

gramática:<div v-text=”表达式”></div>

Aviso

• Tanto v-html como v-text pueden vincular datos al contenido de la etiqueta y tener el mismo efecto que { {}}
• v-html puede analizar etiquetas
• v-text no puede analizar etiquetas
• { {}} no pudo analizar la etiqueta

renderizado de lista

v-for v-for puede generar listas basadas en matrices y objetos

gramática:

<div v-for=”(item,index) in数组” :key=”index”>
{
   
   {item}}
</div>

​ Explicación: El elemento en el que se coloca el comando v-for finalmente generará n elementos de acuerdo con la longitud n de la matriz, incluidos los subelementos internos, formando una lista y vinculando cada elemento de la lista procesada a través del atributo clave Un único index para evitar las advertencias de vue.

El papel del atributo clave

El atributo clave se usa principalmente en el algoritmo DOM virtual de Vue para identificar VNodes al comparar nodos antiguos y nuevos ; si no se usa ninguna clave, Vue usará un algoritmo que minimiza los elementos dinámicos e intenta modificar/reutilizar el mismo tipo de elementos en su lugar como tanto como sea posible; al usar la clave, reorganizará el orden de los elementos en función del cambio de clave, y eliminará/destruirá los elementos cuya clave no existe

Al insertar o restablecer el orden, el uso del atributo clave puede hacer que el algoritmo de diferencias sea más eficiente y mejorar la eficiencia de representación

En para

Deje que el contenido de la etiqueta se muestre tal cual, en lugar de compilarlo y mostrarlo

<h1 v-pre>{
   
   {msg}}</h1>
    <h1 v-pre>{
   
   {1+1}}</h1>

v-una vez

Función: permite que el elemento/componente se represente solo una vez, para evitar actualizaciones no válidas

El elemento solo se representa una vez. Cuando la página se está ejecutando, el mensaje se representará en la página. Al hacer clic, el mensaje cambiará pero no se volverá a representar en la página.

<h1 v-once @click="msg=888">{
   
   {msg}}</h1>

 data(){
    return {
      msg:'Vuejs项目'
    }
  }

V-capa

Evite que los elementos muestren llaves dobles antes del final del renderizado

Resuelva el problema de renderizar el resultado después de renderizar en la página, no aparecerán llaves dobles

 <h1 v-cloak>{
   
   {msg}}</h1>
 
 data(){
    return {
      msg:'Vuejs项目'
    }
  }

3.7 Clasificación de matrices

mysort(index){
    
    
            if( index == 0 ){
    
     //点击了第一个按钮
                this.list.sort((a,b)=>{
    
    
                    return a.price - b.price;
                })
            }
            else if( index == 2 ){
    
     //点击了第三个按钮
                this.list.sort((a,b)=>{
    
    
                    return b.count - a.count;
                })
            }
        }

caso:

archivo html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
      
      
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
      
      
            height: 100%;
        }

        #app {
      
      
            height: 100%;
            position: relative;
            background-color: rgba(0, 0, 0, .3);
        }

        .shopcart {
      
      
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            padding: 15px;
            padding-bottom: 80px;
            background-color: white;
        }

        .shopcart .title {
      
      
            display: flex;
            justify-content: space-between;
        }

        .shopcart .title span:nth-child(1) {
      
      
            font-weight: bold;
        }

        .shopcart .list .good {
      
      
            display: flex;
            margin: 10px 0;
        }

        .shopcart .list .good .imgbox {
      
      
            width: 80px;
            margin-right: 10px;
        }

        .shopcart .list .good .imgbox img {
      
      
            width: 100%;
        }

        .shopcart .list .good .text {
      
      
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .shopcart .list .good .text .name {
      
      
            font-weight: bold;
        }

        .shopcart .list .good .text .price {
      
      
            display: flex;
            justify-content: space-between;
        }

        .shopcart .list .good .text .price span {
      
      
            display: inline-block;
            width: 14px;
            height: 14px;
            text-align: center;
            line-height: 14px;
            background-color: lightskyblue;
            border-radius: 50%;
            color: white;
        }

        .shopcart .list .good .text .price span:nth-child(2) {
      
      
            color: black;
            background-color: white;
        }

        .empty {
      
      
            text-align: center;
            padding: 50px;
        }

        .shopcart .btns {
      
      
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="shopcart">
            <div class="btns">
                <span @click="sort(index)" v-for="(item,index) in btnArr" :key="index">{
   
   {item}}</span>
            </div>
            <div class="list" v-if="list.length !=0">
                <div class="good" v-for="(item,index) in list" :key="index">
                    <div class="imgbox">
                        <img :src="item.pic" alt="">
                    </div>
                    <div class="text">
                        <div class="name">{
   
   {item.name}}</div>
                        <div class="price">
                            <div class="lift">￥{
   
   {item.price}}</div>
                            <div class="right">
                                <span @click="sub(item)">-</span>
                                <span>{
   
   {item.count}}</span>
                                <span @click="add(item)">+</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>


</html>
<script src="vue-2.5.21.js"></script>
<script src="02、数组排序.js"></script>

archivo js

var pic = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202105%2F04%2F20210504062111_d8dc3.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668131448&t=6f7b1534d0d276bbfdad97cdf85700e6'

var vm = new Vue({
    
    
    el: '#app',
    data: {
    
    //负责定义响应式数据
        btnArr: ['综合排序', '距离最近', '销量最高', '筛选'],
        list: [
            {
    
     name: '秋刀鱼', price: 88, pic, count: 1 },
            {
    
     name: '大黄鱼', price: 777, pic, count: 2 },
            {
    
     name: '皮皮虾', price: 9, pic, count: 3 },
        ]
    },
    methods: {
    
    //负责定义方法
        // 点击+号时物品数量+1
        add(item) {
    
    
            item.count++;
        },
        // 点击-号时物品数量-1
        sub(item) {
    
    
            // 最小是1
            if (item.count > 1) item.count--;
        },
        // 当点击清空时物品清空
        clear() {
    
    
            this.list = [];
        },
        sort(index) {
    
    
            if (index == 0) {
    
    //点击了第一个按钮
                this.list.sort((a, b) => {
    
    
                    return a.price - b.price;
                })
            }
            else if (index == 2) {
    
    //点击了第三个按钮
                this.list.sort((a, b) => {
    
    
                    return b.count - a.count;
                })
            }
        }
    },

})

3.8 Cambios de matriz

Detección de actualización de componentes

Vue incluye un conjunto de métodos de mutación que observan matrices, lo que también desencadenará actualizaciones de vista. Estos métodos son los siguientes:

empujar () pop () cambio () unshift () empalme () ordenar () revertir ()

Precauciones:

Debido a las limitaciones de JavaScript, Vue no puede detectar las siguientes matrices modificadas:

1. Cuando establece directamente un elemento por índice, por ejemplo:vm.items[indexOfItem] = newValue

2. Cuando modifica la longitud de la matriz, por ejemplo: vm.items.length = newLength>

Métodos proporcionados por Vue

1.Vue.set(vm.items, indexOfItem, newValue)

Por ejemplo:Vue.set(this.arr,2,'cc');

2.vm.$set(vm.items, indexOfItem, nuevoValor)

Por ejemplo:this.$set(this.arr,2,'cc')

caso:

archivo HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="" id="app">
        <button @click="add">添加元素</button>
        <div style="color: red;" v-for="(item,index) in arr">{
   
   {item}}</div>
    </div>
</body>

</html>
<script src="vue-2.5.21.js"></script>
<script src="03、数组变化.js"></script>

archivo js:

var vm = new Vue({
    
    
    el: '#app',
    data: {
    
    
        arr: ['aa', 'bb']
    },
    methods: {
    
    
        add() {
    
    
            //用这样的方式 给数组添加新元素, Vue无法检测到数组的变化, 导致页面无法自动更新
            //this.arr[2] = 'cc';

            //Vue提供的工具方法
            // Vue.set(this.arr, 2 , 'cc');
            this.$set(this.arr, 2, 'cc');
        }
    }
})

3.9 Opciones

3.9.1 Atributo calculado calculado (responsable de definir los atributos calculados)

Las funciones calculadas se pueden definir en funciones ordinarias o en propiedades calculadas, y hay dos formas de escribir la definición en propiedades calculadas, una es la función de devolución de llamada y la otra es setter&getter; cuando se usan funciones ordinarias, debe usarse en forma de función Las funciones definidas en las propiedades calculadas se utilizan como variables.

Cuando los datos que deben mostrarse en la página del programa no son fijos, sino que deben calcularse dinámicamente, puede considerar usar Computed (un componente solo puede escribir un Computed, pero se pueden definir múltiples atributos Computed con comas en Computed). ).

Uso uno:

La función de devolución de llamada está escrita para devolver un nuevo valor calculado, y este nuevo valor se almacenará en caché.

var vm = new Vue({
    
    
  el: '#app',
  data: {
    
    
    firstname: 'Tom',
	  lastname: 'cat'
  },
  computed: {
    
    
    fullname : function () {
    
    
      return this.firstname + ' ' + this.lastname;
    },
	  xxx : function (){
    
    }
  }
})

Usar propiedades calculadas:

<div> { { fullname }} </div>

Las características de las propiedades computadas: cuando se define como una función (método), cuando se usa como una variable, la propiedad computada se almacenará en caché (el uso múltiple de la misma propiedad computada solo se calculará una vez)

Uso dos:

Método de escritura Setter&getter, agregar métodos get y set al objeto

Cuando la página obtenga el nombre completo, activará la ejecución del método get.

Al asignar un valor a fullname, activará la ejecución del método set. Fullname no se puede modificar directamente. El valor asignado a fullname se pasará como parámetro al método set.

var vm = new Vue({
    
    
  el: '#app',
  data: {
    
    
    firstname: 'Tom',
	  lastname: 'cat'
  },
  computed: {
    
    
    fullname : {
    
    
      get: function () {
    
    
        return this.firstname + ' ' + this.lastname;
      },
      set: function (newStr) {
    
    
        this.firstname = newStr.split(' ')[0];
this.lastname = newStr.split(' ')[1];
      }
}
  }
})

caso:

archivo HTML:

<!-- 商品总数 -->
            <div class="count">
                <div class="countsum">
                    <!-- 普通函数时的写法 -->
                    <!-- <span>总数:{
    
    {totalCount()}}</span>
                    <span>￥{
    
    {totalPrice()}}</span> -->
                    <!-- 计算属性 -->
                    <span>总数:{
   
   {zongshu}}</span>
                    <span>￥{
   
   {zongjia}}</span>
                </div>
                <div class="jiesuan">
                    去结算
                </div>
            </div>

archivo js:

var pic = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202105%2F04%2F20210504062111_d8dc3.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668131448&t=6f7b1534d0d276bbfdad97cdf85700e6'

var vm = new Vue({
    
    
    el: '#app',
    data: {
    
    //负责定义响应式数据
        list: [
            {
    
     name: '秋刀鱼', price: 88, pic, count: 1 },
            {
    
     name: '大黄鱼', price: 777, pic, count: 2 },
            {
    
     name: '皮皮虾', price: 9, pic, count: 3 },
        ]
    },
    methods: {
    
    //负责定义方法
        // 点击+号时物品数量+1
        add(item) {
    
    
            // 最大是5
            if (item.count < 5) item.count++;
        },
        // 点击-号时物品数量-1
        sub(item) {
    
    
            // 最小是1
            if (item.count > 1) item.count--;
        },
        // 当点击清空时物品清空
        clear() {
    
    
            this.list = [];
        },
        // 当普通函数
        // totalCount(){
    
    
        //     console.log('普通函数: totalCount 执行了');
        //     var sum = 0;
        //     this.list.forEach((item)=>{
    
    
        //         sum += item.count;
        //     })
        //     return sum;
        // },
        // totalPrice(){
    
    
        //     var sum = 0;
        //     this.list.forEach((item)=>{
    
    
        //         sum += item.count * item.price;
        //     })
        //     return sum;
        // }
    },
    computed: {
    
    //负责定义计算属性
        // 1.计算属性在定义时像函数，使用时像只读变量
        // 2.当计算属性内部所依赖的数据发生改变时，计算属性内部的代码会自动重新执行，计算出一个新值，这个新值作为计算属性的值
        // 3.如果计算属性内部所依赖的数据未发生改变，则计算属性不会重新计算，而是使用第一次计算的缓存结果作为下一次使用的值（计算属性会缓存计算的结果）。

        zongshu() {
    
    
            var sum = 0;
            this.list.forEach((item) => {
    
    
                sum += item.count;
            });
            return sum;
        },
        // zongjia() {
    
    
        //     var sum = 0;
        //     this.list.forEach((item) => {
    
    
        //         sum += item.price * item.count;
        //     });
        //     return sum;
        // }

        // 写法二：setter&getter
        zongjia: {
    
    //get方法会在使用（渲染）计算属性时自动执行
            get() {
    
    
                var sum = 0;
                this.list.forEach((item) => {
    
    
                    sum += item.count * item.price;
                })
                return sum;
            },
            set() {
    
    //set方法会在给计算属性设置值时执行
                console.log('给zongjia设置值');
            }
        }
    }
})

3.9.2 Método métodos

Cuando necesite definir sus propios métodos en un componente, use métodos en este momento (un componente solo puede escribir un método, pero puede definir varios métodos separados por comas en los métodos).

var vm = new Vue({
    
    
  el: '#app',
  data: {
    
    
   message: 'Runoob!'
  },
  methods : {
    
    
    login: function () {
    
    
     alert(‘登陆成功!’)
    },
     xxx : function () {
    
    }
  }
})

Modo de uso: generalmente se usa junto con eventos.

<div @click=”login”> 登陆 </div>

En este ejemplo, el inicio de sesión es el método y puede pasar parámetros al método al llamar al método;

3.10 Seguimiento en opciones

Si necesita monitorear el cambio de ciertos datos en tiempo real, use reloj en este momento (un componente solo puede escribir un reloj, pero puede usar comas para separar y definir múltiples monitores en el reloj).

monitoreo normal

export default {
    
    
  data: {
    
    
    message: 'Runoob!'
  },
  watch: {
    
    
    message: function (newVal,oldVal) {
    
    
      alert(‘监听到了改变’,newVal )
    }
  }
}

En este ejemplo, cada vez que cambie el valor del mensaje, el método detrás del mensaje en el reloj se ejecutará automáticamente, y el último valor del mensaje se puede obtener en este método;

Oyente de matriz

export default {
    
    
  data: {
    
    
    arr: [1,2,3]
  },
  watch: {
    
    
    arr: function (newVal,oldVal) {
    
    
      alert(‘监听到了改变’,newVal )
    }
  }
}

supervisor de objetos

Cuando usamos el reloj para monitorear, podemos encontrar que puede monitorear ciertos datos [datos únicos, matriz], pero al monitorear el objeto, es obvio que los datos han sido modificados, pero no hay un indicador de monitoreo. ¿Por qué es esto?

En este momento, debemos habilitar el monitoreo en profundidad, porque cuando no habilitamos el monitoreo en profundidad, el reloj solo monitoreará la primera capa y los datos del objeto se han modificado, pero la primera dirección del objeto no se ha modificado, por lo que el reloj determina que no se han producido cambios en los datos y, por lo tanto, no se puede monitorear.

var vm = new Vue({
    
    
  el: '#app',
  data: {
    
    
    obj: {
    
     name: 'Runoob!',age:20 }
  },
  watch: {
    
    
    obj: {
    
    
  handler : function(){
    
     alert('监听到改变!') },
immediate ：true, //是否立即执行handler函数
  deep: true
}
  }
})

el caso

archivo html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
      
      
            margin: 0;
            padding: 0;
        }

        #app {
      
      
            padding: 20px 10px;
        }

        .inputbox input {
      
      
            height: 40px;
            border-radius: 20px;
            padding-left: 20px;
            width: 100%;
            box-sizing: border-box;
            background-color: #f5f5f5;
            border: none;
            outline: none;
            margin-bottom: 10px;
        }

        button {
      
      
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="inputbox">
            <input type="text" v-model="inputText">
        </div>
        <button>点击搜索</button>
    </div>
</body>

</html>
<script src="vue-2.5.21.js"></script>
<script src="05、监听.js"></script>

archivo js

// Vue实例中的el,data,methods,computed,watch 都是Vue实例的选项。
// 这些选型的名字是固定的，而且只能写一个
var vm = new Vue({
    
    
    el: '#app',
    data: {
    
    //定义响应式数据
        inputText: '',
        arr: [],
        obj: {
    
     name: '李煜', age: 30 }
    },
    methods: {
    
    //定义方法
        add() {
    
     }
    },
    computed: {
    
    //定义计算属性

    },
    watch: {
    
    //设置监听
        inputText(newValue, oldValue) {
    
    //每当inputText的值发生改变，inputText这个监听函数就会自动执行，通过参数newValue就可以获取inputText的最新值
            // console.log(newValue, this.inputText);
            console.log('获取到了输入的最新值,发起网路请求');
        },
        arr() {
    
     //监听数组 arr 的改变
            console.log('监听到arr发生改变了');
        },
        obj: {
    
     //监听对象 obj 的改变
            handler() {
    
     //监听回调
                console.log('监听到obj发生改变了');
            },
            deep: true,//开启深度监听
            //immediate: true,//初始化执行监听回调
        }
    }
})

4. Filtrar

En la versión 2.0 de vue.js, se han realizado cambios relativamente grandes en comparación con la versión 1.0. En la versión 2.0, los filtros solo se pueden usar en { {}}. Los filtros en las instrucciones (como: v-for, v-on, etc.) en la versión 1.0 se colocan en propiedades calculadas en la versión 2.0. Al mismo tiempo, se cancelan todos los filtros integrados (como: capitalizar, etc.) en la versión 1.0. A continuación se utiliza un ejemplo práctico para ilustrar el uso de filtros en la versión 2.0. el código se muestra a continuación:

Vue.js le permite personalizar filtros que se pueden usar para algunos formatos de texto comunes. Los filtros se pueden usar en dos lugares: interpolación de llaves dobles y expresiones v-bind (esta última es compatible desde 2.1.0+). Los filtros deben agregarse al final de las expresiones de JavaScript, indicados por el símbolo de "tubería" |:

Código de muestra:

En el archivo APP.vue

<template>
  <!-- 一个.vue文件就是一个组件, 一个项目中只有一个根组件 App.vue -->
  <!-- 一个.vue文件内部一般是由三部分组成: template , script , style -->
  <!-- template 内部写标签 , 只能有一个根元素 -->
  <!-- script 内部写js逻辑 , 内部需要 export default {}, 所有的js代码都需要写在这里 -->
  <!-- style 内部写css样式 , 可以通过lang='xx'指定style内部的css语法 , 可以通过设置 scoped 属性 让多个.vue文件之间的样式互不影响 -->
  <div id="app">
    <h1>{
   
   { title }}</h1>
    <h1>{
   
   { sum }}</h1>
    <h1>{
   
   { sex }}</h1>
    <h1>{
   
   { arr }}</h1>
    <h1>{
   
   { obj.age }}</h1>
    <h1>{
   
   { phone | phoneFilter }}</h1>
    <h1>{
   
   { today | todayFilter }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    //定义响应式数据
    return {
      title: "今天又是美好的一天",
      sum: 666,
      sex: false,
      arr: [],
      obj: { age: 888 },
      phone: "19893311146",
      today: new Date(),
    };
  },
  cumputer: {
    //定义计算属性
  },
  methods: {
    //定义方法
  },
  watch: {
    //设置监听
  },
  filters: {
    //定义过滤器(局部变量)
    // 手机号码过滤器
    // phoneFilter(phone) {
    //   return phone.slice(0, 3) + "****" + phone.slice(-4);
    // },
    // // 时间过滤器
    // todayFilter(today) {
    //   return (
    //     today.getFullYear() +
    //     "-" +
    //     today.getMonth() +
    //     "-" +
    //     today.getDate() +
    //     " " +
    //     today.getHours() +
    //     ":" +
    //     today.getMinutes() +
    //     ":" +
    //     today.getSeconds()
    //   );
    // },
  },
};
</script>

<style lang="scss" scoped>
</style>

en el archivo main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 定义全局过滤器（可以在所有的.vue文件中使用）
Vue.filter('phoneFilter', (phone) => {
    
    
  return phone.slice(0, 3) + "****" + phone.slice(-4);
})

Vue.filter('todayFilter', (today) => {
    
    
  return (
    today.getFullYear() +
    "-" +
    today.getMonth() +
    "-" +
    today.getDate() +
    " " +
    today.getHours() +
    ":" +
    today.getMinutes() +
    ":" +
    today.getSeconds()
  );
})

//实例化Vue对象
new Vue({
    
    
  render: h => h(App),
}).$mount('#app')