This post is also available in English and alternative languages.1. 模板
Vue 中的模板是一种基于 HTML 的标记语言，用于描述 Vue 组件的 UI 结构。Vue 的模板能够实现动态渲染、绑定数据以及响应用户交互。
在 Vue 的模板中，可以使用双花括号 {{}} 来插入变量，实现动态数据绑定。例如，可以使用 {{ message }} 来显示一个名为message 的变量的值。
Vue 模版语法有两大类：
插值语法
- 功能：用于解析标签体内容。
- 写法：
{{ xxx }}，xxx是 JS 表达式，可以直接读取到 data 中的所有属性。
指令语法
- 功能：用于解析标签 (包括：标签属性、标签体内容、绑定事件…)。
- 示例：
v-bind:href="xxx" 或简写为 :href="xxx"。
xxx同样是 JS 表达式。且可以直接读取到 data 中的所有属性。 - 备注：Vue 中有很多的指令，其形式都是：
v-????，此处只举 v-bind 的例子，更多指令见：Vue 内置指令。
2. 插值语法示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <html>
<head>
</head>
<body>
<div id="root">
<h1>Hello,{{name}},{{name.toUpperCase()}},{{address}}</h1>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
name: 'asdnoa',
address: 'nanjing'
}
});
</script>
</body>
</html>
|
3. 指令语法示例
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
| <html>
<head>
</head>
<body>
<div id="root">
<h1>插值语法</h1>
<h3>hello,{{name}}</h3>
<hr/>
<h1>指令语法</h1>
<a v-bind:href="url1" x="hello">点我试试-1</a>
<a :href="url1" x="hello">点我试试-2</a>
<hr/>
<h2>{{school.name.toUpperCase()}}</h2>
<a v-bind:href="school.url.toUpperCase()" x="hello">蓝翔技校</a>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
name: 'asdnoa',
url1: 'https://baidu.com',
school: {
name: '蓝翔技校',
url: 'https://baidu.com'
}
}
});
</script>
</body>
</html>
|
