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);
运行的还是: