2. 模板语法

最新推荐文章于 2024-11-13 11:52:56 发布

bestwangyulu

最新推荐文章于 2024-11-13 11:52:56 发布

阅读量392

点赞数 7

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Y_L_Wang/article/details/134849509

版权

Vue学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue 将管理的DOM称为模板，在配置对象的data 中封装数据，通过模板语法将数据嵌入到模板中。
模板语法包括插值语法和指令语法。

插值语法

在标签体中通过往{{}}中放入data 对象中的属性名实现插值。

	<body>
		<div id="app">
		<!-- Vue在解析到{{}}时会认为这是一个插值表达式  -->
		{{msg}}
		</div>
		<script>
			const vm = new Vue({
				el:"#app",
				data:{
					msg:"hello vue"
				}
				
			})
		</script>
	</body>

{{}} 内可以写js 表达式，将执行结果渲染到DOM上。

指令语法

指令语法主要用于将Vue 管理的数据动态绑定到标签的属性值上。

<div id="app">
		<a v-bind:href="baiduUrl">{{baidu}}</a>
		</div>
		<script>
			const vm = new Vue({
				el:"#app",
				data:{
					baidu:"百度",
					baiduUrl:"http://www.baidu.com"
				}
			})
		</script>