今天学习了近年来挺火的一门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. wordpress 显示数学公式 (MathJax-LaTeX)
			
    blog 不放一堆数学公式怎么能显得高大上,所以 MathJax-LaTeX 也是必装的插件之一了. 一.安装 MathJax-LaTex 插件 直接在 wordpress 插件中,搜索并安装 Mat ...
    
			
    2. 
						
  2. C++内联函数(03)
			
    在C++中我们通常定义以下函数来求两个整数的最大值: 代码如下: int max(int a, int b){ return a > b ? a : b;} 为这么一个小的操作定义一个函数的好处 ...
    
			
    3. 
						
  3. ASP.NET Core中的OWASP Top 10 十大风险-SQL注入
			
    不定时更新翻译系列,此系列更新毫无时间规律,文笔菜翻译菜求各位看官老爷们轻喷,如觉得我翻译有问题请挪步原博客地址 本博文翻译自: https://dotnetcoretutorials.com/201 ...
    
			
    4. 
						
  4. 使用缓存Memcache存储access_token
			
    接上篇文本,千辛万苦终于拿到了access_token. 正常情况下access_token有效期为7200秒,重复获取将导致上次获取的access_token失效.目前,获取access_token ...
    
			
    5. 
						
  5. 你真的懂offset与scroll吗？
			
    背景 身为一个前端工程师,每次在做关于滚动或者定位之类的交互时,或多或少都会用到offset.scroll之类的元素属性值来计算距离,但是每次都是现用现百度,从来没有真正系统地弄明白其中的原理及用法: ...
    
			
    6. 
						
  6. 原生JS实现Ajax及Ajax的跨域请求
			
      前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...
    
			
    7. 
						
  7. 最长回文子串---Manacher算法
			
    百度:Manacher算法 代码 #include <iostream> #include <string> #include <cstring> #include ...
    
			
    8. 
						
  8. D - MUH and Cube Walls
			
    D. MUH and Cube Walls   Polar bears Menshykov and Uslada from the zoo of St. Petersburg and elephant ...
    
			
    9. 
						
  9. 软硬链接、文件删除原理、linux中的三种时间、chkconfig优化
			
    第1章 软硬链接 1.1 硬链接 1.1.1 含义 多个文件拥有相同的inode号码 硬链接即文件的多个入口 1.1.2 作用 防止你误删除文件 1.1.3 如何创建硬链接 ln 命令,前面是源文件  ...
    
			
    10. 
						
  10. 有关CUBLAS中的矩阵乘法函数
			
    关于cuBLAS库中矩阵乘法相关的函数及其输入输出进行详细讨论. ▶ 涨姿势: ● cuBLAS中能用于运算矩阵乘法的函数有4个,分别是 cublasSgemm(单精度实数).cublasDgemm( ...
    
			
    11.