今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例:

<html>
<head>
<title>$Title$</title>
  //<script src="https://unpkg.com/vue"></script>//这是导入vue.js源码的一种方式,前提条件是在有网络的情况下。
<script src="${pageContext.request.contextPath}/js/vue.js"></script>//这种方式是先把vue.js源文件下载下来,放到项目的js目录下在通过路径的查找。
  
</head>
<body>
<div id="div1">
{{userName}}
{{age}}
</div>
<script type="text/javascript"> var myModel = {userName:"陈杜",age:20} ;
var myViewModel = new Vue({ el: "#div1",
data:myModel
}) ;
console.log(myViewModel.age) ; </script>
</body> </html> 运行后效果图:


下面这个是对于多个数据的一个处理:
<html>
<head>
<title>$Title$</title>
//<script src="https://unpkg.com/vue"></script>//这是导入vue.js源码的一种方式,前提条件是在有网络的情况下。
<script src="${pageContext.request.contextPath}/js/vue.js"></script>//这种方式是先把vue.js源文件下载下来,放到项目的js目录下在通过路径的查找。
</head>
<body>
<div id="view">
<ol>
<li v-for="student in studentList">{{student.userName}}</li>//这里相当于for循环 </ol> </div> <script type="text/javascript">
var myModel = {studentList:[{userName:"小花"},{userName:"小刘"},{userName:"微微"}] };//把多个数据存放在数组里
var myModelView = new Vue({ el:"#view",//根据页面内容的ID选择
data:myModel//数据
}) ;
// console.log(myModelView.sex) ;
</script>
</body> </html>

运行后效果图:

												

vue.js的学习中的简单案例的更多相关文章

  1. vue.js 初步学习

    跟着b站上的视频来学 首先什么是vue.js? 跟着b站上视频来学:(o゚v゚)ノ <!DOCTYPE html> <html lang="en"> < ...

  2. 坑!vue.js在ios9中失效

    坑!vue.js在ios9中失效! 接到实现,在移动端生成一个分享链接,分享到微信,在微信中打开,加入! 好,用vue实现----------------------->写代码--------- ...

  3. vue.js 2.0实现的简单分页

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  4. Vue.js实战学习笔记(中)

    1.递归组件给组件设置name属性,组件就可以在它的模板内调用自己,但必须给一个条件来限制递归数量.<div id="app"> <child-component ...

  5. 从零开始学习Vue.js,学习笔记

    一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...

  6. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  7. Vue.JS入门学习随笔

    PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!!   Vue.js(读音 /vjuː/, 类似于view ...

  8. 两万字Vue.js基础学习笔记(二)

    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...

  9. Vue.js组件学习

    组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...

随机推荐

  1. [译]ASP.NET Core 2.0 中间件

    问题 如何创建一个最简单的ASP.NET Core中间件? 答案 使用VS创建一个ASP.NET Core 2.0的空项目,注意Startup.cs中的Configure()方法: public vo ...

  2. ThreadPoolExecutor系列<一、ThreadPoolExecutor 机制>

    本文系作者原创,转载请注明出处:http://www.cnblogs.com/further-further-further/p/7681529.html 解决问题: 1. 处理大量异步任务时能减少每 ...

  3. Tomcat 笔记-设置虚拟主机

    通过作用虚拟主机,可以使多个不同域名的网站共存于一个Tomcat中 在tomcat的server.xml文件中添加主机名: <Host name="hostname" app ...

  4. springCloud四:熔断器ribbon--Hystrix

    注:前文概念部分摘抄自博客园  纯洁的微笑 熔断器 雪崩效应 在微服务架构中通常会有多个服务层调用,基础服务的故障可能会导致级联故障,进而造成整个系统不可用的情况,这种现象被称为服务雪崩效应.服务雪崩 ...

  5. LeetCode 40. Combination Sum II (组合的和之二)

    Given a collection of candidate numbers (C) and a target number (T), find all unique combinations in ...

  6. 顺序线性表 ---- ArrayList 源码解析及实现原理分析

    原创播客,如需转载请注明出处.原文地址:http://www.cnblogs.com/crawl/p/7738888.html ------------------------------------ ...

  7. 进程,线程,GIL,Python多线程,生产者消费者模型都是什么鬼

    1. 操作系统基本知识,进程,线程 CPU是计算机的核心,承担了所有的计算任务: 操作系统是计算机的管理者,它负责任务的调度.资源的分配和管理,统领整个计算机硬件:那么操作系统是如何进行任务调度的呢? ...

  8. EJBCA安装教程+postgresql+wildfly10

    1. 安装环境说明 笔者在本机的虚拟机下进行的安装,数据库已经装好了的. ubuntu16.04 x64 postgresql:9 wildfly10 2. 安装前准备 下载必要软件包(直接到官网下载 ...

  9. T9

    T9 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission ...

  10. linux dig 命令

    dig 命令主要用来从 DNS 域名服务器查询主机地址信息. 查询单个域名的 DNS 信息 dig 命令最典型的用法就是查询单个主机的信息. $ dig baidu.com dig 命令默认的输出信息 ...