使用eclipse初步学习vue.js基础==》v-for的使用 ②
一、步骤演示
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的使用 ②的更多相关文章
- 使用eclipse初步学习vue.js的基本操作 ①
一.vue.js的初步认识 <a href="https://unpkg.com/vue ">vue.js下载</a> 1.抛开手动操作DOM的思维,Vue ...
- 初步学习vue.js
vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 响应的数据绑定 Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同 ...
- Vue.js 基础快速入门
Vue.js是一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.Vue.js提供了简洁.易于理解的API,使得我们能够快速地上手并使用Vue.js 如果之前已经习惯了用jQue ...
- 从零开始学习Vue.js，学习笔记
一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...
- AJAX学习前奏----JS基础加强
AJAX学习前奏----JS基础加强 知识概要: 1.js类&属性&方法的定义 2.静态属性与方法 3.构造方法 4.原型的使用 5.Object对象直接加属性和方法 6.JSO ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- web前端——Vue.js基础学习
近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...
- 两万字Vue.js基础学习笔记（二）
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
- 记录21.07.22 —— Vue.js基础（一）
VUE基础 语雀课件地址 Vue.js框架 Vue中文文档 Vue.js 创建vue项目 ①在一个空项目中引入vue的js文件 <script src="https://cdn.jsd ...
随机推荐
- Python编程练习：使用 turtle 库完成正方形的绘制
绘制效果: 源代码: # 正方形 import turtle turtle.setup(650, 350, 200, 200) turtle.penup() turtle.pendown() turt ...
- Ajax原理与封装详解
Ajax大家每天都在用,jquery库对Ajax的封装也很完善.很好用,下面我们看一下他的内部原理,并手动封装一个自己的Ajax库. 更多有关ajax封装及数据处理,请参看上海尚学堂<Ajax中 ...
- win10怎么查看激活到期时间如何看是否永久激活
win10怎么查看激活到期时间如何看是否永久激活 我们知道Windows系统需要激活后才可以使用全部功能,那么你的Windows10激活了吗?如何查看激活时间呢?是不是永久激活的?带着这些问题 ...
- 深入理解java中的底层阻塞原理及实现
谈到阻塞,相信大家都不会陌生了.阻塞的应用场景真的多得不要不要的,比如 生产-消费模式,限流统计等等.什么 ArrayBlockingQueue, LinkedBlockingQueue, Delay ...
- SpringBoot+logback实现日志打印
logback介绍 logback是一款开源的日志框架,内核重写了,是基于log4j基础进行改良的.其官网为logback.qos.ch.logback在性能上有很大提升,拥有更多特性. logbac ...
- java开发之多线程基础篇
首先我们先来了解下线程的生命周期上一张图: Java线程具有五中基本状态 新建状态(New):当线程对象对创建后,即进入了新建状态,如:Thread t = new MyThread(); 就绪状态( ...
- SQL笔记之SELECT语句
SELECT语句的完整语法: SELECT[ALL/DISTINCT]目标列表达式 [AS 别名],··· --ALL不去掉重复 DISTINCT去掉重复 FROM 表名或视图名 或者(SELECT ...
- ubuntu设置IP地址&修改vi模式键盘上下键错位
解决ubuntu上面使用vi 出现方向键错乱的情况 编辑/etc/vim/vimrc.tiny 使用root权限操作:将“set compatible”改成“set nocompatible” 新增一 ...
- DDD实战进阶第一波(十三)：开发一般业务的大健康行业直销系统（订单上下文领域逻辑）
前一篇文章主要讲了订单上下文的POCO模型,其中订单与订单项中有大量的值对象.这篇文章主要讲讲这些值对象以及订单项.订单相关的领域逻辑. 1.ProductSKUs值对象领域逻辑:ProductSKU ...
- 如何用vue-router为每个路由配置各自的title
传统方法 以前在单页面路由中,就只能在html文件中定一个固定的网站的title.如果想要动态的去修改,需要使用如下的方法. document.title = '这是一个标题'; 这样会让我们做很多无 ...