一、步骤演示

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. win10 系统下无法正常安装 Anaconda3

    最近国庆两天,突然心血来潮重装了一遍系统,重装成了win10系统以后毛病百出哇,昨天和今天一直在解决一个问题,那就是安装Anaconda3的时候出现不了快捷方式,如下图这样只有一个快捷方式(在win7 ...

  2. 双十一福利，阿里云1核2G一年最低只要99

    活动期间,新用户可任选1款购买,限购1台,拼团后团内每增加1名新购用户,全团再享10%优惠 (50%封顶),买贵返差 又是只给新用户的福利,比上次的699一年的活动要差一点.如果之前注册了没下手的用户 ...

  3. Warning: imagettfbbox(): Could not read font in XXX on line X

    今天在做图形验证码的时候,在windows运行好好的代码在CentOS下却无法运行了.报了如下警告 Warning: imagettfbbox(): Could not read font in /m ...

  4. 第86节：Java中的JQuery基础

    第86节:Java中的JQuery 前言复习 定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display ...

  5. ruby-操作mysql

    ruby操作mysql数据库 以centos7.2为实验环境 Table of Contents 使用DBI访问Mysql 使用Mysql2访问Mysql DBI 安装DBI驱动 很多同学在公司是没有 ...

  6. html 转义处理

    比如要把:<span>test</span> 这段代码当做文本原样输出在页面上,如果按照正常的方式,肯定会被转义,在页面上只能看到 text.那么要想达到预想的效果,应该怎么办 ...

  7. ubuntu 16.04 安装caffe2的方法及问题解决

    工作需要安装caffe2,从用户体验上来讲,caffe2的安装绝对是体验比较差的那种,花费了我那么多时间去倒腾,这样的用户体验的产品,估计后面是比较危险的． 废话少说,直接上步骤: 官网上有安装目录, ...

  8. python高级-深浅拷贝(16)

    一.浅拷贝 浅拷贝是对一个对象的顶层拷贝,通俗地讲就是:拷贝了引用,并没有拷贝内容. a = [1,2,3] print(id(a)) b=a print(b) print(id(b)) a.appe ...

  9. vue 项目实战 (入门)

    环境搭建 安装NodeJS →箭头https://nodejs.org/en/ NPM是随同NodeJS一起安装的包管理工具. 检查环境是否安装成功: 打开一个命令提示符,有成功输出版本号则为安装成功 ...

  10. 解决添加codova plugin 编译出现问题：Execution failed for task ':processDebugManifest'.

    问题背景: ionic3项目上,添加cordova-plugin-cszbar,编译运行在android平台上 ,结果编译不成功.出现以下问题. Element uses-feature#androi ...