vue - 初識

Vue.js

本章內容:

Vue是什麼?

​ Vue是一套用於構建用戶界面的漸進式框架。Vue的核心只關注視圖層,不僅容易上手,還便於與第三方庫或既有項目整合。


Vue兩大核心思想

  • 數據驅動

    數據(data)驅動視圖(html):data選項中的數據發生變化, 用到該數據的所有視圖 (標籤) 會自動更新, 這個特點稱爲響應式。

  • 組件化
    擴展HTML元素, 封裝可重用的組件 ( 代碼 )。


起步

​ 創建一個.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:存儲數據,可以存儲任何類型數據。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章