Vue.js简单的应用

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);

 

运行的还是:

 

posted @ 2017-11-27 16:17  凌岚森  阅读(926)  评论(0)  编辑  收藏  举报