美文网首页
第五章 vueJS中的内置指令(下)

第五章 vueJS中的内置指令(下)

作者: kzc爱吃梨 | 来源:发表于2019-10-15 13:29 被阅读0次

    5.4 数组更新,过滤与排序

    改变数组的一系列方法:

    • push() 在末尾添加元素
    • pop() 将数组的最后一个元素移除
    • shift() 删除数组的第一个元素
    • unshift():在数组的第一个元素位置添加一个元素
    • splice() :可以添加或者删除函数—返回删除的元素
      三个参数:
      • 第一个参数 表示开始操作的位置
      • 第二个参数表示:要操作的长度
      • 第三个为可选参数:
    • sort():排序
    • reverse()
      效果展示

    两个数组变动vue检测不到:

    1. 改变数组的指定项
    2. 改变数组长度
    3. 过滤:filter(用计算属性)

    改变指定项: Vue.set(app.arr,1,”car”);
    app.arr.splice(1): 改变数组长度
    解决方法:

    1. set
    2. splice

    5.5 方法和事件

    [object MouseEvent]

    5.4.1 基本用法

    v­-on绑定的事件类似于原生 的onclick等写法

    <div id="app">
      点击次数:{{count}}
      <button @click="handle()">点击我加1</button>
      <button @click="handle(5)">点击我加5</button>
    </div>
      <script>
        var app = new Vue({
          el: '#app',
          data: {
            count: 0
          },
          methods: {
            handle: function(count){ //这里有参数什么就要加括号
              //console.log(count) [object MouseEvent]
              count = count || 1
              this.count += count
            }
          }
        })
      </script>
    

    效果展示
    如果方法中带有参数,但是尼没有加括号,默认传原生事件对象event

    5.4.2 修饰符

    在vue中传入event对象用 $event
    向上冒泡
    stop:阻止单击事件向上冒泡
    prevent::提交事件并且不重载页面
    self:只是作用在元素本身而非子元素的时候调用
    once: 只执行一次的方法
    可以监听键盘事件:
    <input @keyup.13 ="submitMe"> ——­指定的keyCode
    vueJS为我们提供了:
    .enter
    .tab
    .delete
    效果展示

    相关文章

      网友评论

          本文标题:第五章 vueJS中的内置指令(下)

          本文链接:https://www.haomeiwen.com/subject/nltzpctx.html