在学习Vue之前，首先大家要知道一个mvvm模式，何为mvvm模式呢，mvvm其实是有m,v和vm组成，类似与java里面的mvc模式，只不过mvc模式是针对于后台来说，而mvvm是针对于前台来说的，其中m指的是数据，v指的是页面视图，而vm则指的是数据和页面视图之间的相互调动，也就是说数据可以存储到页面视图中展示出来，相反页面视图的数据也可以存储到数据里面，这个mvvm模式主要是可以分离视图和模型，让开发人员主要集中于业务逻辑的开发中。
1.要使用vue.js，首先要导vue.js的包。
2.要想使用vue都是通过实例化的方式实现的，如下：
var vm=new Vue({
//各个属性；
})
上面这个就是Vue的实例化
例子1：视图和数据的交互渲染
<div id="vm">
<p>姓名：{{name}}</P>
<p>性别：{{sex}}</P>
<p>{{study()}}</p>
</div>
<script>
var vm=new Vue({
el:"#vm",
data:{name:'小楠',sex:'女'},
methods:{
study:function(){
return:this.name+"好好学习";
}
}
例子2：当一个vue的属性值被改变时，html的视图也会发生变化
<div id="vm">
<p>姓名：{{name}}</P>
<p>性别：{{sex}}</P>
<p>{{study()}}</p>
</div>
<script>
var data={name:"小楠"，sex:"女"}
var vm=new Vue({
el:"#vm",
data:data,
methods:{
study:function(){
return:this.name+"好好学习";
}
}})
document.write(data.name===vm.name);//true
vm.name="小雅"；
document.write(vm.name);//小雅
</script>
例子3:Vue提供的一些属性和方法，他们都有前缀$，以便与用户自定义的属性分开
<div id="vm">
<p>姓名：{{name}}</P>
<p>性别：{{sex}}</P>
<p>{{study()}}</p>
</div>
<script>
var data={name:"小楠"，sex:"女"}
var vm=new Vue({
el:"#vm",
data:data,
methods:{
study:function(){
return:this.name+"好好学习";
}
}
})
document.write(vm.$data===data);//true
document.write(vm.$el===document.getElementById("vm"));//true
</script>
