摘要：簡單做了一個簡單的vue入門，了解最基礎的知識點，環境的配置，創建腳手架專案，創建uni-app專案，
vue官網檔案：https://cn.vuejs.org/
uni-app官網檔案：https://uniapp.dcloud.io/
HBuilderX:https://www.dcloud.io/hbuilderx.html
文章中涉及的代碼下載
vue:https://download.csdn.net/download/weixin_41937552/16238706
https://download.csdn.net/download/weixin_41937552/16238760
vue-cli:https://download.csdn.net/download/weixin_41937552/16238871
uni-app:https://download.csdn.net/download/weixin_41937552/16238803
目錄
序言
第一節：安裝與部署
第二節：創建第一個vue應用
第三節：資料與方法
第四節：生命周期
第五節：模板語法-插值
第六節：模板語法-指令
第七節： class與style系結
第八節：條件渲染
第九節：串列渲染
第十節：事件系結
第十一節：表單輸入系結
第十二節：組件基礎
第十三節：組件注冊
第十四節：單檔案組件
第十五節：免終端開發vue應用
序言
第一節：安裝與部署
先引入vue.js,下載地址：
在head標簽中引入vue.js后，可以打開HB-X點擊右上角的預覽查看一下控制臺，出現如圖所示的字樣說明引入成功，
第二節：創建第一個vue應用
第三節：資料與方法
宣告式渲染，vm是MVVM中資料系結，VM的縮寫，$符號可以選擇變數，其實可以不加，$watch可以監聽資料變化，在本例中放在新資料與老資料中間便于查看控制臺結果，放在最下面控制臺輸出和預想有出入，
第四節：生命周期
.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>生命周期</title>
<script src="vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
message:'你好，孫叫獸',
},
//在實體初始化之后，資料觀測 (data observer) 和 event/watcher 事件配置之前被呼叫，
beforeCreate:function(){
console.log('beforeCreate');
},
/* 在實體創建完成后被立即呼叫，
在這一步，實體已完成以下的配置：資料觀測 (data observer)，屬性和方法的運算，watch/event 事件回呼，
然而，掛載階段還沒開始，$el 屬性目前不可見， */
created:function(){
console.log('created');
},
//在掛載開始之前被呼叫：相關的渲染函式首次被呼叫
beforeMount:function(){
console.log('beforeMount');
},
//el 被新創建的 vm.$el 替換, 掛在成功
mounted:function(){
console.log('mounted');
},
//資料更新時呼叫
beforeUpdate:function(){
console.log('beforeUpdate');
},
//組件 DOM 已經更新, 組件更新完畢
updated:function(){
console.log('updated');
}
});
setTimeout(function(){
vm.message='孫叫獸，我來啦！';
},3000);
</script>
</body>
</html>
第五節：模板語法-插值
第六節：模板語法-指令
第七節： class與style系結
第八節：條件渲染
第九節：串列渲染
第十節：事件系結
第十一節：表單輸入系結
第十二節：組件基礎
第十三節：組件注冊
第十四節：單檔案組件
原始碼下載：https://download.csdn.net/download/weixin_41937552/16238803
第十五節：免終端開發vue應用
原始碼下載：https://download.csdn.net/download/weixin_41937552/16238803
好啦，本期的內容就分享到這里，我們下期見！
好書不厭百回讀，熟讀自知其中意，讓學習成為習慣，用知識改變命運，讓博客見證成長，用行動證明努力，
如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “點贊” “評論” “收藏” 一鍵三連哦！
聽說 👉 點贊 👈 的人運氣不會太差，每一天都會元氣滿滿呦！^ _ ^ ?? ?? ??
碼字不易，大家的支持就是我堅持下去的動力，點贊后不要忘了👉 關注 👈我哦！
更多精彩內容請前往 孫叫獸的博客
微信公眾號【電商程式員】，分享改變自己的專案，
如果以上內容有任何錯誤或者不準確的地方，歡迎在下面 👇 留個言，或者你有更好的想法，歡迎一起交流學習~~~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/271381.html
標籤：其他