使用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 ...
随机推荐
- hadoop基础与实践--流程解惑
看过好多本hadoop的书,对整个过程始终存在一些疑问,今天终于搞清楚了.立个low-flag. 整体架构好复杂的感觉?其实不复杂 整体架构,namenode/metanode负责维护所有的元数据,d ...
- eureka相关异常
1. eureka相关异常 1.1. 异常信息 Error creating bean with name 'eurekaAutoServiceRegistration': Singleton bea ...
- Ubuntu下OpenCV版本切换
1.假如安装了opencv以下两个版本: opencv-2.4.13 opencv-3.2.0 2.安装目录分别为: /usr/local/opencv-2.4.13 /usr/local/openc ...
- Spring Data Redis 详解及实战一文搞定
SDR - Spring Data Redis的简称. Spring Data Redis提供了从Spring应用程序轻松配置和访问Redis的功能.它提供了与商店互动的低级别和高级别抽象,使用户免受 ...
- tensorflow 迭代周期长，每个epoch时间变慢
理论上,session启动后,每个epoch训练时间应该是差不多,而且不会因为迭代周期变长,epoch时间变慢.原因是session里定义了tf.op导致的,每一次迭代都会在graph里增加新的节点, ...
- 给iPhone手机安装*.ipa
首先手机连接电脑,打开 ITunes. 左上角点击文件,再点击添加到资料库. 找到你要安装的ipa点击选择打开 好了ipa已经添加进去后,你会看你你刚才添加进去的应用在列表内,点击左上角一个手机的图标 ...
- Android Studio下HierarchyViewer的使用
什么是HierarchyViewer Hierarchy Viewer是随AndroidSDK发布的工具,位置在tools文件夹下,名为hierarchyviewer.bat.它是Android自带的 ...
- DWR第三篇之逆向Ajax升级
1. 本示例在第二篇架构基础上添加代码 2.在client.jsp开头的地方添加如下代码: 本示例需要做的是定向推送,那么就需要浏览器进行登录,从而进行定向的推送功能,为了节省时间,这里不做登录模块了 ...
- Mysql 锁和锁算法
相关命令: show engines; 查看数据库支持的引擎 show variables like '%storage_engine%'; 查看数据库默认的引擎 select @@global ...
- 权限控制和OAuth
目录 1 权限控制是什么 1.1 ACL 1.2 RBAC 1.2.1 名词术语 1.2.2 RBAC定义 1.2.3 RBAC分类 1.2.3.1 RBAC0 1.2.3.2 RBAC1 1.2.3 ...