事件 、this指针、计算属性、监听

事件及dom元素获取

1. v-on:事件类型可以简写为@事件类型
<button v-on:click="changeShow" >这是v-on的测试</button>：事件执行不需要加括号;简写为<button @click="changeShow" >这是v-on的测试</button>

控制元素显示隐藏

  <button v-on:click="changeShow" >这是v-on的测试</button>
  <div v-show="ischange" class="b">显示隐藏</div>
  // 当前组件的所有方法
  methods: {
    changeShow() {
      console.log("显示隐藏事件成功执行");
      this.ischange=!this.ischange;
    }
  }

2. v-once:只执行一次
3. this指针指向vuecompontent:组件；
   可以直接取值(.属性)

    console.log(this.ischange);

也可以通过get set访问器

console.log(this._data.ischange);

4. 有参事件：参数传递

    <ul class="hocolor">
      <li v-for="(item,index) in obj" :key="index" @click="getdata(index)">
        姓名：{{item.name}}————性别：{{item.sex}}
        <span v-for="(hob,i) in item.hobby" :key="i" >
          {{hob}}、
          </span>
      </li>
    </ul>
 getdata(index){
      this.obj[index].sex="未知";
      console.log(this.obj[index].name);
    }

5. 事件修饰符（处理事件的相关默认行为）

• .stop
  阻止单击事件继续传播

    <div class="b" @click="stopTest">
    //事件后直接点stop
      <div class="test1" @click.stop="stopTest"></div>
    </div>
      
stopTest(){
      console.log(1);
    }

• .prevent
  提交事件不再重载页面

• .self

    <ul @click.self="stopTest">
      <li>self测试</li>
    </ul>

• .once
  事件只执行一次

6. 事件的执行参数
   e是事件的默认执行参数。可以不用传参。
   和原生js相似，常用属性有

• 键盘属性

    <input @keydown="getevent">

方法	实例
e.target	target: input
e.srcElement	srcElement: input
e.key	key: “a”
e.code	code: “KeyA”
e.keyCode	keyCode: 65
e.which	which: 65

• 鼠标相关参数

方法	实例
e.timeStamp	时间戳-触发的时间间隔
e. clientX/Y	对于浏览器窗口可视区域的X,Y坐标(窗口坐标)
e.offsetX/Y	相对于事件源元素（srcElement）的X,Y坐标
e. target/srcElement	获取当前点击元素

Dom元素

1. vue里dom元素获取方式

• vue中的dom元素是虚拟dom

• 虚拟DOM的最终目标是将虚拟节点渲染到视图上。但是如果直接使用虚拟节点覆盖旧节点的话，会有很多不必要的DOM操作。例如，一个ul标签下很多个li标签，其中只有一个li有变化，这种情况下如果使用新的ul去替代旧的ul,因为这些不必要的DOM操作而造成了性能上的浪费。

• 为了避免不必要的DOM操作，虚拟DOM在虚拟节点映射到视图的过程中，将虚拟节点与上一次渲染视图所使用的旧虚拟节点（oldVnode）做对比，找出真正需要更新的节点来进行DOM操作，从而避免操作其他无需改动的DOM。

• 其实虚拟DOM在Vue.js主要做了两件事：

提供与真实DOM节点所对应的虚拟节点vnode；
将虚拟节点vnode和旧虚拟节点oldVnode进行对比，然后更新视图；

1） ref获取虚拟dom
使用：（注意调用时的s）
在元素内添加ref名称，在方法中使用this.$refs.名称输出添加ref的dom元素

 <!-- dom元素获取 -->
    <button @click="getdom">获取dom元素</button>
    <input type="text" ref="x">

 getdom(){
      console.log(this.$refs.x);//<input type="text">
    }

2）e. target/srcElement
直接获取当前操作元素（获取到的是真实dom）

计算属性computed

使用：方法调用类似于变量

 getdom(){
      // console.log(this.$refs.x);
      // 计算属性的调用
      this.comptest;
      console.log(this);
    }
    
  computed:{
    comptest(){
      this.obj.push({
         name: "李明",
          sex: "男",
          hobby: ["足球"]
      }),
      console.log(this.obj);
      
    }
  }

监听watch

1. 监听对象或数组
   普通监听或handle都无法获取到旧值，只能知道发生了变化

 // 监听属性
  watch:{
    // 对象监听
    obj:{
     handle(newval,oldval){
     console.log(newval,oldval);//都为改变后的值
     }
    }
  }

2. 监听数值型
   可以获取到新旧值

 // 监听属性
  watch:{
    // 数值型变量监听，参数分别为新值和旧值
    num(newval,oldval){
      console.log(newval,oldval);//1 0
    }
  }