Vue学习之路第二篇：插值表达式

要开始写Vue的功能了，是不是很激动呢！开始吧！

1、首先建立一个html页面，导入Vue js包

 <script type="text/javascript" src="js/vue.min.js"></script> 

 

2、架包导入之后，我们需要创建一个Vue对象，用来绑定元素节点，从而达到操作元素的目的。即一个Vue对象必须要绑定一个元素节点，且为根节点。

<div id="app">
        <p> {{ msg }} </p>
</div>

var vm = new Vue({
      el : "#app",
      data : {
           msg : "Hello Vue"
       }
});

大家可以看到，通过new的方式创建了一个Vue对象，对象包含了 el 和 data两个属性(这一篇只涉及这两个属性)，"el" 是用来绑定元素节点的，对应的是id为app的元素节点，由于是id，所以不要忘记 "#" 号哦。"data" 是Vue对象里绑定的数据，采用的 key-value形式定义。展示数据的时候采用的是插值表达式 “{{ }}”。

怎么样，是不是很简单？ 

 

插值表达式问题点：

大家功能实现之后，如果频繁刷新页面或者通过浏览器调试工具把网速模拟调的很慢的话，会发现一个现象：页面会先显示" {{ msg }} "内容，然后才会显示“Hello Vue”，对于这个问题下篇会讲解解决办法并介绍更多的Vue内容。

每天进步一点点！