一、簡介
vue是一套用于建構使用者界面的漸進式架構：
- 建構使用者界面：顧名思義，就是可以用來寫界面的架構
- 漸進式：既可以改造一個頁面的一個小部分，也可以從零開始做個複雜的網站
vue架構的核心思想是資料驅動：vue架構會監聽資料的變化，每當資料發生改變後，vue架構會利用新的資料重新渲染頁面，無需手動進行繁瑣的DOM操作
二、Vue執行個體
建立執行個體
先！+Tab建立一個html執行個體，然後在body中引入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>
<div id="app">hello world</div>
<!-- 引入vue源碼 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./sch_ran_vue.js"></script>
</body>
</html>
sch_ran_vue.js檔案：
// 建立一個vue執行個體
const vm = new Vue({
el: '#app',
data: {
name: 'hello world'
}
})
alert(vm.name);
上面的代碼通過script标簽引入了vue的源碼，這樣就可以在全局環境中使用vue的構造函數Vue
然後，在js代碼中，使用了new操作符來建立一個vue執行個體
在建立vue執行個體的時候，還向Vue構造函數傳入了一個對象，這個對象有el和data兩個屬性：
- data：data屬性用來存放執行個體的資料。Vue的核心思想是資料驅動，這裡的資料就是指data屬性中的資料，vue架構會監聽這個資料的變化，重新渲染頁面
vue執行個體會自動将data屬性中的資料映射到vm執行個體自身上, vm.name和vm.$data.name都可以擷取執行個體的name值
- el：el屬性用來綁定界面中的DOM元素，是将vue執行個體與html聯系起來的紐帶
執行個體的生命周期
和上面介紹過的el、data屬性一樣，生命周期其實就是一些初始化vue執行個體時傳遞的屬性，不過這些屬性都是函數，最常用的生命周期有兩個：
- created
- mounted
// 建立一個vue執行個體
const vm = new Vue({
el: '#app',
data: {
name: 'hello world'
},
// 指定created生命周期函數
created() {
alert('created');
},
// 指定mounted生命周期函數
mounted() {
alert('mounted');
},
})
下圖介紹了完整的生命周期及各個生命周期周期被觸發的時間點
三、模闆文法
插值
<!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>
<div id="app">{{name}}</div>
<!-- 引入vue的源碼 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./sch_ran_vue.js"></script>
</body>
</html>
// 建立一個vue執行個體
const vm = new Vue({
el: '#app',
data: {
name: 'hello world'
}
})
運作發現頁面上的{{name}}被替換成了hello world，這個{{}}雙大括号文法叫模闆文法 ，中間包含的内容就是插值，插值會變成被解析成變量或者單個表達式
// 建立一個vue執行個體
const vm = new Vue({
el: '#app',
data: {
name: 'hello world'
}
})
// 每隔500ms改變一次name屬性
setInterval(function() {
vm.name = Math.random();
}, 500);
運作可以看到一堆數字變來變去，這是由于setInterval函數周期性的改變data資料中的name
如果不使用vue架構實作這個功能的話，需要通過DOM操作，找到id為app的元素節點，改變其innerText
而使用了vue架構之後，關注層面隻需要聚焦于資料層面——data，不用再寫重複性的DOM操作
參考：
前端入門：https://www.zhihu.com/question/32314049/answer/713711753
然代碼：https://www.qsxqd.com/