今天学习了近年来挺火的一门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. 
						
  2. 坑！vue.js在ios9中失效
		
    坑!vue.js在ios9中失效! 接到实现,在移动端生成一个分享链接,分享到微信,在微信中打开,加入! 好,用vue实现----------------------->写代码--------- ...
    
		
    3. 
						
  3. vue.js 2.0实现的简单分页
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
    
		
    4. 
						
  4. Vue.js实战学习笔记（中）
		
    1.递归组件给组件设置name属性,组件就可以在它的模板内调用自己,但必须给一个条件来限制递归数量.<div id="app"> <child-component ...
    
		
    5. 
						
  5. 从零开始学习Vue.js，学习笔记
		
    一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...
    
		
    6. 
						
  6. 两万字Vue.js基础学习笔记
		
    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
    
		
    7. 
						
  7. Vue.JS入门学习随笔
		
    PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!!   Vue.js(读音 /vjuː/, 类似于view ...
    
		
    8. 
						
  8. 两万字Vue.js基础学习笔记（二）
		
    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
    
		
    9. 
						
  9. Vue.js组件学习
		
    组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. centos安装openoffice服务
			
    第一步:yum install openoffice.org-brand openoffice.org-core openoffice.org-java-common xvfb openoffice. ...
    
			
    2. 
						
  2. 【转】漫谈linux文件IO--io流程讲的很清楚
			
    [转]漫谈linux文件IO--io流程讲的很清楚 这篇文章写的比较全面,也浅显易懂,备份下.转载自:http://blog.chinaunix.net/uid-27105712-id-3270102 ...
    
			
    3. 
						
  3. Linux系列教程（四）——Linux文件和目录处理命令
			
    这个系列教程的前面我们讲解了如何安装Linux系统,以及学习Linux系统的一些方法.那么从这篇博客开始,我们就正式进入Linux命令的学习.学习命令,首先要跟大家纠正的一点就是,我们不需要记住每一条 ...
    
			
    4. 
						
  4. JAVA基础知识总结：一
			
    一.软件开发的常识 1.什么是软件? 一系列按照特定顺序组织起来的计算机数据或者指令 常见的软件: 系统软件:Windows\Mac OS \Linux 应用软件:QQ,一系列的播放器(爱奇艺,乐视, ...
    
			
    5. 
						
  5. git 初步
			
    git command help file:///D:/Git/mingw64/share/doc/git-doc/git-config.html git 版本控制管理 之前并没有接触过git方面的知 ...
    
			
    6. 
						
  6. 日志管理之 Docker logs - 每天5分钟玩转 Docker 容器技术（87）
			
    高效的监控和日志管理对保持生产系统持续稳定地运行以及排查问题至关重要. 在微服务架构中,由于容器的数量众多以及快速变化的特性使得记录日志和监控变得越来越重要.考虑到容器短暂和不固定的生命周期,当我们需 ...
    
			
    7. 
						
  7. Leetcode题解（五）
			
    17.Letter Combinations of a Phone Number 题目 针对输入的数字串,每一个数字都对应对个字符可以选择.因此可以直接采用递归的思想,依次遍历数字串的每一个数字,处理 ...
    
			
    8. 
						
  8. dp百题大过关(第一场)
			
    好吧,这名字真是让我想起了某段被某教科书支配的历史.....各种DP题层出不穷,不过终于做完了orz 虽然各种手糊加乱搞,但还是要总结一下. T1 Monkey Banana Problem    这 ...
    
			
    9. 
						
  9. 0_Simple__clock + 0_Simple__clock_nvrtc
			
    使用 clock() 函数在CUDA核函数内部进行计时,将核函数封装为PTX并在另外的代码中读取和使用. ▶ 源代码:文件内建核函数计时. #include <stdio.h> #incl ...
    
			
    10. 
						
  10. HTML5  设备上的API
			
    一.Vibration API ,接受两种类型参数 vibrate (unsigned long time)   当参数是unsigned long的时候 此时参数表示震动时间.  NotSuppor ...
    
			
    11.