Vue事件以及获取dom元素

一.事件对象

Vue 事件 以及获取dom元素（虚拟）

① v-on:事件类型 简写 @事件类型
v-on:click=" " 简写 @click=" "
② v-once 一次性数据绑定
③ changes 执行的方法可以不带括号
④ 写当前组件的所有方法
methods:{ } 注意methods后边是冒号：

<template>
  <div id="app">
  	<button v-on:click="changes">显示隐藏</button>
  	<div v-show="bool" class="p1"></div>
  </div>
</template>

<script>
export default {
   
  name: 'app',
  data () {
   
    return {
   
      bool:true
    }
  },
  //写当前组件的所有方法
  methods:{
   
    changes(){
   
      //写简单效果的代码
      //修改当前组件data方法里边变量值
      //this 指向  VueComponent
      //this里边可以拿到属性和方法
      console.log(this);  //注意this指针
      console.log(this.bool);
      console.log(this._data.bool);
      this.bool=!this.bool;
    }
  }
}
</script>

<style lang="less">
.p1{
   
  width: 200px;
  height: 200px;
  background-color: aqua;
}

</style>

⑤ 执行的方法有参数, 通过传参将参数传过去

<template>
  <div id="app">
    <ul>
      <li v-for="(item,index) in object" :key="index" v-on:click="changes(index)">
        姓名：{
   {
   item.name}}
        性别：{
   {
   item.sex}}
        <span v-for="(show,i) in item.hobby" :key="i">
          爱好：{
   {
   show}}，
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
   
  name: 'app',
  data () {
   
    return {
   
      object:[
      {
   
       name:"张三",
       sex:"男",
       hobby:<