Vue.js
本章內容:
Vue是什麼?
Vue是一套用於構建用戶界面的漸進式框架。Vue的核心只關注視圖層,不僅容易上手,還便於與第三方庫或既有項目整合。
Vue兩大核心思想
-
數據驅動
數據
(data)
驅動視圖(html)
:data選項中的數據發生變化, 用到該數據的所有視圖 (標籤) 會自動更新, 這個特點稱爲響應式。 -
組件化
擴展HTML
元素, 封裝可重用的組件 ( 代碼 )。
起步
開發版本
<!-- 開發環境版本,包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生產版本
<!-- 生產環境版本,優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
第一個Vue案例
<!DOCTYPE html>
<html>
<head>
<title>Vue - 起步 - 第一個Vue案例</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
message: "mischievousness"
},
methods: {} // 存放一些事件方法
})
</script>
</body>
</html>
注意事項
el:表示的是Vue接管的範圍
全稱element
,可傳入標籤名,類名,id。這裏建議使用id,因爲id具有唯一性。
Vue接管的範圍不能是body或html。
data:存儲數據,可以存儲任何類型數據。