-
Notifications
You must be signed in to change notification settings - Fork 0
/
模板语法.html
74 lines (71 loc) · 2.7 KB
/
模板语法.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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板语法</title>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
</head>
<style>
.red{
color: red;
}
</style>
<body>
<div id="app">
<span v-bind:class="red">message:{{msg}}</span>
<span v-once>message:{{once}}</span>
<div v-html="html"></div>
{{number}}
{{ok ? 'yes' : 'no'}}
{{msg.split(',').reverse().join('')}}
<div v-bind:id = "'list' + id">111</div>
<p v-if="ok">你看的见我</p>
{{ red | capitalize }}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello Vue!',
once: '一次性',
html: '<ul><li>1</li><li>2</li></ul>',
red: 'red',
number: 0,
id: 'id',
ok: true
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
});
vm.msg = '你好,Vue！';
vm.once = '我变了！'; //视图还是初始的值 '一次性'
//文本
//数据绑定最常见的形式就是使用‘Mustache’语法（双大括号）的文本插值
//Mustache标签将会被对应的数据对象上msg属性的值。无论msg的值怎么变化，插值出的内容都会更新
//纯HTML
//双大括号会将数据解析成纯文本，而非HTML。为了能输出HTML，我们得使用v-html指令
//被插入的值会被当做HTML，数据绑定会被忽略掉的
//注意：站点上动态渲染html是非常危险的，因为很容易被XSS攻击，请给可信任内容提供插值，切勿为用户提供内容插值
//属性
//Mustache不能在HTML属性中去使用，应该使用v-bind
//使用javascript表达式
//模板中也是支持javascript表达式的
//注意：模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。
//指令
//指令（Directive）是带有V-前缀的特殊属性。
//指令的职责就是当表达式的值改变时相应的将某些行为应用到DOM上
//参数
//一些指令可以接受一个参数，在指令后一冒号指明
//修饰符
//修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
//过滤器
//Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化
//过滤器可以用在两个地方：mustache 插值和 v-bind 表达式
</script>
</body>
</html>