|
1 | 1 | <div id="hero">
|
2 |
| - <div class="inner"> |
3 |
| - <ul id="nav"> |
4 |
| - <li><a href="/guide/" class="nav-link">Guide</a></li> |
5 |
| - <li><a href="/api/" class="nav-link">API</a></li> |
6 |
| - <li><a href="/examples/" class="nav-link">Examples</a></li> |
7 |
| - <li><a href="https://github.com/yyx990803/vue" class="nav-link" target="_blank">GitHub</a></li> |
8 |
| - <li><a href="http://forum.vuejs.org" class="nav-link" target="_blank">Forum</a></li> |
9 |
| - <li><a href="https://gitter.im/yyx990803/vue" class="nav-link" target="_blank">Chat</a></li> |
10 |
| - </ul> |
11 |
| - <ul id="translations"> |
12 |
| - <li><a href="http://cn.vuejs.org" class="nav-link">中文</a></li> |
13 |
| - <li class="delimiter">|</li> |
14 |
| - <li><a href="http://jp.vuejs.org" class="nav-link">日本語</a></li> |
15 |
| - </ul> |
16 |
| - <img id="logo" src="/images/logo.png"> |
17 |
| - <h1>Vue.js</h1> |
18 |
| - <p class="desc">Reactive Components for Modern Web Interfaces</p> |
19 |
| - <p class="buttons"> |
20 |
| - <a href="/guide/installation.html" class="button">Install v<%- theme.vue_version %></a> |
21 |
| - </p> |
22 |
| - <ul id="social"> |
23 |
| - <li><a href="https://twitter.com/vuejs" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @vuejs</a></li> |
24 |
| - <li><iframe src="http://ghbtns.com/github-btn.html?user=yyx990803&repo=vue&type=watch&count=true" |
25 |
| - allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe></li> |
26 |
| - </ul> |
27 |
| - </div> |
28 |
| - <div class="down"><img src="/images/down.png"></div> |
| 2 | + <div class="inner"> |
| 3 | + <ul id="nav"> |
| 4 | + <li><a href="/guide/" class="nav-link">Guide</a></li> |
| 5 | + <li><a href="/api/" class="nav-link">API</a></li> |
| 6 | + <li><a href="/examples/" class="nav-link">Examples</a></li> |
| 7 | + <li><a href="https://github.com/yyx990803/vue" class="nav-link" target="_blank">GitHub</a></li> |
| 8 | + <li><a href="http://forum.vuejs.org" class="nav-link" target="_blank">Forum</a></li> |
| 9 | + <li><a href="https://gitter.im/yyx990803/vue" class="nav-link" target="_blank">Chat</a></li> |
| 10 | + </ul> |
| 11 | + <ul id="translations"> |
| 12 | + <li><a href="http://cn.vuejs.org" class="nav-link">中文</a></li> |
| 13 | + <li class="delimiter">|</li> |
| 14 | + <li><a href="http://jp.vuejs.org" class="nav-link">日本語</a></li> |
| 15 | + </ul> |
| 16 | + <img id="logo" src="/images/logo.png"> |
| 17 | + <h1>Vue.js</h1> |
| 18 | + <p class="desc">Reactive Components for Modern Web Interfaces</p> |
| 19 | + <p class="buttons"> |
| 20 | + <a href="/guide/installation.html" class="button">Install v<%- theme.vue_version %></a> |
| 21 | + </p> |
| 22 | + <ul id="social"> |
| 23 | + <li><a href="https://twitter.com/vuejs" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @vuejs</a></li> |
| 24 | + <li><iframe src="http://ghbtns.com/github-btn.html?user=yyx990803&repo=vue&type=watch&count=true" |
| 25 | + allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe></li> |
| 26 | + </ul> |
| 27 | + </div> |
| 28 | + <div class="down"><img src="/images/down.png"></div> |
29 | 29 | </div>
|
30 | 30 |
|
31 | 31 | <div id="example">
|
32 |
| - <h2>10 Second Example</h2> |
33 |
| - <div class="block"> |
34 |
| - <figure class="highlight lang-html"><table><tbody><tr><td class="gutter"><pre>1 |
| 32 | + <h2>10 Second Example</h2> |
| 33 | + <div class="block"> |
| 34 | + <figure class="highlight lang-html"><table><tbody><tr><td class="gutter"><pre>1 |
35 | 35 | 2
|
36 | 36 | 3
|
37 | 37 | 4
|
38 | 38 | </pre></td><td class="code"><pre><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"demo"</span>></span>
|
39 |
| - <span class="tag"><<span class="title">p</span>></span>{{message}}<span class="tag"></<span class="title">p</span>></span> |
40 |
| - <span class="tag"><<span class="title">input</span> <span class="attribute">v-model</span>=<span class="value">"message"</span>></span> |
| 39 | + <span class="tag"><<span class="title">p</span>></span>{{message}}<span class="tag"></<span class="title">p</span>></span> |
| 40 | + <span class="tag"><<span class="title">input</span> <span class="attribute">v-model</span>=<span class="value">"message"</span>></span> |
41 | 41 | <span class="tag"></<span class="title">div</span>></span>
|
42 | 42 | </pre></td></tr></tbody></table></figure>
|
43 |
| - </div> |
| 43 | + </div> |
44 | 44 |
|
45 |
| - <div class="sign">+</div> |
| 45 | + <div class="sign">+</div> |
46 | 46 |
|
47 |
| - <div class="block"> |
48 |
| - <figure class="highlight lang-js"><table><tbody><tr><td class="gutter"><pre>1 |
| 47 | + <div class="block"> |
| 48 | + <figure class="highlight lang-js"><table><tbody><tr><td class="gutter"><pre>1 |
49 | 49 | 2
|
50 | 50 | 3
|
51 | 51 | 4
|
52 | 52 | 5
|
53 | 53 | 6
|
54 | 54 | </pre></td><td class="code"><pre><span class="keyword">var</span> demo = <span class="keyword">new</span> Vue({
|
55 |
| - el: <span class="string">'#demo'</span>, |
56 |
| - data: { |
57 |
| - message: <span class="string">'Hello Vue.js!'</span> |
58 |
| - } |
| 55 | + el: <span class="string">'#demo'</span>, |
| 56 | + data: { |
| 57 | + message: <span class="string">'Hello Vue.js!'</span> |
| 58 | + } |
59 | 59 | })
|
60 | 60 | </pre></td></tr></tbody></table></figure>
|
61 |
| - </div> |
| 61 | + </div> |
62 | 62 |
|
63 |
| - <div class="sign">=</div> |
| 63 | + <div class="sign">=</div> |
64 | 64 |
|
65 |
| - <div class="block result"> |
66 |
| - <div id="demo"> |
67 |
| - <p>{{message}}</p> |
68 |
| - <input v-model="message"> |
69 |
| - </div> |
70 |
| - <script> |
71 |
| - var demo = new Vue({ |
72 |
| - el: '#demo', |
73 |
| - data: { |
74 |
| - message: 'Hello Vue.js!' |
75 |
| - } |
76 |
| - }) |
77 |
| - </script> |
| 65 | + <div class="block result"> |
| 66 | + <div id="demo"> |
| 67 | + <p>{{message}}</p> |
| 68 | + <input v-model="message"> |
78 | 69 | </div>
|
| 70 | + <script> |
| 71 | + var demo = new Vue({ |
| 72 | + el: '#demo', |
| 73 | + data: { |
| 74 | + message: 'Hello Vue.js!' |
| 75 | + } |
| 76 | + }) |
| 77 | + </script> |
| 78 | + </div> |
79 | 79 | </div>
|
80 | 80 | <div id="features">
|
81 |
| - <div class="feats"> |
82 |
| - <div class="feat"> |
83 |
| - <h2><span class="icon simple"></span>Simple</h2> |
84 |
| - <p>Write some HTML, grab some JSON, create a Vue instance, that's it.</p> |
85 |
| - </div> |
86 |
| - <div class="feat"> |
87 |
| - <h2><span class="icon powerful"></span>Reactive</h2> |
88 |
| - <p>Expressions & computed properties with transparent dependency tracking.</p> |
89 |
| - </div> |
90 |
| - <div class="feat"> |
91 |
| - <h2><span class="icon composable"></span>Components</h2> |
92 |
| - <p>Compose your application with decoupled, reusable components.</p> |
93 |
| - </div> |
94 |
| - <div class="feat"> |
95 |
| - <h2><span class="icon compact"></span>Compact</h2> |
96 |
| - <p>~23kb min+gzip, no dependency.</p> |
97 |
| - </div> |
98 |
| - <div class="feat"> |
99 |
| - <h2><span class="icon fast"></span>Fast</h2> |
100 |
| - <p>Precise and efficient async batch DOM updates.</p> |
101 |
| - </div> |
102 |
| - <div class="feat"> |
103 |
| - <h2><span class="icon module"></span>Package Ready</h2> |
104 |
| - <p>Install via NPM or Bower - leverage your favorite eco system!</p> |
105 |
| - </div> |
| 81 | + <div class="feats"> |
| 82 | + <div class="feat"> |
| 83 | + <h2><span class="icon simple"></span>Simple</h2> |
| 84 | + <p>Write some HTML, grab some JSON, create a Vue instance, that's it.</p> |
| 85 | + </div> |
| 86 | + <div class="feat"> |
| 87 | + <h2><span class="icon powerful"></span>Reactive</h2> |
| 88 | + <p>Expressions & computed properties with transparent dependency tracking.</p> |
106 | 89 | </div>
|
| 90 | + <div class="feat"> |
| 91 | + <h2><span class="icon composable"></span>Components</h2> |
| 92 | + <p>Compose your application with decoupled, reusable components.</p> |
| 93 | + </div> |
| 94 | + <div class="feat"> |
| 95 | + <h2><span class="icon compact"></span>Compact</h2> |
| 96 | + <p>~23kb min+gzip, no dependency.</p> |
| 97 | + </div> |
| 98 | + <div class="feat"> |
| 99 | + <h2><span class="icon fast"></span>Fast</h2> |
| 100 | + <p>Precise and efficient async batch DOM updates.</p> |
| 101 | + </div> |
| 102 | + <div class="feat"> |
| 103 | + <h2><span class="icon module"></span>Package Ready</h2> |
| 104 | + <p>Install via NPM or Bower - leverage your favorite eco system!</p> |
| 105 | + </div> |
| 106 | + </div> |
107 | 107 | </div>
|
108 | 108 | <div id="why">
|
109 |
| - <h2>You should try it out if you like:</h2> |
110 |
| - <ul> |
111 |
| - <li>Extendable Data bindings</li> |
112 |
| - <li>Plain JS object models</li> |
113 |
| - <li>API that simply makes sense</li> |
114 |
| - <li>Build UI by composing components</li> |
115 |
| - <li>Mix & matching small libraries</li> |
116 |
| - </ul> |
| 109 | + <h2>You should try it out if you like:</h2> |
| 110 | + <ul> |
| 111 | + <li>Extendable Data bindings</li> |
| 112 | + <li>Plain JS object models</li> |
| 113 | + <li>API that simply makes sense</li> |
| 114 | + <li>Build UI by composing components</li> |
| 115 | + <li>Mix & matching small libraries</li> |
| 116 | + </ul> |
117 | 117 | </div>
|
118 | 118 | <div id="footer">
|
119 |
| - <a class="start" href="/guide/index.html">Get Started</a> |
120 |
| - <p>Released under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT License</a></p> |
121 |
| - <p>Copyright (c) <%- date(Date.now(), 'YYYY') %> <a href="http://evanyou.me" target="_blank">Evan You</a></p> |
| 119 | + <a class="start" href="/guide/index.html">Get Started</a> |
| 120 | + <p>Released under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT License</a></p> |
| 121 | + <p>Copyright (c) <%- date(Date.now(), 'YYYY') %> <a href="http://evanyou.me" target="_blank">Evan You</a></p> |
122 | 122 | </div>
|
123 | 123 |
|
124 | 124 | <!-- Twitter follow button script -->
|
125 | 125 | <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
| 126 | + |
| 127 | +<script> |
| 128 | +// Temporarily block translation links until they are done |
| 129 | +// for 1.0 updates. |
| 130 | +[].forEach.call(document.querySelectorAll('#translations .nav-link'), function (link) { |
| 131 | + link.addEventListener('click', function (e) { |
| 132 | + e.preventDefault() |
| 133 | + alert('Translations for the 1.0 docs are still work in progress.') |
| 134 | + }) |
| 135 | +}) |
| 136 | +</script> |
0 commit comments