vue学习（二）---常用指令2

最新推荐文章于 2022-03-10 12:59:49 发布

邱先生~

最新推荐文章于 2022-03-10 12:59:49 发布

阅读量120

点赞数

分类专栏： vue 文章标签：事件修饰符 computed watch

本文链接：https://blog.csdn.net/weixin_43932245/article/details/90447021

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

1.事件修饰符
 2.computed
3.watch

事件修饰符

stop 禁止冒泡
once 单次事件
prevent 阻止默认事件
native 原生事件（组件）
keycode|name 筛选按键

stop 禁止冒泡

<body>
    <div id="div1">
      <div class="" @click="fn1()">
        <input type="button" value="按钮" @click.stop="fn2()"> 
        <input type="button" value="按钮" @click.once="fn2()"> 
      </div>
    </div>
  </body>
	//不加 @click.stop的话 会依次弹出 222,1111 加上之后会弹出 222

	//@click.once 先弹出 222,1111 再次点击就只会弹出1111
  <script>
  let vm=new Vue({
    el: '#div1',
    data: {

    },
    methods: {
      fn1(){
        alert('1111');
      },
      fn2(){
        alert('222');
      }
    }
  });
  </script>

prevent 阻止默认事件

常用在阻止表单的默认提交

  <body>
    <div id="div1">
      <form action="index.html" method="post" @submit.prevent="submit()">
        <input type="submit" value="提交">
      </form>
    </div>
  </body>

  <script>
  let vm=new Vue({
    el: '#div1',
    data: {

    },
    methods: {
      submit(){
        alert('提交');
        console.log();
      }
    }
  });
  </script>

keycode|name 筛选按键

可以用编码也可以用名称，可以连用

  <body>
    <div id="div1">
      <input type="text" @keydown.13="fn()">
      <input type="text" @keydown.enter="fn()">
      <input type="text" @keydown.ctrl.enter="fn()">
    </div>
  </body>

  <script>
  let vm=new Vue({
    el: '#div1',
    data: {

    },
    methods: {
      fn(){
        alert('vue');
      }
    }
  });
  </script>

computed——计算属性

依赖其他属性计算值，并且computed的值有缓存，只有当计算值变化才会返回内容。
computed 还可以读写
computed是以绑定属性的形式出现。

    <div id="div1">
      {{a}}+{{b}}={{sum}}
    </div>
   <script>
  let vm=new Vue({
    el: '#div1',
    data: {
      a: 12,
      b: 5
    },
    computed: {
      sum(){
        return this.a+this.b;
      }
    }
  });
  </script>

读，写
正常我们直接return是computed的get（），其实它还有set（）

 <body>
    <div id="div1">
      姓：<input type="text" v-model="familyName"><br>
      名：<input type="text" v-model="givenName"><br>
      <input type="text" v-model="name">
    </div>
  </body>

  <script>
  let vm=new Vue({
    el: '#div1',
    data: {
      familyName: '张',
      givenName: '三'
    },
    computed: {
      name: {
        get(){
          return this.familyName+this.givenName;
        },
        set(value){
          this.familyName=value[0];
          this.givenName=value.substring(1);
        }
      }
    }
  });
  </script>

watch——监听

watch其实跟computed功能差不多，只是各自的侧重点不同，computed更偏向于计算属性值以及对属性值的读写。watch就偏向于对属性值的监听，一改变我就触发相应的回调函数。

<body>
    <div id="div1">
      <input type="text" v-model="name">
      <input type="text" v-model="user_info.name">
    </div>
  </body>

  <script>
  let vm=new Vue({
    el: '#div1',
    data: {
      name: 'blue',
      user_info: {
        name: 'blue',
        age: 18
      }
    },
    watch: {
      name(old,val){
        console.log('name变了');
      },
       'user_info.name': function (){
        console.log('name变了');
      }
    }
  });
  </script>

邱先生~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习（二）---常用指令2

1.事件修饰符2.computed3.watch事件修饰符stop 禁止冒泡once 单次事件prevent 阻止默认事件native 原生事件（组件）keycode|name 筛选按键stop 禁止冒泡<body> <div id="div1"> <div class...
复制链接

扫一扫

专栏目录