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. mysql执行sql脚本

    最近用mysql执行sql脚本,遇到一些问题,顺便记录一下笔记. 首先,先开启mysql服务,创建一个空数据库(脚本里没有创建数据库) 执行脚本有两个方法 1.未连接数据库:在Windows下使用cm ...

  2. git 修改commit日期为之前的日期

    我在之前修改了一个文件,但是没有commit,现在我想要commit,日期为那天的日期 git commit --date="月 日 时间 年 +0800" -am "提 ...

  3. 三、Spring的面向切面

    Spring的面向切面 在应用开发中,有很多类似日志.安全和事务管理的功能.这些功能都有一个共同点,那就是很多个对象都需要这些功能.复用这些通用的功能的最简单的方法就是继承或者委托.但是当应用规模达到 ...

  4. PyCharm 2017 官网 下载 安装 设置 配置 (主题 字体 字号) 使用 入门 教程

    一.安装 Python 3.6 首先,要安装好 Python 3.6.如果你还没有安装,可以参考咪博士之前的教程 Python 3.6.3 官网 下载 安装 测试 入门教程 (windows) 二.官 ...

  5. 【转】 bio 与块设备驱动

    原文地址: bio 与块设备驱动      系统中能够随机访问固定大小数据片(chunk)的设备被称作块设备,这些数据片就称作块.块设备文件都是以安装文件系统的方式使用,此也是块设备通常的访问方式.块 ...

  6. java zip解压

    /** * 解压文件到指定目录 * @param zipFile * @param descDir * @author sqdll */@SuppressWarnings("rawtypes ...

  7. 备忘：有MTU值设置不当导致的部分网站无法访问问题

    如题,有时候突然weibo.com,webQQ等网站网络连接超时,怎么找也没得原因,今天管理电信的光猫,发现设置的MTU的1400,突然想起之前电脑和路由器上设置的MTU是1500,感觉可能是这个问题 ...

  8. Vue源码后记-钩子函数

    vue源码的马拉松跑完了,可以放松一下写点小东西,其实源码讲20节都讲不完,跳了好多地方. 本人技术有限,无法跟大神一样,模拟vue手把手搭建一个MVVM框架,然后再分析原理,只能以门外汉的姿态简单过 ...

  9. HTTP服务简介

    第1章 HTTP服务介绍 1.1 简述用户访网站流程 a 进行域名信息的DNS解析   dig +trace 获得www.oldboyedu.com  ip地址信息 b 进行与网站服务器建立连接,tc ...

  10. css变量

    CSS变量: 目前主流浏览器都已支持CSS变量,Edge 浏览器也支持 CSS 变量.用户可以方便地在css中使用自定义变量. <!DOCTYPE html> <html lang= ...