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. oracle11G r2 静默安装单实例（待优化版）

    测试环境:centos 6.9 X64 mini 版 oracle版本:11G r2 Oracle软件包:db_112040_Linux-x86-64_1of7.zip;db_112040_Linux ...

  2. ArcGis for flex查询FeatureLayer数据

    1. 首先实例化一个FeatureLayer对象 private var featureLayer:FeatureLayer=new FeatureLayer(); 2.指定FeatureLayer对 ...

  3. 关于时钟模块DS1302的使用心得

    最近在做万年历,用到实时时钟DS1302模块,花了两天时间看资料和写驱动,想记录一下我的学习经过,顺便做一下总结. 首先就是在图书馆查各种资料,于是查到的大多是这些,主要时硬件方面的资料: 其实能查到 ...

  4. word2vec 在 非 自然语言处理 (NLP) 领域的应用

    word2vec 本来就是用来解决自然语言处理问题的,它在 NLP 中的应用是显然的. 比如,你可以直接用它来寻找相关词.发现新词.命名实体识别.信息索引.情感分析等:你也可以将词向量作为其他模型的输 ...

  5. 用node.js实现ORM的一种思路

    ORM是O和R的映射.O代表面向对象,R代表关系型数据库.二者有相似之处同时也各有特色.就是因为这种即是又非的情况,才需要做映射的. 理想情况是,根据关系型数据库(含业务需求)的特点来设计数据库.同时 ...

  6. .1-Vue源码起步

    搞事!搞事! 截止2017.5.16,终于把vue的源码全部抄完,总共有9624行,花时大概一个月时间,中间迭代了一个版本(2.2-2.3),部分代码可能不一致,不过没关系! 上一个链接https:/ ...

  7. Ionic3 创建应用后，目录结构

    ionic start myApp blank (空项目) hooks --编译cordova时自定义的脚本命令,方便整合到我们的编译系统和版本控制系统中 node_modules --node各类依 ...

  8. 暑假练习赛 006 A Vanya and Food Processor（模拟）

    Description Vanya smashes potato in a vertical food processor. At each moment of time the height of ...

  9. Jungle Roads（最小生成树）

    Jungle Roads Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...

  10. :after伪类+content内容生成

    :after伪类+content 清除浮动的影响 浮动元素会让此div的高度塌陷.如下例子: .box{padding:10px; background:gray;} .l{float:left;} ...