vue簡介
1.vue是什么
一套用于構建用戶界面的漸進式javascript框架
構建用戶界面:拿到的資料轉換為用戶可以看到的資料
漸進式:vue可以自底向上逐層用 從一個輕量小巧的庫逐漸遞進到使用各式各樣的vue插件
2.vue開發者(老二次元了,哈哈)
| 2013 | 受到Angular的啟發，尤雨溪開發出了一款輕量框架Seed同年12月，Seed更名為vue 版本號0.6.0 |
|---|---|
| 2014 | vue正式對外發布，版本0.8.0 |
| 2015 | 10月27日，正式發布vue1.0.0 Evangelion(新世紀福音戰士) |
| 2016 | 10月1日，正式發布vue2.0.0 Ghost in the Shell(攻殼機動隊) |
| 2020 | 10月27日，正式發布vue1.0.0 One Piece(海賊王) |
3.vue的特點
采用組件化模式，提高代碼的復用率，且代碼更好的維護
宣告式編碼 讓編碼人員無需操作DOM，提高開發效率
宣告式編碼和命令式編碼區別
1.命令式：舉個例子就是說一下做一下不說就不做
2.宣告式：舉個例子就是口有點干,說一聲口有點干 然后就會有人給我泡茶倒水端到我跟前
4.虛擬DOM
- 虛擬DOM就是記憶體中的一個資料vue可以最后轉換成真實的DOM
把代碼轉換為虛擬的DOM然后虛擬DOM轉換為真實DOM，如果資料中新添加了趙六，vue會創建一個新的DOM，然后會跟舊的DOM作比較(通過Diff演算法)沒有改變的資料直接復用，然后轉換為頁面的真實DOM
vue開發環境
1.引入vue檔案
<script type="text/javascript" src="https://unpkg.com/vue"></script><!--這里引入的是vue的cnd->
2.下載插件
在瀏覽器擴展里面搜索Vue.js devtools插件 下載(注意：在詳細資訊里面勾選 允許訪問檔案 URL選項)
初始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>
<!-- 引入vue.js檔案 -->
<script src="https://www.cnblogs.com/qxl2005/archive/2022/09/static/js/vue.js"></script>
<body>
<!-- 容器 -->
<div id="root">
<h1>{{name}}</h1>
</div>
<script>
//創建vue實體物件
new Vue({
//el指定當前vue實體為當前那個容器服務,值通常為css選擇器字串
el: "#root",
//data用于存盤資料 資料供el提供的容器使用
data: {
name: "初始vue",
},
})
</script>
</body>
</html>
- 當vue開始作業的時候把容器拿過來決議，決議容器里有沒有vue的語法，里面有一個插值語法，然后找到name把屬性值賦值給容器里面的name，然后生成了全新的一個容器，在把決議完的容器放到頁面當中
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/504749.html
標籤：其他
下一篇：flex常用布局