enlace de eventos vue, parámetros de eventos, modificadores de eventos, enlace bidireccional, oyentes, propiedades calculadas

Tabla de contenido

enlace de evento

parámetros del evento

modificador de evento

forma

reloj (atributo de escucha del oyente)

calculado (propiedad calculada)

Preguntas de entrevista

mecanismo de evento

Descripción general En la etapa dom, hemos descrito las características del mecanismo de eventos:

tres elementos del evento

enlace de evento

flujo de eventos

objeto de evento

agente de eventos

Los conceptos de tipos de eventos todavía existen en Vue, pero el mecanismo de eventos en Vue es más simple y conveniente.

enlace de evento

Puede utilizar la directiva v-on para escuchar eventos DOM y ejecutar algún código JavaScript cuando se active. v-on también puede recibir un nombre de método que debe llamarse. <button v-on:click="handler">good</button>métodos: { handler: function (event) { if (event) { alert(event.target.tagName) } // eventEs un evento DOM nativo} } Además de estar vinculado directamente a un método, también puede llamar a métodos en declaraciones de JavaScript en línea, $pase el objeto de evento nativo <button v-on:click="say('hi',$event)">Say hi</button>eventos: métodos: { say: function (message,event) { alert(message) } } Dado que es más probable que se use el enlace de eventos en vue, la forma abreviada <button @click= " se proporciona aquí. say('hi',$event)">Saluda</button>

parámetros del evento

Cuando se llama al evento, se pueden pasar parámetros:

<div id="app">
        <el-button @click="toAdd" type="primary" size="small">新增</el-button>
        <div>
            <el-table type="index" size="small" :data="tableData" style="width: 50%">
                <el-table-column  prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" @click="toEdit(scope.row)" type="primary">编辑</el-button>
                        <el-button size="small" type="danger" @click="toDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item  label="时间" :label-width="formLabelWidth">
                    <el-input v-model="form.date" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>

<script>
        new Vue({
            el: "#app",
            data: {
                dialogFormVisible: false,
                formLabelWidth: "120px",
                form: {},
                title: '',
                tableData: [{
                    id: 1,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: 2,
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    id: 3,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    id: 4,
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            },
            methods: {
                toAdd() {
                    this.dialogFormVisible = true;
                    this.form = {};
                    this.title = '新增数据'
                },
                toEdit(row) {
                    this.form = { ...row };
                    this.dialogFormVisible = true;
                    this.title = '修改数据';
                },
                toDelete(id) {
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.tableData.splice(id,1)
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }
            }
        })
    </script>

Al vincular eventos, puede abreviar v-on: nombre del evento a @nombre del evento . Este método se usa a menudo:

modificador de evento

Modificadores de eventos Es un requisito muy común llamar a event.preventDefault() o event.stopPropagation() en un controlador de eventos. Vue proporciona una mejor manera: la función de manejo de eventos solo tiene lógica de datos pura, en lugar de tratar los detalles del evento DOM, estos detalles se completan mediante modificadores de eventos.

<button v-on:click.prevent="handler">点我点我</button>

Los modificadores comunes son los siguientes.stop detiene el burbujeo de eventos.prevent previene el comportamiento predeterminado del evento.capture ejecuta la función de procesamiento de eventos en la fase de captura de eventos.self La función de procesamiento solo se activa cuando event.target es el elemento actual en sí.once Después del evento La función de procesamiento se ejecuta una vez. El comportamiento predeterminado de desvincular el evento de desplazamiento pasivo (es decir, el comportamiento de desplazamiento) se activará inmediatamente. Generalmente se usa junto con el desplazamiento, lo que puede mejorar el rendimiento del terminal móvil. Los modificadores de clave se usan generalmente en conjunción con tipos de eventos de tecla: enter, .tab, .delete, .esc, .space, .up, .down, .left, .right .ctrl, .alt, .shift, .meta modificador del mouse evento mouseup .left, . derecha, .medio

new Vue({
      el: "#app",
      data: {
        msg: '事件修饰符'
      },
      methods: {
        keyupHandle() {
          console.log('按下某些特殊键');
        },
        toJump() {
          console.log('跳转');
          alert(1);
        },
        outer(e) {
          // e.target是触发事件的源头元素，目标元素
          // e.currentTarget 当前执行事件处理程序的元素，当前目标元素
          // console.log('outer', e.target, e.currentTarget);
          console.log('outer')
          for (let i = 0; i < 100; i++) {
            console.log(i);
          }
        },
        inner(e) {
          // e.stopPropagation();
          // console.log('inner', e.target, e.currentTarget);
          console.log('inner');
        }
      }
    })
<div id="app">
    <!-- <input type="text" @keyup.enter="keyupHandle"> -->
    <input type="text" @keyup.13="keyupHandle">
    <!-- <input type="text" @mouseup.left="keyupHandle"> -->
    {
   
   {msg}}
    <a @click.prevent="toJump" href="http://www.baidu.com">百度一下</a>
    
    <!-- 点击inner   event.target   -->
    <!-- <div class="outer" @click.self.once="outer"> -->
    <!-- <div class="outer" @click.self="outer"> -->
    <!-- <div class="outer" @click.capture="outer"> -->
    <div class="outer" @scroll.passive="outer">
      outer
      <div class="inner" @click="inner">
        <!-- <div class="inner" @click.stop="inner"> -->
        inner
      </div>
    </div>
  </div>

forma

Puede utilizar la directiva v-model <input>para crear un enlace de datos bidireccional<textarea> en formularios y <select>elementos . Elige automáticamente el método correcto para actualizar el elemento según el tipo de control. A pesar de su magia, v-model es esencialmente azúcar sintáctico. Es responsable de escuchar los eventos de entrada del usuario para actualizar los datos y realizar algún procesamiento especial para algunos escenarios extremos. Si el valor está vinculado mediante el modelo v, no es necesario escribir el atributo de nombre.


<div id="app">
    {
   
   {msg}}
    <br>
    {
   
   {stu}}
    <br>
    <!-- 用户名：<input type="text" v-model.lazy="stu.username"> -->
    用户名：<input type="text" v-model.trim="stu.username">
    <br>
    <!-- .number修饰符，可以将采集到的数据转为number类型，然后再存储到数据模型中 -->
    年龄：<input type="text" v-model.number="stu.age">
    <br>
    <!-- 性别 -->
    性别：<input type="radio" value="male" v-model="stu.gender">男
    <input type="radio" value="female" v-model="stu.gender">女
    <br>
    <!-- 爱好 -->
    爱好：<input type="checkbox" value="basketball" v-model="stu.hobby">篮球
    <input type="checkbox" value="swimming" v-model="stu.hobby">游泳
    <input type="checkbox" value="dancing" v-model="stu.hobby">跳舞
    <br>
    <!-- 城市 -->
    城市：
    <!-- <select multiple v-model="stu.city"> -->
    <select v-model="stu.city">
      <option value="shanghai">上海</option>
      <option value="beijing">北京</option>
      <option value="guangzhou">广州</option>
    </select>
    <br>
    <!-- 简介 -->
    简介：<textarea v-model="stu.info" cols="30" rows="10"></textarea>
  </div>
### js代码
    new Vue({
      el: '#app',
      data: {
        msg: 'hello',
        stu: {
          // 复选框
          hobby: []
        }
      },
      methods: {}
    })

reloj (atributo de escucha del oyente)

El uso de oyentes es más útil cuando necesita realizar operaciones asincrónicas o costosas cuando cambian los datos.

Si bien las propiedades calculadas son más apropiadas en la mayoría de los casos, a veces se necesita un oyente personalizado. Es por eso que Vue proporciona una forma más general de responder a los cambios de datos a través de la opción de vigilancia. Este enfoque es más útil cuando necesita realizar operaciones asincrónicas o costosas cuando cambian los datos .


<div id="app">
    {
   
   {msg}}
    <br>
    a：<input type="text" v-model.number="a">
    <br>
    +
    <br>
    b：<input type="text" v-model.number="b">
    <br>
    =
    <br>
    <output>{
   
   {total}}</output>
  </div>

 new Vue({
      el: '#app',
      data: {
        msg: 'hello',
        a: 0,
        b: 0,
        total: 0
      },
      methods: {},
      // 监听  侦听
      watch: {
        a(newValue, oldValue) {
          this.total = this.a + this.b;
        },
        b(newValue, oldValue) {
          this.total = this.b + this.a;
        }
      }
    })

//深度监听

 new Vue({
      el: '#app',
      data: {
        msg: 'hello',
        a: 1,
        obj: {
          name: 'zhangsan',
          age: 12
        },
      },
      watch: {
        a(newValue, oldValue) {
          console.log('a数据发生变化...');
        },
        /* obj(newValue, oldValue) {
          console.log('obj数据发生变化...');
        } */
        // 深度监听
        obj: {
          handler(newValue, oldValue) {
            console.log('obj数据发生变化...');
          },
          // 深度监听
          deep: true
        }
      },
      methods: {
        changeObj() {
          // 更改内部数据
          this.obj.name = 'lisi';
        }
      }
    })

 <div id="app">
    {
   
   {msg}}
    <br>
    {
   
   {obj}}
    <button @click="changeObj">更改obj</button>
  </div>

calculado (propiedad calculada)

Datos con dependencias de propiedades calculadas

Las propiedades calculadas se pueden usar cuando queremos que una variable se someta a algún cálculo y luego se genere en lugar de generarse directamente. Las propiedades calculadas se almacenan en caché en función de sus dependencias de respuesta. Solo se reevalúan cuando cambian las dependencias reactivas asociadas. Cada llamada a la función hará que la función se vuelva a ejecutar.


<div id="app">
    {
   
   {msg}}
    <br>
    a：<input type="text" v-model.number="a">
    <br>
    +
    <br>
    b：<input type="text" v-model.number="b">
    <br>
    =
    <br>
    {
   
   {total}}
  </div>   
    new Vue({
      el: '#app',
      data: {
        msg: 'hello',
        a: 0,
        b: 0,
        // total: 0
      },
      // 计算属性
      computed: {
        total(){
            console.log('计算属性');
            // return 111
            return this.a+this.b
        }
      },
      methods: {}
    })

Preguntas de entrevista

¿Cuál es la diferencia entre reloj y calculado?
calculado
1. Se puede almacenar en caché. El valor no cambia cuando se vuelve a representar la página. El atributo calculado devolverá inmediatamente el resultado del cálculo anterior sin tener que ejecutar la función nuevamente. 2. El El atributo calculado calcula el
cambio de un determinado atributo. Si se cambia un determinado valor, el atributo calculado será monitoreado y devuelto al
reloj
1. Monitoree el cambio del valor y realice una operación asincrónica [solicitud de axios]
'$route.query': { this.loadArticle() } 2. Sin almacenamiento en caché, solo cuando ocurre el valor actual Se ejecutará/ responderá