vue 02 Vue模板语法

Vue模板语法有2大类：

1.插值语法：

功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2.指令语法：

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

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>模板语法title>
		
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
					2.指令语法：
							功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
							举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，
									 且可以直接读取到data中的所有属性。
							备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

		 -->
		
		<div id="root">
			<h1>插值语法h1>
			<h3>你好，{{name}}h3>
			<hr/>
			<h1>指令语法h1>
			<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1a>
			<a :href="school.url" x="hello">点我去{{school.name}}学习2a>
		div>
	body>

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

		new Vue({
			el:'#root',
			data:{
				name:'jack',
				school:{
					name:'123',
					url:'http://www.123.com',
				}
			}
		})
	script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

相关阅读:
MybatisPlus学习
【Redis(8)】Spring Boot整合Redis和Guava，解决缓存穿透、缓存击穿、缓存雪崩等缓存问题
flutter跨端开发for Web、Windows Q&A （持续补充中）
《最新出炉》系列入门篇-Python+Playwright自动化测试-8-上下文（Context）
剖析虚幻渲染体系（17）- 实时光线追踪
Ubuntu安装MySQL 在线和离线方式
【Java多线程】必须要了解的基本概念
Springboot毕设项目公益众筹管理系统h7sur（java+VUE+Mybatis+Maven+Mysql）
科普：什么是视频监控平台？如何应用在场景中？
酌情参考——chatGPT给的一些语义框架的学术思路，语义和图谱结合似乎是个不错的方向

原文地址：https://blog.csdn.net/Rockandrollman/article/details/133045124