VUE开发–获取DOM对象和组件对象(十九)

模板：
   <button @click="getdata">获取dom对象</button>
    <div ref="mydiv">这是一个div</div>

js：
  methods: {
    getdata: function() {
      //在这个方法中通过vue形式获取到div的对象，比js和jq都方便
      console.log(this.$refs.mydiv);
      //改变div里面的innerText内容
      this.$refs.mydiv.innerText = "修改以后的值";
    }
  }

模板：
    <ul>
      <li v-for="(item,index)  in tabList" v-on:click="addClass(index,$event)">{{item.title}}</li>
    </ul>
JS:

  data() {
    return {
      tabList: [
        { id: 0, title: "首页1" },
        { id: 1, title: "首页2" },
        { id: 2, title: "首页3" }
      ],
      current: 0
    };
  },
  methods: {
  addClass: function(index,event) {
      this.current = index;
      //获取点击对象      
      var el = event.currentTarget;
      console.log("当前对象的内容："+el.innerHTML);
      console.log(this.current)
    }
  }

模板：
  <button v-on:click="getMessage">获取message的值</button> 
JS:
  data() {
    return {
      myPhone: 123456
    };
  },
  methods: {
    // 箭头函数的this指向了window，其实应该指向vue的实例
    // 普通函数
    getMessage: function() {
      alert(this.myPhone);
      console.log(this); // 指向Vue的实例
    }
  }