ligação de evento vue, parâmetros de evento, modificadores de evento, ligação bidirecional de formulário, ouvintes, propriedades calculadas

Índice

vinculação de evento

parâmetros de evento

modificador de evento

forma

watch (atributo de escuta do ouvinte)

computado (propriedade computada)

Questões de entrevista

mecanismo de evento

Visão geral No estágio dom, descrevemos as características do mecanismo de evento:

três elementos do evento

vinculação de evento

fluxo de eventos

objeto de evento

agente de eventos

Os conceitos de tipos de eventos ainda existem no Vue, mas o mecanismo de eventos no Vue é mais simples e conveniente.

vinculação de evento

Você pode usar a diretiva v-on para escutar eventos DOM e executar algum código JavaScript quando acionado. v-on também pode receber um nome de método que precisa ser chamado. <button v-on:click="handler">good</button>métodos: { handler: function (event) { if (event) { alert(event.target.tagName) } // eventÉ um evento DOM nativo} } Além de estar diretamente vinculado a um método, você também pode chamar métodos em instruções JavaScript inline, $passe o objeto de evento nativo <button v-on:click="say('hi',$event)">Say hi</button>event: métodos: { say: function (message,event) { alert(message) } } Como a ligação de evento é mais provável de ser usada em vue, a forma abreviada <button @click= "é fornecido aqui. say('hi',$event)">Diga oi</button>

parâmetros de evento

Quando o evento é chamado, os parâmetros podem ser passados:

<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>

Ao vincular eventos, você pode abreviar v-on: event name para @event name . Este método é frequentemente usado:

modificador de evento

Modificadores de eventos É um requisito muito comum chamar event.preventDefault() ou event.stopPropagation() em um manipulador de eventos. Vue oferece uma maneira melhor: a função de manipulação de eventos possui apenas lógica de dados pura, em vez de lidar com detalhes de eventos DOM, esses detalhes são completados por meio de modificadores de eventos.

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

Os modificadores comuns são os seguintes.stop interrompe o evento bubbling.prevent evita o comportamento padrão do evento.capture executa a função de processamento de eventos na fase de captura de eventos.self A função de processamento só é acionada quando event.target é o próprio elemento atual.once Após o evento A função de processamento é executada uma vez. O comportamento padrão de desvincular o evento de rolagem .passive (ou seja, comportamento de rolagem) será acionado imediatamente. Geralmente é usado em conjunto com rolagem, o que pode melhorar o desempenho do terminal móvel. Modificadores de chave são geralmente usados em conjunto com tipos de eventos keyup.enter, .tab, .delete, .esc , .space, .up, .down, .left, .right .ctrl, .alt, .shift, .meta modificador de mouse evento mouseup .left, . certo, .meio

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

<input>Você pode usar a diretiva v-model para criar vinculação de dados bidirecional<textarea> em formulários e <select>elementos . Ele escolhe automaticamente o método correto para atualizar o elemento com base no tipo de controle. Apesar de sua magia, o modelo v é essencialmente um açúcar sintático. É responsável por ouvir eventos de entrada do usuário para atualizar dados e realizar algum processamento especial para alguns cenários extremos. Se o valor for vinculado usando o modelo v, o atributo name não precisará ser escrito.


<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: {}
    })

watch (atributo de escuta do ouvinte)

Usar listeners é mais útil quando você precisa executar operações assíncronas ou caras quando os dados mudam

Embora as propriedades computadas sejam mais apropriadas na maioria dos casos, às vezes é necessário um ouvinte personalizado. É por isso que o Vue fornece uma maneira mais geral de responder às alterações de dados por meio da opção watch. Essa abordagem é mais útil quando você precisa executar operações assíncronas ou caras quando os dados são alterados.


<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>

computado (propriedade computada)

Dados com dependências em propriedades computadas

As propriedades computadas podem ser usadas quando queremos que uma variável seja submetida a algum cálculo e depois seja produzida em vez de produzida diretamente.As propriedades computadas são armazenadas em cache com base nas suas dependências responsivas. Eles só são reavaliados quando as dependências reativas associadas mudam. Cada chamada para a função fará com que a função seja executada novamente.


<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: {}
    })

Questões de entrevista

Qual é a diferença entre watch e computado?
computado
1. É armazenável em cache. O valor não muda quando a página é renderizada novamente. O atributo calculado retornará imediatamente o resultado do cálculo anterior sem a necessidade de executar a função novamente. 2. O atributo calculado retornará imediatamente o resultado do cálculo anterior sem a necessidade de executar a função novamente. atributo calculado calcula a alteração de
um determinado atributo. Se um determinado valor for alterado, o atributo calculado será monitorado e retornado para
observar
1. Monitore a alteração do valor e execute uma operação assíncrona [axios request]
'$route.query': { this.loadArticle() } 2. Sem cache, somente quando o valor atual ocorrer Será executado/ resposta