Vue基礎篇-初識vue.js
阿新 • • 發佈:2018-12-12
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上的)
前端工作不好做,具有耐心不用說。
加油學習別放棄,勤奮就是可補拙。