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. UEFI启动视频详解：启动分析+N项操作实例

    ============================================================= ※※※※最给力的视频解说※※※※ 2011hiboy全部共享资料:立刻去   ...

  2. WPF 设置输入只能英文

    有时输入只能让用户输入英文,那么如何设置输入只能英文? 首先在xaml 写一个 TextBox ,给他一个名字. <TextBox x:Name="txt"></ ...

  3. table插件

    //动态添加一行function addRow(){ var firstrow=document.getElementById('firstrow'); var firstCopy=firstrow. ...

  4. C# 根据路径删除文件或文件夹

    如何根据路径删除文件或文件夹? 1.首先我们要判断路径是文件或者是文件夹 那么我们可以通过 FileAttributes attr = File.GetAttributes(path); 来得到路径的 ...

  5. apache+php+mysql运行环境

    建议Apache2.4+php5.6+mysql5.5+phpmyadmin4.4.4 参考: http://jingyan.baidu.com/article/fcb5aff797ec41edaa4 ...

  6. 使用element ui 日期选择器获取值后的格式问题

    一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...

  7. Jquery datatable中文排序问题

    先扩展datatable的的排序功能,添加一个自定义排序函数 //为jq datatable 自定义中文排序 jQuery.fn.dataTableExt.oSort['chinese-sort-as ...

  8. Lifting the Stone（求多边形的重心—）

    Lifting the Stone Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...

  9. CS231n 2017 学习笔记01——KNN（K-Nearest Neighbors）

    本博客内容来自 Stanford University CS231N 2017 Lecture 2 - Image Classification 课程官网:http://cs231n.stanford ...

  10. 如何兼容所有Android版本选择照片或拍照然后裁剪图片--基于FileProvider和动态权限的实现

    我们知道, Android操作系统一直在进化. 虽然说系统是越来越安全, 可靠, 但是对于开发者而言, 开发难度是越来越大的, 需要注意的兼容性问题, 也越来越多. 就比如在Android平台上拍照或 ...