使用eclipse初步学习vue.js的基本操作 ①
一、vue.js的初步认识
<a href="
https://unpkg.com/vue ">vue.js下载</a>
1、抛开手动操作DOM的思维，Vue.js是数据驱动的，你无需手动操作DOM。
2、将DOM和数据绑定起来，DOM将和数据保持同步，
每当变更了数据，DOM也会相应地更新。
3、MVVM模式（Model-View-ViewModel）
ViewModel是如何和View以及Model进行交互的。
model放在data（可能多项）
view放在el（view里面的{{ }}可能多项，跟model对应）
4、ViewModel是Vue.js的核心，它是一个Vue实例。
Vue实例是作用于某一个HTML元素上的，
这个元素可以是HTML的body元素，
也可以是指定了id的某个元素。
5、所有的元素都是响应式的
二、vue.js的初步操作
1、 新建web项目
2、 新建一个jsp文件
3、 把vue.js放到Web的js目录下
4、 在jsp中引入vue.js
<script src="${pageContext.request.contextPath}/js/vue.js"></script>
5、 创建一个view对象(DOM组件)
注意：此view对象，可以包含n个数据,数据使用{{xxxx}}来描述。
6、 定义一个javascript的model
var myModel1 = {userName:'dqc',age:22};
7、 创建一个Vue对象(ViewModel对象)
参数为一个json对象（包含2个参数,el,data）
8、运行效果
三、代码演示
<%@ 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="myDiv1">
<p>这里是mydiv1</p>
{{userName}}
{{age}}
</div>
<div id="myDiv2">
<p>这里是mydiv2</p>
{{age}}
</div>
</body>
<script src="${pageContext.request.contextPath}/js/vue.js"></script>
<script type="text/javascript">
var myModel1 = {userName:'dqc',age:22};
var myViewModel1 = new Vue({
el:'#myDiv1',
data:myModel1
}); </script>
</html>
使用eclipse初步学习vue.js的基本操作 ①的更多相关文章
- 使用eclipse初步学习vue.js基础==》v-for的使用 ②
一.步骤演示 1. 新建一个jsp文件 2. 把vue.js放到Web的js目录下 3. 在jsp中引入vue.js <script src="${pageContext.reques ...
- 初步学习vue.js
vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 响应的数据绑定 Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同 ...
- 从零开始学习Vue.js，学习笔记
一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...
- 学习vue.js 第一天
最近听到很多人都在用Vue.js ,我也想凑凑热闹,来个入门 啥的 ,要不以后人家说,啥都不知道,多low 看到官网 是这样介绍Vue.js Vue.js(读音 /vjuː/, 类似于 view) 是 ...
- 学习vue.js的正确姿势(转载)
最近饶有兴致的又把最新版 Vue.js 的源码学习了一下,觉得真心不错,个人觉得 Vue.js 的代码非常之优雅而且精辟,作者本身可能无 (bu) 意 (xie) 提及这些.那么,就让我来吧:) 程序 ...
- 学习Vue.js之vue移动端框架到底哪家强
官网:https://cn.vuejs.org/. 转载:http://www.cnblogs.com/8899man/p/6514212.html Weex 2016年4月21日,阿里巴巴在Qcon ...
- 学习Vue.js需要了解的部分内容
重要: 1.如果要通过js/模板引用 图片到项目,图片路径需要使用require. 2.$event: $event 等于$emit 抛出的值,还可以使用$event.target.value. $e ...
- Vue 2.0 入门系列（14）学习 Vue.js 需要掌握的 es6 (1)
针对之前学习 Vue 用到的 es6 特性,以及接下来进一步学习 Vue 要用到的 es6 特性,做下简单总结. var.let 与 const var 与 let es6 之前,JavaScript ...
- 学习Vue.js
Vue.js官网 Vue.js官方教程 Vue.js教程 哔哩哔哩Vue.js教程 Vue.js百度百科
随机推荐
- 深入浅出Redis
一.Redis的诞生 Redis创建者,出生于西西里岛的意大利人(antirez)发明的,个人网站,http://invece.org.早年是系统管理员,2004-2006 年做嵌入式方面的工作,之后 ...
- 9.视差特效、回弹动画、overScrollBy
视差特效 * 应用场景: 微信朋友圈, QQ空间, 微博个人展示,向下拉出,松开回弹* 功能实现: > 1. 重写overScrollBy > 2. 松手之后执行动画, 类型估值器 . ...
- Powermock2.0.0 详细 总结
目录 1 单元测试 2 Junit测试框架 2.1 Junit是什么 2.2 Junit 能做什么? 3 Junit测试的局限性 4 Mock技术 5 相关的Mock工具 5.1 Mockito.Ea ...
- [Objective-C语言教程]关系运算符（8）
运算符是一个符号,告诉编译器执行特定的数学或逻辑操作. Objective-C语言内置很多运算符,提供如下类型的运算符 - 算术运算符 关系运算符 逻辑运算符 按位运算符 分配运算符 其它运算符 本教 ...
- 破解第二课 JMP法
首先,我用录屏大师自制了一个视频,给视频加上密码.任意输入,看到报错信息“密码不对,请重新输入” 第一步 反汇编窗口右键点击“中文搜索引擎”---“智能搜索”,搜索引擎界面再次搜索“不对”,结果如下: ...
- 【ABP框架系列学习】启动配置(5)
ABP提供了在启动时配置模块的基础设施和模型. 1.配置ABP 配置ABP是在模块的PreInitialize方法中完成的,例如: public class SimpleTaskSystemModul ...
- AspNetCore微服务下的网关-Kong(一)
Kong是Mashape开源的高性能高可用API网关和API服务管理层.它基于OpenResty,进行API管理,并提供了插件实现API的AOP.Kong在Mashape 管理了超过15,000 个A ...
- Apache-Flink深度解析-TableAPI
您可能感兴趣的文章合集: Flink入门 Flink DataSet&DataSteam API Flink集群部署 Flink重启策略 Flink分布式缓存 Flink重启策略 Flink中 ...
- 【EF6学习笔记】（五）数据库迁移及部署
原文地址:Code First Migrations and Deployment 原文主要讲两部分:开发环境下数据库迁移到其他数据库服务器:以及在Azure上如何部署应用: 迁移数据库 原文前面讲一 ...
- 浅谈Mybatis连接原理
众所周知数据库连接的过程,但是最近面试的人(菜面菜),都说用的SSM框架,但是我问了一下,mybatis是怎么连接上mysql的,基本上都会说:配置好的,直接用了,今天我来抛砖引玉一下,欢迎拍砖! 什 ...