Vue.js简单的应用

最新推荐文章于 2024-07-16 17:56:11 发布

asdf45465

最新推荐文章于 2024-07-16 17:56:11 发布

阅读量70

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/linglansen/p/7904673.html

版权

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

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

运行的还是:

转载于:https://www.cnblogs.com/linglansen/p/7904673.html

asdf45465

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js简单的应用

1:一个简单实现下面代码部分:<body><div id="myDiv1"> {{userName}} </div></body> <script src="${pageContext.request.contextPath}/js/vue.min.js"></scri...
复制链接

扫一扫