Vue基础知识之常用属性和事件修饰符（二）

Vue中的常用选项

• 1、计算属性

  computed为可以计算的属性,由get方法和set方法组成,默认调用的是get方法。里面的
  计算属性简单来说，就是根据数据推算出来的值，当给这个值赋值时可以影响其他值的变化。

<div id="app">
      全选：<input type="checkbox" v‐model="checkAll" > <br>
      <input type="checkbox" v‐for="a in checkList" v‐model="a.selected">
  </div>
  data:{
checkList:[{selected:true},{selected:true},{selected:false}]
  },
  computed:{
   checkAll:{
    set(val){//此处的val代表的就是全选键的值。
    
        for(var arr of this.checkList){
            arr.selected = val;
           }
       },
        get(){
           var obj = this.checkList.find(function (item) {
               return !item.selected
           });
               return obj?false:true;
       }
     }
     msg:function(){return }//默认是get
  }

• 2、methods

  定义一些方法，供组件使用。

• 3、watch

  用于检测的数据发生改变的api
  和computed不同，watch可以夹杂异步逻辑
  当一个值发生变化的时候，执行某个动作用watch更加方便。

<div id="app">
      <input type="text" v‐model="msg">
      {{content}}
  </div>
  var vm = new Vue({
     el:'#app',
      data:{
         msg:'hello',
         content:''
      },
      watch:{
          msg:function () {
              this.content = 'waiting...';
              setTimeout(()=> {
                  this.content = 'Hello Mrs Jiang!'
              },2000);
          }
      }
  });//修改msg的值先等待两秒后再显示。
  computed适合做复杂逻辑，简单的只能给watch，当一个值改变触发某个事件时使用watch;如果是异步，并且有中间过程，用watch。

• 4、data

  每个 Vue 实例都会代理其 data 对象里所有的属性

var data = { a: 1 }
var vm = new Vue({
    data: data
})
vm.a === data.a   // -> true
vm.a = 2          // 设置属性也会影响到原始数据
data.a            // -> 2
data.a = 3        // ... 反之亦然
vm.a              // -> 3
注意：只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新

除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data       // -> true
vm.$el === document.getElementById('example') // -> true
vm.$watch('a', function (newVal, oldVal) { // $watch 是一个实例方法
  // 这个回调将在 `vm.a`  改变后调用
})
注意：不要在实例属性或者回调函数中（如 vm.$watch('a', newVal => this.myMethod())）使用箭头函数。因为箭头函数绑定父上下文，所以 this 不会像预想的一样是 Vue 实例，而是 this.myMethod 未被定义

实例上常用的属性

• vm.$el 代表的就是获取当前的元素，可以直接操作，修改样式等
• vm.$data 获取当前实例上挂载的数据
• vm.$options 当前实例上自定的属性

• vm.$watch 监控数据的变化 vm.$watch('total',function(newVal,oldVal){})//只要是data上的数据或者计算属性皆可以监控。

  事件进阶-修饰符

• 事件处理函数只有纯粹的逻辑判断，不处理DOM实践的细节，例如：阻止冒泡，默认行为，判断按键

  1、事件冒泡（事件不会向上传递）

<div @click="say">
    parent
    <div @click.stop="say">child</div>//阻止冒泡
</div>

2、阻止默认事件（不触发默认事件）

<a href="http://www.baidu.com" @click.prevent="say">百度</a>//阻止默认行为

3、指定元素触发（不包括子元素）

<a @click.stop.self.prevent="say" href="http://www.baidu.com" style="border: 10px s
olid red">
      <span>2</span>
      <span>1</span>
</a>

4、事件捕获方式（父->子）

<div @click='say'>parent
    <div @click='say1'>
        child
    </div>
</div>

5、绑定事件一次（触发后移除事件）

<div @click.once='say'>say</div>

6、.capture事件默认是双向的，先捕获，在冒泡

• 按键修饰符,常见的修饰符.enter/.tab/.delete/.esc/.space/.up/.down。。键值

<input type='text' @keyup.enter='say'>
注意：'.'后面也可以使用对应键值的ASCII码值

动态绑定类名

• 动态绑定的class和原生的class可以共存，如果有覆盖，动态的覆盖静态的。

  1、对象绑定方式：
  :class="{类名：条件，类名：条件}"
  如果条件为true，添加样式；如果条件为false，移除样式。
  2、数组绑定方式：
  :class="[data中的数据，"类名"，{类名：条件}]"
  data:{
  data中的数据:“类名”，
  }

  动态绑定style

  1、对象绑定方式：
  :style="{属性名：属性值}"
  2、数组绑定方式：
  :style="[data中的数据]"
  data:{
  data中的数据:{属性名:属性值}
  }

转载于:https://www.cnblogs.com/Juphy/p/7042125.html