1:一个简单实现
下面代码部分:
<body> <div id="myDiv1"> {{userName}} </div> </body> <script src="${pageContext.request.contextPath}/js/vue.min.js"></script> <script> var myVieModel1 = {userName:"张三丰",age:19} var myModel1 = new Vue({ el:"#myDiv1", data:myVieModel1 }); </script>
2: 为了让个别同学更好的有思路 以下实现步骤
1、 新建web项目
2、 新建一个jsp文件
3、 把vue.js放到Web的js目录下
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）
3:Vue.js实现简单的双向绑定
代码部分：
v-model指令，它能轻松实现表单输入和应用状态之间的双向绑定。
<div id="myDiv1"> {{userName}} <input v-model="userName"> </div> </body> <script src="${pageContext.request.contextPath}/js/vue.min.js"></script> <script> //var myVieModel1 = {userName:"张三丰",age:19} var myModel1 = new Vue({ el:"#myDiv1", data:{ userName:"大家好" } }); </script>
运行结果:
vue.js循环
代码部分:
<body> <div id="myVie"> <ol> <li v-for="student in studentList">{{student.name}}</li> </ol> </div> </body> <script src="${pageContext.request.contextPath}/js/vue.min.js"></script> <script type="text/javascript"> var myModel = {studentList:[{name:"小凌"},{name:"小团"},{name:"小良"}]}; var myVieModel = new Vue({ el:"#myVie", data:myModel }); </script>
运行结果:
注意:以上代码在后台中可以任意添加多个昵称 ,很多人当然不想被人在后台中任意添加删除了,那有没有更好的解决方法呢 有,下面会通过后台的形式来实现。
2.后台方式实现:
1:首先创建一个类
public class Student{ private String name; public String getName() { return name; } public void setName(String name) { this.name = name; } }
2.创建一个测试类
public class Test{ public static void main(String[] args){ Student s1 = new Student(); Student s2 = new Student(); Student s3 = new Student(); s1.setName("小发"); s2.setName("小景"); s3.setName("小东"); List<Student> studentList = new ArrayList(); studentList.add(s1); studentList.add(s2); studentList.add(s3); /*<li v-for="student in studentList">{{student.name}}</li>*/ for(Student student : studentList){ System.out.println(student.getName()); } }
运行结果:
3.即使你在new一个对象
Student s4 = new Student(); s4.setName("小吴"); studentList.add(s4);
运行的还是:
