vue 02-下钩子函数、自定义事件、事件冒泡、修饰符、过滤器

最新推荐文章于 2022-10-26 15:08:47 发布

weixin_30332241

最新推荐文章于 2022-10-26 15:08:47 发布

阅读量114

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sansancn/p/11048072.html

版权

1、钩子函数

a)全局:   Vue.directive('指令名不带v-',函数(el,binding))
            el == 使用指令的DOM元素
            binding 是个对象 含有传入的 参数(binding.value)
        b)局部:  定义在选项里面
            directives:{
                指令名不带v- : 函数(el,binding){}
            }
###右面的函数（函数(el,binding)）可以是对象，这是对象的key（inserted）代表右边指令的发生时期

指令是个函数(简写)，可以是个对象

        {
            钩子函数（代表一个函数的执行时期）
            inserted:fn(el,binding)     绑定指令的元素插入到父节点时调用
            bind:fn 指令第一次绑定到元素时调用
            update:fn   指令所在的元素的model层的数据，view有更新请求时
            componentUpdated:fn 更新完成时
        }

        简写方式: bind + update

例子
  <script src="./js/vue.js"></script>
  <!-- <script>
    window.onload=function(){
      document.getElementById('ipt').focus();
    }
  </script> -->
</head>

<body >

  <div id="app">
    
    <input type="text">
    <input type="text" v-focus v-model="ipt">
    //指令触发时期
    <input type="text">
    
  </div>


  <script>
// 钩子函数可以
    Vue.directive('focus',function(el,binding){ // bind
      // el.focus();由于在虚拟dom中所以不会聚焦
      console.log('bind+update')
    })

    Vue.directive('focus',{
      inserted:function(el,binding){
        console.log('inserted')
        el.focus();
      },
      bind:function(el,binding){
        console.log('bind')
      },
      update:function(el,binding){
        console.log('update')
      },
      componentUpdated:function(el,binding){
        console.log('componentUpdated')
      }
    }) 

    let vm = new Vue({
      el: '#app',
      data: {
        ipt:''
      }

    })

  </script>

</body>
控制台vm.ipt='123'会显示update和componentUpdated

2、事件

绑定行间事件:     <xx v-on:事件名="方法名($event,参数)"
                        <xx @事件名="方法名($event,参数)"
        绑定自定义事件:
            定义：vm.$on( '自定义事件名'|['自定义事件名1','自定义事件名2'], 回调(参数) )
            销毁：vm.$off( '自定义事件名'|['自定义事件名1','自定义事件名2'], 回调(参数) )
            触发: vm.$emit(自定义事件名1,参数)

            自定义事件名： 使用 kebab-case 的事件名

            场景： 在一个组件实例上手动侦听事件时
    ------------------------就是在vm里面触发，提前在外面定义好，定义的同时直接销毁-------------------------------------------

<body >

  <div id="app">
    <input type="button" value="按钮" @click="show">    
  </div>


  <script>

    let vm = new Vue({
      el: '#app',
      methods:{
        show(){
          //业务逻辑
          this.$emit('bulala',32)
        }
      }

    })

    vm.$on('bulala',(arg)=>{
      console.log('自定义事件调用',arg)
      vm.$off('bulala')
    });

    // vm.$emit('bulala',12)

  </script>

</body>

3、事件冒泡

冒泡：默认冒泡
            $event   ev|event.cacelBubble=true ev.stopPropagation()
            @click.stop 修饰符
        默认行为:
            event|ev.preventDefault();   @事件.prevent

        修饰符:  keyCode/键名(enter/left/right/up/down/...)

        连缀: @事件.修饰符.修饰符 @事件.prevent.stop  排名分先后

例子

<body >

  <div id="app">
    <div @click="show2" @contextmenu="show2">
      <!-- <input type="button" value="按钮" @click="show">    -->

      <!-- 事件修饰符, 阻止冒泡 -->
      <input type="button" value="按钮" @click.stop="show">   


      <!-- <input type="button" value="按钮" @contextmenu="show3">    -->

      <!-- 事件修饰符, 阻止默认行为 -->
      <input type="button" value="按钮" @contextmenu.prevent.stop="show3">   


    </div> 
  </div>


  <script>

    let vm = new Vue({
      el: '#app',
      methods:{
        show(ev){
          console.log('btn');
          // ev.cancelBubble=true;//阻止冒泡
          // ev.stopPropagation()
        },
        show2(){
          console.log('div')
        },
        show3(ev){
          console.log('input')
          // ev.preventDefault()
        }
      }

    })

  </script>

</body>

4、修饰符

事件|自定义事件修饰符: @click.stop.prevent
            capture: 使用事件捕获模式
            self:   点到时才触发，不是从内部元素触发的
            once：  只会触发一次
            passive： onScroll事件 结束时触发一次，不会频繁触发，移动端使用
        按键修饰符:  @keyup.left鼠标左键
            系统键 .ctrl
                    .ctrl
                    .alt
                    .shift
                    .meta
                    exact 严格默认   @键盘事件.修饰符1.修饰符2.exact    只有1+2才可触发

        鼠标按钮修饰符：
            .left
            .right
            .middle

        表单修饰符: 
            v-model.lazy   :    确认时才修改model数据
            v-model.number :    提取数子
            v-model.trim :   删除前后空格

例子

<body >

 <div id="app">

   <!-- <input type="text" @keyup.13="send"> -->
   <textarea type="text" @keyup.ctrl.enter.exact="send"></textarea>
   <!-- <input type="text" @keyup.37="send">↑键 -->
   <!-- <input type="text" @keyup.37="send"> -->
   <ul>
     <li v-for="val of arr">{{val}}</li>
   </ul>   

 </div>


 <script>

   let vm = new Vue({
     el: '#app',
     data:{
       arr:['aa','bb','cc'],
     },
     methods:{
       send(ev){
         // if(ev.keyCode==13) this.arr.push(ev.target.value);
         this.arr.push(ev.target.value);
         ev.target.value='';
       }
     }

   })

 </script>

</body>

转载于:https://www.cnblogs.com/sansancn/p/11048072.html

weixin_30332241

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 02-下钩子函数、自定义事件、事件冒泡、修饰符、过滤器

1、钩子函数a)全局: Vue.directive('指令名不带v-',函数(el,binding)) el == 使用指令的DOM元素 binding 是个对象含有传入的参数(binding.value) b)局部: 定义在选项里面 directives:{ 指...
复制链接

扫一扫