由於種種原因，決定放棄ng1（或許早就應該放棄），ng2暫時也不在考慮範圍之內。準備學習Vue.js N react.js，先從Vue開始。
先安利一下Vue的兩個縮寫形式(當然它來自官網文檔)
縮寫
v- 前綴在模板中是作爲一個標示 Vue 特殊屬性的明顯標識。當你使用 Vue.js 爲現有的標記添加動態行爲時，它會很有用，但對於一些經常使用的指令來說有點繁瑣。同時，當搭建 Vue.js 管理所有模板的 SPA 時，v- 前綴也變得沒那麼重要了。因此，Vue.js
爲兩個最爲常用的指令提供了特別的縮寫：
v-bind 縮寫
<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>
v-on 縮寫
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>它們看起來可能與普通的 HTML 略有不同，但
: 與 @ 對於屬性名來說都是合法字符，在所有支持
Vue.js 的瀏覽器都能被正確地解析。而且，它們不會出現在最終渲染的標記。縮寫語法是完全可選的，但隨着你更深入地瞭解它們的作用，你會慶幸擁有它們。Shorthands
The v- prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives.
At the same time, the need for the v- prefix becomes less important when you are building an SPA where
Vue.js manages every template. Therefore, Vue.js provides special shorthands for two of the most often used directives, v-bind and v-on:
v-bind Shorthand
<!-- full syntax -->
<a v-bind:href="url"></a>
<!-- shorthand -->
<a :href="url"></a>
v-on Shorthand
<!-- full syntax -->
<a v-on:click="doSomething"></a>
<!-- shorthand -->
<a @click="doSomething"></a>
They may look a bit different from normal HTML, but : and @ are valid chars for attribute names and all Vue.js supported browsers can parse it correctly. In addition, they do not appear in the final rendered markup.
The shorthand syntax is totally optional, but you will likely appreciate it when you learn more about its usage later.