一、步骤演示

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. Vmware12 u盘启动系统

    先插U盘,再打开虚拟机 创建一个虚拟机 点击添加硬盘,下一步 先择SCSI,下一步 选择如图所示,有可能是1,也可能是2,这项就是U盘 设置完毕后,打开虚拟机,赶紧按F2,ESC 或者F12,这个是看 ...

  2. Kali学习笔记32：Maltego、Exiftool

    有段时间没学Kali里面的工具了 以前做信息收集的时候呢,忘记了两个很强大的工具:Maltego.Exiftool 先来看看Maltego: 这个工具不仅可以方便地收集DNS信息等等,强大地地方还在于 ...

  3. php--include 、require

    一.include .require 定义:包含并运行指定文件 问题:查询了这两个语言结构的资料,有人说,什么require  先执行,什么include后执行. 思考:我觉得官方文档已经解释的很清楚 ...

  4. Oracle和Mysql语法异同整理笔记

    目录 (1) 模糊匹配 (2) 删除数据 (3) 时间函数 (4) 关键字问题 (5) 递归查询 (6) 排序问题 (7) 空值返回0 (8) 取最大值 (9) 列转换函数 (10) 类型转行函数 @ ...

  5. 二、activiti工作流-创建25张表

    首先我们在eclipse上创建一个maven项目 然后在resources下面创建一个file,并命名问activiti.cfg.xml activiti.cfg.xml的配置内容如下 <?xm ...

  6. IntelliJ IDEA如何设置新建类时，自动注释作者信息和日期时间

    本文提供两种注释风格供参考. 风格1:简约Style 效果如下: 设置步骤: File--> Settings--> Editor--> File and Code Template ...

  7. python之获取当前操作系统(平台)

    Python在不同环境平台使用时,需要判断当前是什么系统,比如常用的windows,linux等 下面介绍一些能够获取当前系统的命令 1.使用sys.platform获取 #!/usr/bin/env ...

  8. ionic3 生成android 如何控制versionCode版本号

    ionic 项目中生成 android 如何控制版本号呢. 1.在项目的配置文件下的config.xml 来我们可以看到 <widget id="com.ionicframework. ...

  9. RocketMQ源码 — 四、 Consumer 接收消息过程

    Consumer consumer pull message 订阅 在Consumer启动之前先将自己放到一个本地的集合中,再以后获取消费者的时候会用到,同时会将自己订阅的信息告诉broker 接收消 ...

  10. kubelet集群网络配置flannel（覆盖网络）

    kubernetes本身并不会对跨主机容器的网络进行设置,这需要额外的工具来实现.一些常用的开源工具主要包括flanne.OpenvSwitch.Weave.Calico等,这里面最常用的是flann ...