创建vue实例后，数据为什么渲染不上去，原封不动的给你显示{{}}

创建vue实例后，数据为什么渲染不上去，原封不动的给你显示{{}}

问题描述：

        新手在学习vue时，基本上都是从创建第一个vue实例开始的，下面是不是你写的实例代码呢？

<script>var vm = new Vue({el:"#hello",data():{return{xxx:xxx}}})
</script>

        实例创建好以后，那么你就开始调接口，获取数据，渲染数据。

<div style="height: 1000px;background: #fff;color:#000"><div>Hello你好，这是我创建的Vue实例，请看：</div><div>{{item.title}}</div><div>我成功了！</div>
</div>

        就当你要为你的第一步庆祝的时候，然而打开浏览器，懵了，赫然显示着{{}}，好像在明明白白的告诉你，怎么给我的我就怎么还给你！

         别急！那是因为你忽视掉一个细节，忘了这个，人家当然不愿意受你控制咯！

原因：

        创建实例的时候，有没有发现el这个东西，是他，是他，就是他！

        el是用来指明Vue实例的挂载目标（具体用法以及解释可以自行搜索），那你就得让他有的指才行！

解决办法：

        来吧！直接上硬货！把上述代码直接改成这样：

<div id="hello" style="height: 1000px;background: #fff;color:#000"><div>Hello你好，这是我创建的Vue实例，请看：</div><div>{{item.title}}</div><div>我成功了！</div>
</div>

        把你写的实例中，el:"#hello"，映射到你要显示元素的dom上，通过添加id="hello"，来完成映射任务！搞定！

结果：