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

相关阅读:
2 万字 + 20张图｜细说 Redis 九种数据类型和应用场景
G1 GC核心原理、执行流程
2022数学建模国赛降至，整理了一些很不错的在线网站分享一下
金仓数据库KingbaseES客户端编程接口指南-DCI（2. 概述）
什么是消息队列(Message Queue, MQ)？且有何用处？
网页颜色搭配表及颜色搭配技巧
信息化发展35
Springboot开发时，对前端的请求参数，后端用于接受的实体类有没有必要校验为null？
Auto.js中APP应用相关指令
深度学习入门（一）深度学习简介

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