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>

html code

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\'
      },

script Code

　　上面的代码是对html元素的ref属性赋值，然后在vue根实例中通过this.$refs.ref值来获取到该dom对象

　　

　　2.操作vue组件对象：

　　　　在vue根实例中操作：使用this.$refs.ref值获取到的是该组件对象，可以打印一下这个组件对象 console.log(this.$refs.ref值)  来查看该对象都有哪些属性和方法