-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplateSyntax.html
120 lines (118 loc) · 4.69 KB
/
templateSyntax.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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Template Syntax</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>Interpolations</h1>
<pre>
var app = new Vue({
el: '#app' ,
data: {
msg: '< b>這是被{{msg}}取代的結果< /b>',
}
})
</pre>
<div id="app">
<h2>text</h2>
<pre>{ { msg } }</pre>
<p>Message: {{ msg }}</p>
<h2>raw html</h2>
<pre>< p v-html="msg">< /p ></pre>
<p v-html="msg"></p>
<h2>Attributes</h2>
<pre>< p v-bind:html element attribute="msg">mouse stop here< /p ></pre>
<p v-bind:title="msg">mouse stop here</p>
<h2>Using JavaScript Expressions</h2>
<pre>{ { javascript expressions } }</pre>
<p>{{ msg + msg }}</p>
<p>{{ msg ? 'YES' : 'NO' }}</p>
<p>{{ msg.split('').reverse().join('') }}</p>
<pre>< div v-bind:attribute="javascript expressions">123456</ div ></pre>
<div v-bind:id="'list-' + msg">123456</div>
<h2>Directives</h2>
<pre>< span v-if="key">現在你看到我了</ span > // if key == true, show it</pre>
<input type="checkbox" v-model:checked="seen"><span v-if="seen">現在你看到我了</span>
<h2>Arguments</h2>
<p>和上面一樣</p>
<pre>< a v-bind:html element attribute="key">mouse stop here< /a ></pre>
<a v-bind:href="url">abc</a>
<pre>< a v-on:js event="function name">mouse stop here< /a ></pre>
<a v-on:click="onSubmit">click me</a>
<h2>Modifiers</h2>
<pre>< form v-on:submit.prevent="onSubmit"></ form > //取消預設行為</pre>
<form v-on:submit.prevent="onSubmit"><input type="submit"></form>
<h2>Filters</h2>
<p>Filters are usable in two places:</p>
<ol>
<li>mustache interpolations. <pre>{ { } }</pre></li>
<li>v-bind expressions. <pre>< a v-bind:attribute="key"> < /a ></pre> </li>
</ol>
<p><code>capitalize</code>過濾器函數將會收到<code>message</code>的值作為第一個參數。</p>
<pre>{ { key of data | key of filter } }</pre>
<p>{{ msg | capitalize }}</p>
<pre>< a v-bind:title="url | capitalize"> { { msg | capitalize } }< /a ></pre>
<p>
<a v-bind:title="url | capitalize"> {{ msg | capitalize }}</a>
</p>
<p>
<a v-bind:title="url | getFirst"> {{ msg | getFirst }}</a>
</p>
<h2>縮寫</h2>
<h3><code>v-bind</code></h3>
<pre>< !-- 完整語法-- >
< a v-bind:href = "url" > </ a >
< !-- 縮寫-- >
< a :href = "url" > </ a ></pre>
<h3><code>v-on</code></h3>
<pre>< !-- 完整語法-- >
< a v-on:click = "doSomething" ></ a >
< !-- 縮寫-- >
< a @ click = "doSomething" ></ a ></pre>
<h2>同場加映</h2>
<b>另外試一下的<code>v-for</code></b>
<p v-for="item in items">{{item.text}}</p>
</div>
<b><code>template</code></b>
<p><code>< template ></code> 通常拿來當做包裝元素。渲染不會包含 <code>< template ></code>。<br />官網在<code>v-if</code>時會再介紹一下</p>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app' ,
data: {
msg: '<b>這是被{{msg}}取代的結果</b>',
seen: true,
url: 'https://dwatow.github.io/',
items: [
{text: 'a'},
{text: 'b'},
{text: 'c'},
{text: 'd'},
]
},
methods: {
onSubmit: function () {
console.log('submit');
}
},
filters: {
capitalize : function ( value ) {
console.log(value);
if (!value) return ''
value = value.toString()
return value.toUpperCase()
},
getFirst: function ( value ) {
console.log(value);
if (!value) return ''
return value.split("").shift();
}
}
})
</script>
</body>
</html>