一、步骤演示

1、 新建一个jsp文件

2、 把vue.js放到Web的js目录下

3、 在jsp中引入vue.js

<script src="${pageContext.request.contextPath}/js/vue.js"></script>

4、 创建一个view对象(DOM组件)

5、 定义一个javascript的model

6、 创建一个Vue对象(ViewModel对象)

参数为一个json对象（包含2个参数,el,data）

7、运行结果

8、在浏览器的控制台使用push方法添加

9、与之for each和c：forEach对比

二、代码演示

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>初步认识vue.js操作②</title>

</head>

<body>

　　<div id="myView">

　　　　<ol>

　　　　　　<!-- 配置为循环项 -->

　　　　　　<li v-for="student in studentList">{{student.name}}</li>

　　　　</ol>

　　</div>

</body>

<script src="${pageContext.request.contextPath}/js/vue.js"></script>

<script type="text/javascript">

　　var myModel = {studentList:[{name:'小明'},{name:'小红'},{name:'小刚'}]};

　　var myViewModel1 = new Vue({

　　　　el:'#myView',

　　　　data:myModel

　　});

</script>

</html>

使用eclipse初步学习vue.js基础==》v-for的使用 ②的更多相关文章

  1. 使用eclipse初步学习vue.js的基本操作 ①

    一.vue.js的初步认识 <a href="https://unpkg.com/vue ">vue.js下载</a> 1.抛开手动操作DOM的思维,Vue ...

  2. 初步学习vue.js

    vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 响应的数据绑定 Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同 ...

  3. Vue.js 基础快速入门

    Vue.js是一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.Vue.js提供了简洁.易于理解的API,使得我们能够快速地上手并使用Vue.js 如果之前已经习惯了用jQue ...

  4. 从零开始学习Vue.js，学习笔记

    一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...

  5. AJAX学习前奏----JS基础加强

     AJAX学习前奏----JS基础加强 知识概要: 1.js类&属性&方法的定义 2.静态属性与方法 3.构造方法 4.原型的使用 5.Object对象直接加属性和方法 6.JSO ...

  6. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  7. web前端——Vue.js基础学习

    近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...

  8. 两万字Vue.js基础学习笔记（二）

    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...

  9. 记录21.07.22 —— Vue.js基础（一）

    VUE基础 语雀课件地址 Vue.js框架 Vue中文文档 Vue.js 创建vue项目 ①在一个空项目中引入vue的js文件 <script src="https://cdn.jsd ...

随机推荐

  1. 腾迅云获取免费SSL证书并布置

    上次申请了SSL证书一直没时间布置,今天重新再来操作一次 首先需要申请SSL证书,腾迅云买的域名有免费一年的SSL证书申请,网址:https://console.cloud.tencent.com/s ...

  2. 一个简单的实例演示vuex模块化和命名空间

    因为Vuex Store是全局注册的,不利于较大的项目,引入模块分离业务状态和方法,引入命名空间解决不同模块内(getters,mutaions,actions)名称冲突的问题 ----------- ...

  3. React 实现一个时钟

    最终效果 其实主要难点在于最左边的小时钟 指针的实现方式很简单,就是通过绝对定位将指针移到中间,然后以下边中间的位置为圆心旋转即可.代码如下: <!DOCTYPE html> <ht ...

  4. 一道关于：ArrayList、Vector、LinkedList的存储性能和特性 的面试题

    ArrayList 和Vector是采用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元素,都允许直接序号索引元素,但是插入数据要设计到数组元素移动等内存操作,所以索引数据快插入数据慢 ...

  5. 课程五(Sequence Models)，第二 周（Natural Language Processing & Word Embeddings） —— 0.Practice questions：Natural Language Processing & Word Embeddings

    [解释] The dimension of word vectors is usually smaller than the size of the vocabulary. Most common s ...

  6. 11.Django2.0文档

    第四章 模板 1.标签 (1)if/else {% if %} 标签检查(evaluate)一个变量,如果这个变量为真(即,变量存在,非空,不是布尔值假),系统会显示在 {% if %} 和 {% e ...

  7. Quartz的使用案例

    一.介绍 项目中的调度任务可以使用Quartz任务调度框架 1.Job接口:这个接口里面只定义了一个方法,excute void execute(JobExecutionContext context ...

  8. Android--UI之ImageSwitcher

    前言 这篇博客来聊一聊AndroidUI开发中ImageSwitcher控件的使用.ImageSwitcher控件与ImageView类似,都可以用于显示图片,但是ImageSwitcher通过名字可 ...

  9. 全网最全最详细的Windows下安装Anaconda2 / Anaconda3（图文详解）

    不多说,直接上干货! 说明: Anaconda2-5.0.0-Windows-x86_64.exe安装下来,默认的Python2.7 Anaconda3-4.2.0-Windows-x86_64.ex ...

  10. Java的运行原理（转载）

    在Java中引入了虚拟机的概念,即在机器和编译程序之间加入了一层抽象的虚拟的机器.这台虚拟的机器在任何平台上都提供给编译程序一个的共同的接口.编译程序只需要面向虚拟机,生成虚拟机能够理解的代码,然后由 ...