使用eclipse初步认识与使用Vue.js

摘要:
模型放在el4的数据视图中。ViewModel是Vue的核心。js,这是一个Vue实例。Vue实例作用于某个HTML元素。此元素可以是HTML正文元素或具有指定ID的元素。

一.认识Vue.js

<a href="http://t.zoukankan.com/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项目

 使用eclipse初步认识与使用Vue.js第1张

2.新建一个jsp文件

 使用eclipse初步认识与使用Vue.js第2张

3.把vue.js放到Web的js目录下

 使用eclipse初步认识与使用Vue.js第3张

4.在jsp中引用vue.js

  <script src="http://t.zoukankan.com/${pageConText.request.contextPath}/js/vue.js "></script>

 使用eclipse初步认识与使用Vue.js第4张

5.创建一个view对象(DOM组件)

  注意:此view对象,可以包含n个数据,数据使用{{xxxx}}来描述

   使用eclipse初步认识与使用Vue.js第5张

6.  定义一个javascript的model

 使用eclipse初步认识与使用Vue.js第6张

7. 创建一个Vue对象(ViewModel对象)

  参数为一个json对象(包含2个参数,el,data)

 使用eclipse初步认识与使用Vue.js第7张

8.运行结果

使用eclipse初步认识与使用Vue.js第8张

9.在浏览器控制台添加数据

  用push方法添加数据

使用eclipse初步认识与使用Vue.js第9张

  运行结果:

使用eclipse初步认识与使用Vue.js第10张

 10.for each循环  v-for循环和c:forEach循环的对比

 使用eclipse初步认识与使用Vue.js第11张

免责声明:文章转载自《使用eclipse初步认识与使用Vue.js》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇【UML】工具Astah学习记录(一)类图ParallelsDesktop安装精简版系统下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

Ansible入门

自动操作和维护常识操作和维护工作系统安装物理机、虚拟机包安装、配置、服务启动批处理操作程序发布监控操作和维护级别OS配置物理机PXE、,Cobbler(选择多版本操作系统)虚拟机ImageTemplates配置木偶(ruby)saltstack(python)检查cfengine...

10 TCP限流技术

TCP流限制的原因是接收方可以完全接受消息,以确保数据安全而不会丢失。首先,窗口机制引入了发送方和接收方都有一个窗口。当发送方发送数据时,将发送落入窗口中的数据。当接收器接收到数据时,落入接收器窗口的数据将被接受。可以看出,流量会受到窗口大小II的限制。滑动窗口技术1TCP滑动窗口技术通过动态改变窗口大小来调整两台主机之间的数据传输。...

Linux cat查看文件,查找关键字(grep),统计(wc -l)

######cat搜索关键字的语法:cat file | grep keyword | wc lcat/proc/meminfo | grepSwap | wc-l#######Linux系统中wc命令的功能是统计指定文件中的字节、单词和行数,并显示和输出统计结果。如果没有给出文件名,则从标准输入中读取。wc还提供指定文件的总统计数。此标志不能与-c标志一起...

利用油猴插件实现全网VIP视频免费看

利用油猴插件实现全网VIP视频免费看第一步:首先打开谷歌应用商店搜索tampermonkey安装这个插件第二步:在百度搜索框搜索油猴可以看到以下页面,点击进入。下载谷歌上网助手解压后,将后缀为crx的文件拖入即可。之后注册一个谷歌上网助手账后登录即可进入谷歌应用商店油猴插件...

Oracle创建用户并给用户授权查询指定表或视图的权限

4)限制第三方用户连接数最后还要对NORTHBOUND用户进行连接数的限制,以免第三方无限制的连接数据库,造成数据库SESSION暴涨:conn/assysdbaaltersystemsetresource_limite=truescope=bothsid='*';新建profile,初始限制为1,用于测试。这里用户名称分别为ryd_interface_sr...

SIP 协议

SIP是会话层的信令控制协议。SIP是一种类似于HTTP的基于文本的协议。SIP可以缩短应用程序,特别是高级应用程序的开发时间。由于基于IP协议的SIP使用IP网络,固定网络运营商将逐渐意识到SIP技术对他们的深远意义。随着国际电信联盟SS7标准和ITUH 323视频协议组合标准的长期存在,SIP的工作独立于底层网络传输协议和媒体。SIP的四个基本功能是定位...