MVVM框架

1.什么是Vue.js？

它是一套构建用户界面的渐进式框架

2.Vue.js怎么引用？

　　2.1)步骤

　　　　1）创建一个web项目

　　　　2）创建一个jsp页面

　　　　3）把vue.js放到web文件夹下

　　　　4）在jsp中引入vue.js

　　　　　　<script src="${pageContext.request.contextPath}/js/vue.js"></script>

　　　　5）创建一个view对象(DOM组件)，

　　　　　　注意：此view对象，可以包含n个数据,数据使用{{xxxx}}来描述

　　　　6）定义一个javascript的model

　　　　　　var myModel1 = {userName:'张三丰',age:19};

　　　　7）创建一个Vue对象(ViewModel对象)

　　　　　　参数为一个json对象（包含2个参数,el,data）

*********************************************************************************************

例子1：

　　<div id="myDiv1">　　{{userName}}　　</div>

　　<script src="${pageContext.request.contextPath}/ja/vue.js/"></script>

　　<script>
　　　　var myModel = {userName:'大明',age:13};
　　　　var myViewModel = new vue({
　　　　　　el:'#myDiv1',
　　　　　　data:myModel
　　　　});
　　　　console.log(myViewModel.age);
　　</script>

 

3.DOM的思维

 　　1、抛开手动操作DOM的思维，Vue.js是数据驱动的，你无需手动操作DOM。

 　　2、将DOM和数据绑定起来，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

 　　3、MVVM模式（Model-View-ViewModel）ViewModel是如何和View以及Model进行交互的。model放在data（可能多项）,view放在el（view里面的{{  }}可能多项，跟model对应

　　 4、ViewModel是Vue.js的核心，它是一个Vue实例。 Vue实例是作用于某一个HTML元素上的， 这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

 　　5、所有的元素都是响应式的

 

4.JSON数据格式

　　1）单变量的格式

　　　　{key1 : value1,key2 : value2}

　　2）多条数据

　　　　[ { },{ },{ } ]