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>
运行后效果图:
vue.js的学习中的简单案例的更多相关文章
- vue.js 初步学习
跟着b站上的视频来学 首先什么是vue.js? 跟着b站上视频来学:(o゚v゚)ノ <!DOCTYPE html> <html lang="en"> < ...
- 坑!vue.js在ios9中失效
坑!vue.js在ios9中失效! 接到实现,在移动端生成一个分享链接,分享到微信,在微信中打开,加入! 好,用vue实现----------------------->写代码--------- ...
- vue.js 2.0实现的简单分页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- Vue.js实战学习笔记(中)
1.递归组件给组件设置name属性,组件就可以在它的模板内调用自己,但必须给一个条件来限制递归数量.<div id="app"> <child-component ...
- 从零开始学习Vue.js,学习笔记
一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- Vue.JS入门学习随笔
PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!! Vue.js(读音 /vjuː/, 类似于view ...
- 两万字Vue.js基础学习笔记(二)
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
- Vue.js组件学习
组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...
随机推荐
- Linux入门(10)——Ubuntu16.04使用pip3和pip安装numpy,scipy,matplotlib等第三方库
安装Python3第三方库numpy,scipy,matplotlib: sudo apt install python3-pip pip3 install numpy pip3 install sc ...
- [ACdream]小晴天老师系列——竖式乘
题目链接:http://acdream.info/contest?cid=1269#problem-C Problem Description 小晴天是ACdream团队中最牛的老师之一,他最擅长数学 ...
- 为什么C++没有对应realloc的new操作符呢?
http://blog.csdn.net/rabbit729/article/details/3400260 这个用memcpy明显是有问题的.如果类有资源分配的话,直接memcpy不能复制资源,会导 ...
- myeclipse10破解失败,正解
此文图借用他人的,很是经典 第一步:输入任意用户名 第二步:点击Systemid... 按钮,自动生成本机器的systemid.ps:确定本机的systemid,如果和破解器生成不一致,需要copy本 ...
- MQTT——连接报文
学习MQTT协议.如果只是看了相关文档就认为可以了.那是一个错误的观念.笔者为了能更好的去理解MQTT协议.看了不少相关的开源Broker的项目.可惜这些项目一般都是不完全的.不过从这些项目中笔者至少 ...
- 删除链表中等于给定值val的所有节点。
样例 给出链表 1->2->3->3->4->5->3, 和 val = 3, 你需要返回删除3之后的链表:1->2->4->5. /** * D ...
- Problem W
Problem Description Speakless很早就想出国,现在他已经考完了所有需要的考试,准备了所有要准备的材料,于是,便需要去申请学校了.要申请国外的任何大学,你都要交纳一定的申请费用 ...
- XML学习笔记之XML的简介
最近,自学了一段时间xml,希望通过学习笔记的整理能够巩固一下知识点,也希望把知识分享给你们(描红字段为重点): XML(extensible Markup language):可扩展的标记语言,解决 ...
- Python中编码问题:u'\xe6\x97\xa0\xe5\x90\x8d' 类型的转为utf-8的解决办法
相信小伙伴们遇到过类似这样的问题,python2中各种头疼的转码,类似u'\xe6\x97\xa0\xe5\x90\x8d' 的编码,直接s.decode()是无法解决编码问题.尝试了无数办法,都无法 ...
- WPF TextBox按字节长度限制输入
前两天做一个项目的时候,由于页面没有限制TextBox的输入长度,所以,后台直接报错了,超出数据库最大的长度. 数据库的长度是按照字节来计算的,而且不同的编码格式,汉字占用的字节长度又不相同,比如,我 ...