使用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百度百科
随机推荐
- java数据结构面试问题—快慢指针问题
上次我们学习了环形链表的数据结构,那么接下来我们来一起看看下面的问题, 判断一个单向链表是否是环形链表? 看到这个问题,有人就提出了进行遍历链表,记住第一元素,当我们遍历后元素再次出现则是说明是环形链 ...
- 脑残式网络编程入门(六)：什么是公网IP和内网IP？NAT转换又是什么鬼？
本文引用了“帅地”发表于公众号苦逼的码农的技术分享. 1.引言 搞网络通信应用开发的程序员,可能会经常听到外网IP(即互联网IP地址)和内网IP(即局域网IP地址),但他们的区别是什么?又有什么关系呢 ...
- H5新增属性contenteditable（不用JS，实现div模拟textarea高度自增长）
无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...
- 应用监控CAT之cat-home源码阅读（三）
上两章从点到点讲了,cat-client 到 cat-consumer 的请求处理过程,但是怎么样让我们监控给人看到呢?那么就需要一个展示的后台了,也就是本章要讲的 cat-home 模块 ! 带 ...
- 页面怎么引用外部css+js代码
外部css样式:把css样式写到一个文件内,方便使用,减少冗余. 如果使用的是外部css样式,页面怎么引用: 使用 <link rel="stylesheet" type=& ...
- 埃航和737MAX坠毁：软件优先级问题
事件背景: 2019年3月10日,埃塞俄比亚航空公司一架波音737MAX8飞机发生坠机,机上157人全部遇难,包括8名中国公民.这是继去年10月29日印尼狮航空难事故之后,波音737MAX8飞机在五个 ...
- @vue/cl构建得项目下，postcss.config.js配置，将px转化成rem
依赖包: postcss-pxtorem 配置: 在项目根目录下创建 postcss.config.js 配置如下: module.exports = () => ({ plugins: [ r ...
- python之获取当前操作系统(平台)
Python在不同环境平台使用时,需要判断当前是什么系统,比如常用的windows,linux等 下面介绍一些能够获取当前系统的命令 1.使用sys.platform获取 #!/usr/bin/env ...
- tensorflow 1.0 学习：池化层（pooling)和全连接层(dense)
池化层定义在 tensorflow/python/layers/pooling.py. 有最大值池化和均值池化. 1.tf.layers.max_pooling2d max_pooling2d( in ...
- 全网最详细的一个超级好用的命令行工具【Cmder】的安装之后的一些配置（图文详解）
不多说,直接上干货! 1.修改命令提示符λ为$ 首先,我们看到 进入解压后的cmder的目录,进入vendor,打开init.bat文件. 修改第15行的代码 @prompt $E[;;40m$P$S ...