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值)  来查看该对象都有哪些属性和方法