Vue的学习(1)

在学习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>