VUE-DAY1

最新推荐文章于 2024-09-10 20:26:21 发布

Sobermwl-1210

最新推荐文章于 2024-09-10 20:26:21 发布

阅读量200

点赞数 3

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_63867965/article/details/140741769

版权

VUE 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、创建vue实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
		<div id="app">
			{{ msg }}
		</div>
		
		<script>
			const app=new Vue({
				el:'#app',
				data:{
					msg:'hello world'
				}
			})
		</script>		
	</body>
</html>

二、插值表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
		<div id="app">
			<p>{{myname}}</p>
			<p>{{myname+'你好'}}</p>
			<p>{{age>=18?'成年':'未成年'}}</p>
			<p>{{friend.desc}}</p>
		</div>
		
		<script>
			
			const app=new Vue({
				el:'#app',
				data:{
					myname:'小满',
					age:'23',
					hobby:'打篮球',
					friend:{
						hisname:'sober',
						age:'22',
						desc:'清醒'
					}
				}
				
			})

		</script>

	</body>
</html>