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. 张高兴的 Windows 10 IoT 开发笔记：ADXL345 加速度传感器

    GitHub : https://github.com/ZhangGaoxing/windows-iot-demo/tree/master/ADXL345Demo

  2. angular 4 实现的tab栏切换

    管理系统 tab 切换页,是一种常见的需求,大概如下: 点击左边菜单,右边显示相应的选项卡,然后不同的选项卡面可以同时编辑,切换时信息不掉失! 用php或.net,java的开发技术,大概是切换显示, ...

  3. 11-05-sdust-个人赛赛后随想

    第二次打个人赛 这次居然打秃了,被A题卡的体无完肤.....结果之后转D题心里挂着A题...D题也被卡. 然后第二天不甘心,翘课来机房敲昨天的题,结果两题完全重新敲,都是10分钟左右敲完代码,A题1掉 ...

  4. vue 父组件传递子组件事件

    在开发中,碰到一个需要从父组件传入方法,子组件点击触发,说白了就是,把方法传入给子组件调用 <el-col v-for='data in spreadFormat.icons' class=&q ...

  5. session和cookie作用原理,区别

    Cookie概念 在浏览某些 网站 时,这些网站会把 一些数据存在 客户端 , 用于使用网站 等跟踪用户,实现用户自定义 功能. 是否设置过期时间: 如果不设置 过期时间,则表示这个 Cookie生命 ...

  6. 一张表搞懂各种 Docker 监控方案 - 每天5分钟玩转 Docker 容器技术（86）

    前面我们已经介绍了ps/top/stats.Sysdig.Weave Scope.cAdvisor 和 Prometheus 多种容器监控工具和方案,是时候做一个比较了.下面将从五个方面来对比它们之间 ...

  7. TensorFlow Object Detection API（Windows下测试）

    "Speed/accuracy trade-offs for modern convolutional object detectors." Huang J, Rathod V, ...

  8. Ionic3 遇到的一些错误- Error: Your isarray platform does not have Api.js

    执行:ionic cordova resources android --icon -i 生成应用图标时,出现下面的错误: 尝试解决方案: 删掉整个项目,重新创建,竟然好了....

  9. Python中subplots_adjust函数的说明

    使用subplots_adjust一般会传入6个参数,我们分别用A,B,C,D,E,F表示.然后我们对图框建立坐标系,将坐标轴原点定在左下角点,并将整个图框归一化,即横纵坐标都是0到1之间.从下图中可 ...

  10. 一个强大的封装好的pdo处理类

    php5.5后就不支持mysql扩展了,也就是说这以后都不能使用msyql_conncet之类的函数了.不过没有关系,pdo比mysql有更多优势,写法也很简单,下面贴出一个来自互联网的pdo处理类. ...