Vue学习 2模板语法

Revin050

已于 2022-07-16 10:27:29 修改

阅读量179

点赞数 1

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

于 2022-02-14 19:30:59 首次发布

本文链接：https://blog.csdn.net/qq_45847016/article/details/122930450

版权

VUE学习专栏收录该内容

24 篇文章 1 订阅

订阅专栏

Vue中的模板语法

插值语法

在Vue中，共有两大类模板语法。插值语法的功能是用于解析标签体内容。具体举例如下

	<body>
		<div id="demo">
			<h1>你好，{{name}}</h1>
		</div>
		<script type="text/javascript">
			var x=new Vue({
			el: '#demo',
			data: {
				name: 'Revin'
			}
		}
		)
		</script>
	</body>

在这个例子中可以发现，插值语法采用{{xxx}}方式进行使用，并且插值语法中的xxx使用的是js表达式，最终放在标签体内。

指令语法

插值语法用于解析标签体内容，而指令语法用于解析标签。具体举例如下

	<body>
		<div id="demo">
			<h1>你好，{{name}}</h1>
			<a v-bind:href="url">指令语法用于解析标签</a>
		</div>
		<script type="text/javascript">
			var x=new Vue({
			el: '#demo',
			data: {
				name: 'Revin',
				url:'www.Revin.com'
			}
		}
		)
		</script>
	</body>

在这个例子中可以发现，在针对标签属性的修改时，采用指令语法进行操作，以往的插值语法无法对标签进行解析。指令语法形式为v-xxx。此处以v-bind举例。
另外还需注意，与插值语法不同的是，指令语法是在"xxx"中使用，同样xxx也是js表达式。
指令语法并非只能修改标签属性，指令语法同时还可修改标签体内容、绑定事件等等。

关注博主即可阅读全文