目标：我想用jQuery操作vue模板中的元素;

示例html:

<div id="app">

 <div ref="mydiv">我是内容</div>

</div>

示例js:

var vm = new Vue({

updated: function () {//这样保证vue的html渲染完成，就可以用ref对其操作了
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered

  $(vm.$refs.mydiv).text("我可以往div里放东西了，记得一定是要在updated这个状态里哦")

  })
}

})

vue2文档原话：子组件引用

尽管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。例如：

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>

var vm = new Vue({ el: '#parent' })
// 访问子组件实例
var child = vm.$refs.profile

当 ref 和 v-for 一起使用时，获取到的引用会是一个数组，包含和循环数据源对应的子组件。

$refs 只在组件渲染完成后才填充，并且它是非响应式的。它仅仅是一个直接操作子组件的应急方案——应当避免在模板或计算属性中使用 $refs。