Vue 模板

最新推荐文章于 2024-07-31 14:35:30 发布

可曾听闻我大德玛西亚

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量612

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/qq030128/article/details/129902918

版权

Vue模板语法有两大类：

1.插值语法：

功能：用于解析标签体内容。

写法：{{xxx}}, xxx是js表达式,且可以直接读取到data中的所有属性.

2.指令语法：

功能：用于解析标签（包括：标签属性，标签体内容，绑定事件·）

举例：V-blind：href：“xxx”或简写为：href=“xxx”xxx同样要写js 表达式，

且可以直接读取到data中的所有属性

备注：Vue中有很多指令，且形式都是V-???，此处我们只是拿V-blind举个例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js\v2.6.10\vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 准备容器-->
		<div id="root">
			<h1>{{Name}}今年{{age}}</h1>
			<a :href="url" target="_blank">百度</a>
		</div>
		<script>
			//创建Vue实例
			const x = new Vue({
				el:'#root',
				data:{
					Name:'小明',
					age:'22',
					url:"https://cn.bing.com/"
				}
			}) 
		</script>
	</body>
</html>