- Vue.js Quick Start Guide
- Ajdin Imsirovic
- 413字
- 2021-06-24 18:23:55
Declarative code
Let's compare vanilla JavaScript code with Vue JavaScript code.
For this example, we'll print out members of an array.
In vanilla JavaScript, this will be the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.list-item {
background: white;
color: gray;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<script>
var arr1 = ['a','b','c'];
var unorderedList = document.createElement('ul');
unorderedList.style.cssText = "background:tomato; width:
400px;height:400px";
document.body.appendChild(unorderedList);
for (var i=0; i<3; i++) {
var listItem = document.createElement('li');
listItem.className = "list-item";
unorderedList.appendChild(listItem);
listItem.innerHTML = arr1[i];
}
</script>
</body>
</html>
In this file, the focus should be on the code inside the script tags.
You can see this example in the form of a pen at this URL: https://codepen.io/AjdinImsirovic/pen/xzPdxO.
There are several things that we are doing in this code:
- We are setting array1, which will later populate the list items we will create dynamically
- We are creating a ul—an unordered list element that will wrap all our list items (all our li elements)
- We are setting the styles for our ul
- We are appending unorderedList to the body of our document
- Next, we use a for loop to create three li elements
- Still inside the for loop, we add a class to each list item
- We then append each of them to the unordered list element
- Finally, we add innerHTML to each list item
Many objections could be made to the way that this code is made. We could have used a forEach; we could have avoided adding styles the way we did and instead called the CSS from a separate file. But the biggest objection is how fragile this code is. Let's contrast this code with the same thing written in Vue.
In Vue, our code will look like this:
<!-- HTML -->
<ul>
<li v-for="entry in entries">
{{ entry.content }}
</li>
</ul>
// JS
var listExample = new Vue ({
el: "ul",
data: {
entries: [
{ content: 'a'},
{ content: 'b'},
{ content: 'c'}
]
}
})
The code for this example can be found here: https://codepen.io/AjdinImsirovic/pen/VdrbYW.
As we can see at just a simple glance, Vue's code is a lot easier to understand and reason about in comparison to the same code implemented in vanilla JavaScript.
There's also another major benefit to this setup: once you understand how Vue works, any other project that uses Vue will simply make sense to you, which will yield increased productivity and efficiency.
The Vue way of doing things thus promotes being faster and doing more things in less time.
- 連接未來:從古登堡到谷歌的網(wǎng)絡(luò)革命
- RCNP實(shí)驗(yàn)指南:構(gòu)建高級(jí)的路由互聯(lián)網(wǎng)絡(luò)(BARI)
- 面向物聯(lián)網(wǎng)的CC2530與傳感器應(yīng)用開發(fā)
- 從區(qū)塊鏈到Web3:構(gòu)建未來互聯(lián)網(wǎng)生態(tài)
- 物聯(lián)網(wǎng)識(shí)別技術(shù)
- Truffle Quick Start Guide
- 物聯(lián)網(wǎng)信息安全
- 數(shù)字通信同步技術(shù)的MATLAB與FPGA實(shí)現(xiàn):Altera/Verilog版(第2版)
- Wireshark網(wǎng)絡(luò)分析就這么簡(jiǎn)單
- 雷達(dá)饋線技術(shù)
- 物聯(lián)網(wǎng)之霧:基于霧計(jì)算的智能硬件快速反應(yīng)與安全控制
- 紅藍(lán)攻防:構(gòu)建實(shí)戰(zhàn)化網(wǎng)絡(luò)安全防御體系
- 全聯(lián)網(wǎng)標(biāo)識(shí)服務(wù)
- Guide to NoSQL with Azure Cosmos DB
- 物聯(lián)網(wǎng)M2M開發(fā)技術(shù):基于無線CPU-Q26XX