1.vue.js是什麼

（a）簡單小巧（壓縮檔案17KB）；

（b）漸進式技術（邊學邊用不需要學完所有）；

（c）顛覆傳統前端開發（虛擬DOM等概念應運而生）；

（d）提供現代Web開發的高階功能，如下：

• 解耦檢視與資料（檢視，資料單獨存在）

• 複用外掛（相似度極高的內容封裝在一起）

• 路由機制（單頁面開發必備神器）

• 狀態管理（主要使用vuex中的state來方便實現通訊及其他功能） 

• 虛擬DOM （Virtual DOM生命週期的重要性）

2.程式碼先行

開發目標：按鈕新增點選事件

jquery版：

$(function(){
    $("#btnPre").delegate("#btn001","click",function(){
        alert("btn001被點選了！")
    });
    appBtn();
});
function appBtn(){
    var btn="<button id='btn001'>點一點</button>";
    $("#btnPre").append(btn);
}

vue版：

<div id="btnPre">
    <button id="btn001" v-if="showOrHide" v-on:click="btnClick">點一點</button>
</div>

<script>
    new Vue({
        el:"#btnPre",
        data:{
            showOrHide:true
        },
        methods:{
            btnClick:function(){
                alert("btn001被點選了！")
            }
        }
    })
</script>
 

如上程式碼看不出什麼差，但是如下場景會讓你有所改觀的：

場景一：許可權顯示或隱藏按鈕（jquery需要操作dom，vue只需修改showOrHide值即可）

場景二：頁面有100個需要操作的按鈕（難不成都操作一遍，那程式碼可是長了）

場景三：不同頁面存在相同功能的按鈕（jquery複製貼上程式碼就多了，vue封成元件造福千萬家）

3.開始使用

（a）使用CDN載入vue.js（CDN就是一個網上託管平臺，引入會直接把對應程式碼down到本地瀏覽器）

（b）下載vue指令碼，相對路徑引入（下載連結，自行下載別偷懶）

（c）npm安裝：npm install vue（前提是你電腦上安裝了node，npm一般是捆在node上的）

前端工作不好做，具有耐心不用說。

加油學習別放棄，勤奮就是可補拙。