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的某个元素。
4.JSON数据格式
1)单变量的格式
{key1 : value1,key2 : value2}
2)多条数据
[ { },{ },{ } ]