vue操作dom元素和vue組件（ref）

一、js中操作dom元素：　　使用document.方法('選擇器的名字')。。。 的方式來操作dom元素

二、jquery中操作dom元素：使用$（'選擇器名字'）的方式來操作dom元素

 

三、vue中操作dom元素和vue組件：

　　1. 操作原生html標簽對象：(需要設置html原生dom元素的ref屬性)

<div id="app">
    <button @click="modifyBox1">修改box1值</button>
    <button @click="modifyBox2">修改box2值</button>
    <div id="box1" ref="box1" style="height: 100px;width: 100px;background-color: #666666">box1</div>
    <div id="box2" ref="box2" style="height: 100px;width: 100px;background-color: #dea726">box2</div>
  </div>

var vm = new Vue({
    el:'#app',
    data(){
      return {
        message: '',
        message1:'',
        components:[com1,com2,com3],
        currentTabComponent:com1
      }
    },
    methods:{
      modifyBox1(){
        this.$refs.box1.innerHTML = 'hello world box1'
      },
      modifyBox2(){
        this.$refs.box2.innerHTML = 'hello world box2'
      },

　　上面的代碼是對html元素的ref屬性賦值，然后在vue根實例中通過this.$refs.ref值來獲取到該dom對象

　　

　　2.操作vue組件對象：

　　　　在vue根實例中操作：使用this.$refs.ref值獲取到的是該組件對象，可以打印一下這個組件對象 console.log(this.$refs.ref值)  來查看該對象都有哪些屬性和方法