vue 获取节点 获取事件

<template>

<div ref="dom"> 获取节点</div>

 </template>

getData(){
   console.log(this.$refs.dom)  这样就可以获取节点了
}


点击事件
<div @click="click">点击事件</div>

 document.querySelector('HTML标签').addEventListener('click',(ev)=>{ 
  第一个参数  事件类型  
  第二个参数可以是 function 也可以通过函数名来引用外部函数    
  第三个参数 true 捕获  false 冒泡   不写默认false 
})

     onclick  和 addEventListener区别
    <div id="index">
        <div id="indexTwo">

        </div>
    </div>
  <script>

     index.onclick=function(){
         alert(1111)
     }

     indexTwo.onclick= function(){        点击标签会启动冒泡事件 弹窗出现 2222 还会出现 111
         alert(2222)
     }

获取那个 节点 那么就只会触发那个节点的事件 不会冒泡 
     document.querySelector('#indexTwo').addEventListener('click',function(){
         alert(2222)
     })    
弹框会出现 2222 
 
 vue 指令
v-if    v-else   v-show v-for     v-model  只能用于input标签进行双向绑定

vue 生命周期

vue.jpg

什么是钩子函数 一开始就执行的 就是钩子函数

vue 钩子函数 也称作为生命周期

beforeCreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载后
beforeUpdate 更新前
Updated 更新后
beforeDestroy 销毁前
Destroyed 销毁后