視頻鏈接（P1-P2）：
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs從入門到精通
Vue是什么？
介紹
原生JS實作（命令式編碼）
就一個命名一個命令嚴格執行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 展示人員串列的容器 -->
<ul id="list"></ul>
<script type="text/javascript">
//一些人的資料
let persons = [
{id:'001',name:'張三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
]
//準備HTML字串
let htmlStr=''
//遍歷資料拼接HTML字串
persons.forEach(p =>{
//使用模板字串
htmlStr+=`<li>${p.id} - ${p.name} - ${p.age}</li>`
});
//獲取list元素
let list = document.getElementById('list')
//修改內容操作DOM
list.innerHTML=htmlStr;
</script>
</body>
</html>
Vue實作（宣告式編碼）
無需修改操作DOM，提高開發效率
Vue的開發版本安裝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="list">
<!-- 以插值運算子的形式遍歷輸出 -->
<li v-for="p in persons">
{{p.id}}-{{p.name}}-{{p.age}}
</li>
</ul>
<!-- 本地引入vue標簽檔案，開發版本 -->
<script type="text/javascript" src="https://www.cnblogs.com/PaturNax/archive/2022/07/19/js/vue.js"></script>
<script type="text/javascript">
//一些人的資料封裝到Vue實體的data函式中
var vm=new Vue({
//指定掛載元素
el:"#list",
data:{
persons: [
{id:'001',name:'張三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
]
}
});
</script>
</body>
</html>
頁面效果：
實作原理的區別
虛擬DOM:
存放在記憶體的資料
| JS | Vue | |
|---|---|---|
| 原理 | 資料data通過innerHTML->真實DOM中 |
資料->虛擬DOM->真實DOM |
| 結果 | 每次過濾與對比資料的效率低，因為要遍歷，代碼修改麻煩 | 當資料發生變化時，通過diff演算法可以快速比較不同，本質是哈希表找Key |
有關于他們的實作原理也常作為面試題考點
面試題：Vue中為什么要使用key
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/499793.html
標籤：其他