正文
vue.js的学习中的简单案例
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
今天学习了近年来挺火的一门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>
运行后效果图：
