整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天，我們給大家帶來的是一個基于vue3的開源項目：電動車電池范圍計算器。這是一個workshop，通過完成該項目，我們可以直觀的感受到vue3的強大，了解一些項目最佳實踐。
項目的背景是當前備受關注的電動車。經歷了近6年的發展，電動車在市場上得到大規模普及，從“大玩具”變為未來交通的基石。項目以電動車行業最受關注的續航能力為例，使用vue3技術構建一個電池范圍計算器，來展示用Vue.js制作儀表盤的開發方式和體驗。
在開始閱讀本教程之前，我們需要做以下準備，搭建好項目環境：
環境準備完畢，我們可以讀取README.md了解項目的概況。
與常見的開發項目不同，這個項目最有意思的地方在于，它不是一個最終的應用程序，而是一個存在缺陷的應用程序，即workshop。我們需要對它進行修復完善并進一步開發，并在這個過程中掌握vue開發技巧。
在正式開始工作之前，讓我們先一起來了解一下這個項目的結構。
workshop-reactjs-vuejs/vuejs-app/src是workshop的源碼目錄，結構如下圖所示。main.js是應用程序的入口點，App.vue是應用程序的輸入組件。
（項目源代碼結構）
相比于vue2，Vue3應用程序的創建方式已更改，需要導入新的createApp（）方法，而不是使用new Vue（），然后調用這個方法來傳遞App.vue組件（入口組件）。
緊接著我們將在createApp上調用mount方法，并傳遞一個CSS選擇器標識mount元素，這個過程和在Vue 2中操作$ mount示例方法一樣
（項目入口）
（app.vue組件）
App.vue是應用程序的入口組件，由以下部分組成。
在上圖中，name property 表示組件的名稱（名稱為“ app”）。該組件使用的子組件在中定義components-property。在這里，TeslaBattery是App.vue組件的子組件，后面會介紹到。要使用TeslaBattery組件，必須首先將其導入（import Tesla-Battery from "..." ）
在中data()-function，我們可以定義和初始化狀態變量，例如導入的徽標和greeting屬性。要呈現徽標和問候語，必須在模板中定義它們。最終必須（通過export default { } ）導出整個組件，以便可以將其再次導入到其他組件和main.js中。
模板負責定義組件生成的輸出。Vue.js 使用基于HTML的模板語法可以使數據通過data ()-function進行綁定并輕松呈現。數據綁定的最簡單形式是使用Mustache語法（雙括號）的文本插值：{{greeting}}
在上面的示例中，{{greeting}} 替換Hello Tesla !!! 成為和data()-function相關的值。在此問候語上方，用img-tag來呈現徽標。要將徽標分配給img src-attribute，用屬性進行綁定。在此應用程序中經常使用屬性綁定，可以使用： v-bind <img :src="logo"<img v-bind:src="logo"> 進行綁定
最后，使用<tesla battery>-tag來實例化TeslaBattery組件并進行渲染。對于此標簽必須使用Kebab case，這一部分我們會在后面詳細討論
在Vue中，我們使用SCSS文件對整個應用進行樣式設置，這里不展開介紹。
介紹完基礎的項目架構，我們來看項目的UI部分是怎么運行的。該應用程序包含一個入口應用程序組件，該組件包含一個子組件TeslaBattery。TeslaBattery子組件包含以下二級子組件：
這些組件最終構成了用戶看到的儀表盤。
（最終展示的儀表盤）
以下代碼塊清晰的顯示了組件的層級關系，項目中同時用到了Container組件和Presentation組件。“ Tesla電池組件”是容器組件。基礎子組件是Presentation組件。這樣可將組件分為兩類，有利于我們在開發過程中重復使用。
（組件層級）
兩種組件的特點對比如下：
Container組件
Presentation組件
（組件樹）
此劃分方法具有以下優點，值得推薦。
在下圖中可以看出，我們使用props，將stats-data（源自stats（）函數）從TeslaBattery組件傳遞到TeslaStats組件，鏈接起上下級組件。
（使用props傳遞數據）
具體操作上，你需要在TeslaBattery組件模板中使用v-bind或冒號操作符。
（傳遞stats數據）
該組件在腳本部分包含一個props-property，用于接收stats-data。該屬性的數據類型為數組。在本例中，我們使用來自Vue.js的v-for指令來遍歷統計信息，按照特定順序進行展示。
我們可以在filters-property中定義自定義過濾器。例如，過濾器“lowercase”，可以用小寫呈現模型名。在項目中，我們自定義了一個過濾器，把英里轉換為公里。
在Vue 3中，我們無法再使用filters-property。為了開發“把英里轉換為公里”的過濾器，我們需要使用Compostion API。Compostion API是基于函數的API，通常用于組合與重用各組件的邏輯。
首先，我們需要創建一個JavaScript文件composable.js，export出我們需要使用的數據和方法如，“把英里轉換為公里”的過濾器。
（封裝過濾器的代碼）
然后，我們將composable.js導入到需要使用該過濾器的組件中，就可以在其中使用這些過濾器了。
（導入并啟用過濾器的代碼）
在Vue3中，我們可以使用各組件的模板中的v-model指令實現雙向數據綁定。
在這個項目中， TeslaCounter組件需要將速度（speed）綁定到TeslaBattery組件。
（組件間的雙向數據綁定）
我們在TeslaBattery組件模板中使用v-model指令將speed屬性（車速）綁定到TeslaCounter組件。
（使用v-model傳遞數據的代碼）
作為接收組件，TeslaCounter則需要在props中接受modelValue屬性。此外，還需要emit出@update:modelValue事件，用于通知數據變更。emit操作在increment()方法中觸發，在速度發生變化時，將最新的數據“推送”給其綁定的TeslaBattery組件。
（emit事件通知的代碼）
以上就是開源項目電動車電池范圍計算器中源代碼的核心介紹，項目中還有更多優秀的實踐值得大家學習和參考。
除此之外，項目中還添加了一個PPT文件，詳細說明了諸如通過v-model指令進行雙向數據綁定、使用按鈕向事件分配事件以及創建其他組件之類的做法。
后續我們還會為大家推薦更多有意思的開源項目，一起了解vue等前端技術的發展與實戰。
閱讀拓展：如果您已經很熟悉Node.js的用法，如果對內嵌Excel有興趣，可以了解一下SpreadJS等相關控件，這些內容也可以在開發中為開發人員提供很大助力，歡迎點擊下方“了解更多”。
作簡單計算器——想要成為合格的java工程師，就別犯懶！
制作簡單計算器——想要成為合格的java工程師，就別犯懶！
用到的技術：HTML + JavaScript;主要以javascript為主。
制作簡單計算器——想要成為合格的java工程師，就別犯懶！
實現簡單的加減法計算；
操作步驟：
首先制作一個html頁面；代碼如下
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>計算器</title>
</head>
<body>
<divid="keys" onclick="fun()">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button><br>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>0</button><br>
<button>C</button>
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
<button>=</button> </div>
<textarea id="sc"style="resize:none;width:200px; height:50px;" readonly></textarea>
</body>
</html>
利用javascript實現二級菜單效果；代碼如下
<script type="text/javascript">
varsc= document.getElementById("sc");
varkeys = document.getElementById("keys");
functionfun(){
var e=e||window.event;//找到button的內容
var btnTxt=e.target.innerHTML //該元素的值
if(e.target.nodeName=="BUTTON"){//判斷是否是點在了button上
try{
switch(btnTxt){
case"=":
//alert("計算") ;
sc.value=eval(sc.value)
break;
case"C":
//alert("清空")
sc.value=""
break;
default:
// alert("拼字串")
sc.value+=btnTxt
}//switch end
}catch(e){//報錯語
sc.value="您的輸入有誤"
}
}
</script>
知識要點剖析：如何理解var e=e||window.event的？
解答：為了實現多種瀏覽器兼容；
整個代碼是這樣的vare=event?event||window.event;
意思是：如果存在event,那么var e=event;而如果不存在event，那么var e=window.event
eval(String)方法：
是通過計算 string 得到的值（如果有的話）。
為世界上最大和最受信任的軟件開發人員社區的 Stack Overflow 團隊今日推出了一款薪資計算器Salary Calculator，該工具可以幫助開發社區的成員和員工根據地區、工作經驗、水平和教育程度等來計算典型薪酬，該工具將根據各類因素給出直觀圖形化的顯示，從而來衡量自己的薪資是否達到自己工作的一般水平，保障自己的利益，并且讓開發人員進行一般的財務處理工作。
Stack Overflow是一個程序設計領域的技術問答網站，隸屬Stack Exchange Network。直至2013年8月，Stack Overflow有超過1,900,000名注冊用戶和超過5,500,000個問題，其中最常見的主題有C#、Java、JavaScript、PHP、Android、jQuery、C++和Python。民間有種說法，只有高端的程序員才會直接上stackoverflow提問。
網站允許注冊用戶提出或回答問題，還可對已有問題或答案加分、扣分或進行修改，條件是用戶達到一定的“聲望值”。“聲望值”就是用戶進行網站交互時能獲取的分數，例如，用戶A回答了一個問題，用戶B對用戶A的解答給予了“加分”，用戶A就會因而獲得10點聲望值。當聲望值達到某個程度，用戶的權限就會增加，如聲望值超過50點就可以評論答案，另外網站也會根據用戶的貢獻頒發徽章。用戶創建的內容都使用知識共享協議授權。
從2011年以來，Stack Overflow開始主動向開發人員調研他們最喜歡的技術，編碼習慣和工作偏好以及他們如何學習，分享和升級。為幫助開發人員找到更好的工作、了解企業，同時提供良好的用戶體驗，順勢為企業對接技術人才。
輸入以下元素即可衡量自己的薪資水平：工作 地點、教育程度、職業編程經歷、開發人員類型、擅長編程語言/技術
Stack Overflow 負責人表示，堅持不懈與我們的社區成員真誠溝通只有益處沒有壞處，這包括像財務處理這類日常生活中的棘手問題。這就是為什么創建了 Stack Overflow 薪資計算器這樣的小工具來使衡量薪資透明化。
作時代的見證者——點擊關注IT戰略家，感謝支持！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
