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

不念不忘少年蓝@ 2023-05-29 11:48 8阅读 0赞

##### 事件及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;
        }
      }

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

console.log(this.ischange);

也可以通过`get set`访问器

console.log(this._data.ischange);

1.  有参事件：参数传递

<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);
        }

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

*  .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>

![在这里插入图片描述][20191106202717456.png]

*  .once  
    事件只执行一次

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

*  键盘属性

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>实例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>e.target</td> 
   <td>target: input</td> 
  </tr> 
  <tr> 
   <td>e.srcElement</td> 
   <td>srcElement: input</td> 
  </tr> 
  <tr> 
   <td>e.key</td> 
   <td>key: “a”</td> 
  </tr> 
  <tr> 
   <td>e.code</td> 
   <td>code: “KeyA”</td> 
  </tr> 
  <tr> 
   <td>e.keyCode</td> 
   <td>keyCode: 65</td> 
  </tr> 
  <tr> 
   <td>e.which</td> 
   <td>which: 65</td> 
  </tr> 
 </tbody> 
</table>

*  鼠标相关参数

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]

##### 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进行对比，然后更新视图；  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]

1） ref获取虚拟dom  
使用：（注意调用时的s）  
在元素内添加`ref`名称，在方法中使用`this.$refs.名称`输出添加ref的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);//都为改变后的值
         }
        }
      }

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

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

[20191106202717456.png]: https://img-blog.csdnimg.cn/20191106202717456.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191107165516872.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191107170006919.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70