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

运行的还是:

Vue.js简单的应用的更多相关文章

  1. 98、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  2. 13、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  3. vue.js简单添加和删除

    这只是个简单的添加和删除,没有连接后台数据的 <%@ page language="java" contentType="text/html; charset=UT ...

  4. Vue.js简单入门

    这篇文章我们将学习vue.js的基础语法,对于大家学习vue.js具有一定的参考借鉴价值,有需要的朋友们下面来一起看看. Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容 ...

  5. Vue.js简单记录

    官网:https://cn.vuejs.org/ https://cn.vuejs.org/v2/api/#methods v-bind 缩写 <!-- 完整语法 --> <a v- ...

  6. VUE.js 简单引用

    Vue开发的两种方式:静态资源引入开发 和 脚手架交互式开发 这里使用的是静态资源引入开发 首先 引用jquery.js  和  vue.js html 标签内加个 <div id=" ...

  7. Vue.js简单实践

    直接上代码,一个简单的新闻列表页面(.cshtml): @section CssSection{ <style> [v-cloak] { display: none; } </sty ...

  8. vue.js 简单入门

    转载自:http://blog.csdn.net/violetjack0808/article/details/51451672 <!DOCTYPE html> <html lang ...

  9. Vue.js简单的状态管理和 Vuex的几个核心概念使用。

    由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长. 如果多层组件嵌套使用,传递prop,和事件emit.都很不方便. 不方便对数据的修改进行历史记录.影响后续的调试! 为了 ...

随机推荐

  1. chromium源码阅读--Browser进程初始化

    最近在研读chromium源码,经过一段懵懂期,查阅了官网和网上的技术文章,是时候自己总结一下了,首先IPC message loop开始吧,这是每个主线程必须有的一个IPC消息轮训主体,类似之前的q ...

  2. js实现微信朋友圈模糊图片功能

    本人第一次写文章 ,写的不好大家就凑合着看吧. 界面的简单效果. 主要html如下 <div id="content"> <!--模糊图片--> <i ...

  3. Nginx功能展示实验

    Nginx功能展示实验 Nging可以作为反代服务器:也可以作为负载均衡器,并自带根据对后端服务器健康状态检测具有增删服务器的功能:也可以作为纯Web服务器,提供Web服务. 本实验将使用Nginx实 ...

  4. ThreadPoolExecutor系列<二、ThreadPoolExecutor 代码流程图>

    本文系作者原创,转载请注明出处:http://www.cnblogs.com/further-further-further/p/7681648.html 1.ThreadPoolExecutor代码 ...

  5. Judge Route Circle --判断圆路线

    Initially, there is a Robot at position (0, 0). Given a sequence of its moves, judge if this robot m ...

  6. web 开发中的路由是什么意思

    路由: 就是一个路径的解析,根据客户端提交的路径,将请求解析到相应的控制器上 从 URL 找到处理这个 URL 的类和函数

  7. 点击下拉，其余不动的jquery事件（转）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. C++ 多态与虚函数

    1.多态的概念 由虚函数实现的动态多态性就是:同一类族中不同类的对象,对同一函数调用作出不同的响应. 先看下面这个简单的例子: #include<iostream> using std:: ...

  9. [板子]segTree

    segTree 参考:http://www.cnblogs.com/TenosDoIt/p/3453089.html#c 初学者建议先参考上面“一步一步理解线段树”学习理论. 在这里Code分别为区间 ...

  10. 走近 Python (类比 JS)

    Python 是一门运用很广泛的语言,自动化脚本.爬虫,甚至在深度学习领域也都有 Python 的身影.作为一名前端开发者,也了解 ES6 中的很多特性借鉴自 Python (比如默认参数.解构赋值. ...