(二)来一点前端的介绍vue.js

本文通过三个实例介绍Vue.js的基本用法,包括显示静态文本、动态绑定提示和循环显示列表,适合初学者快速上手。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目前的技术趋势是以前后端分离的模式逐步进化,所以前端的技术也是作为程序猿们必须要了解的,也许你以后都不做前端(好吧,多学点总是没有坏处的)!
学习的网址http://www.runoob.com/vue2/vue-tutorial.html

第1个例子

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link
	href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css"
	rel="stylesheet">
<!--这里引入js库,我承认有点懒了,直接用官网的^_^-->	
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<h4>第一个例子:显示静态文本“Hello Vue”</h4>
		<p>{{ message }}
	</div>
</body>
<script language="javascript">
var app = new Vue({
	  el: '#app',  //这里引用的名称要和div中的id一致
	  data: {
	    message: 'Hello Vue!'
	  }
	});
</script>
</html>

显示效果自己测试吧

第2个例子

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link
	href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css"
	rel="stylesheet">
<!--这里引入js库,我承认有点懒了,直接用官网的^_^-->	
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app-2">
		<h4>第二个例子:显示动态绑定提示</h4><p>
		<span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息! </span>
	</div>
</body>
<script language="javascript">
var app2 = new Vue({
	  el: '#app-2',
	  data: {
	    message: '页面加载于 ' + new Date().toLocaleString()
	  }
	});
</script>
</html>

第3个例子

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link
	href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css"
	rel="stylesheet">
<!--这里引入js库,我承认有点懒了,直接用官网的^_^-->	
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app-4">
		<h4>第四个例子:循环显示</h4>
		<p>
		<ol>
			<li v-for="todo in todos">{{ todo.text }}</li>
		</ol>
	</div>
</body>
<script language="javascript">
var app4 = new Vue({
	  el: '#app-4',
	  data: {
	    todos: [
	      { text: '学习 JavaScript' },
	      { text: '学习 Vue' },
	      { text: '整个牛项目' }
	    ]
	  }
	});
</script>
</html>

好了,先说这么多,这些知识只是为了我们下一篇进阶用的基础知识,先有个简单的认识就可以了,想深入研究的可以参考上面的网站去学习

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值