一、render的作用

在react开发中render遇到的可能会比较多,在vue中render的功能与react中有点类似,都是渲染模板(组件)的作用

• 1、运行效果

• 2、具体代码

  // 创建一个组件
  const App = {
      template: `
          <div>
              <h1>我的App组件</h1>
          </div>
      `
  }
  var app = new Vue({
      el: '#app',
      data: {
  
      },
      // render是一个高阶函数,把创建的组件传递到高阶函数中作为参数渲染
      render(h) {
          return h(App);
      }
  })

二、ref的使用

获取真实的DOM元素,与react中的ref一样的

• 1、html代码

  <div id="app">
      <input type="button" value="点击" @click="getRef" />
      <div class="box" ref="box"></div>
  </div>

• 2、vue脚本代码

  var app = new Vue({
      el: '#app',
      data: {
  
      },
      methods: {
          getRef() {
              console.log(this.$refs);
              this.$refs.box.style.border = '5px solid #360';
          }
      }
  })