Vue模板语法

最新推荐文章于 2024-07-06 16:47:02 发布

安全天天学

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量148

点赞数 1

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

本文链接：https://blog.csdn.net/qq_53568983/article/details/128252842

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue模板语法

前言
一、插值语法
二、指令语法
总结

前言

什么是模板语法，可以这样理解，模板就是一套固定的东西，如下所示：(注意引入的JS要包含固定的文件，可以使用<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>，代替如下的JS)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>模板语法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1>插值语法</h1>
			<h3>你好，{{name}}</h3>
			<hr/>
			<h1>指令语法</h1>
			<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
			<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'jack',
				school:{
					name:'tom',
					url:' 123',
				}
			}
		})
	</script>
	
</html>

上面的HTML就是固定的东西，不会改变，而下面的js代码，也可以叫做Vue代码是变化的，就是会动态的改变html中的内容，这就是模板语法。

一、插值语法

功能：用于解析标签体内容。，就是把html标签中的类容动态的改变，如：<h1>{{name}}</h1>动态的改变name的值
写法与实列：
{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
			<h1>插值语法</h1>
			<h3>你好，{{name}}</h3>
			<hr/>
		</div>
	 

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'jack',
				 
			}
		})
	</script>
</body>
</html>

二、指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
举例：v-bind:href=“xxx” 或简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子。

可以理解为标签内的指令，就是作用于属性那一块的指令

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
			<h1>插值语法</h1>
			<h3>你好，{{name}}</h3>
			<hr/>
			<h1>指令语法</h1>
			<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
			<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'jack',
				school:{
					name:'尚硅谷',
					url:'http://www.atguigu.com',
				}
			}
		})
	</script>
</body>
</html>

总结

Vue.js是作用于html的语法，让html动态的变化

安全天天学

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue模板语法

(注意引入的JS要包含固定的文件，可以使用，代替如下的JS)DOCTYPE html > < html > < head > < meta charset = " UTF-8 " /> < title > 模板语法
复制链接

扫一扫