1. Vue核心
? 1.1. Vue簡介
????????1.1.1. 官網
中文官網Vue.js - 漸進式 JavaScript 框架 | Vue.js (vuejs.org)
https://cn.vuejs.org/
英文官網
Vue.js - The Progressive JavaScript Framework | Vue.js (vuejs.org)https://vuejs.org/
????????1.1.2. 介紹與描述
VUE是構建于用戶界面的漸進式JavaScript框架
????????1.1.3. Vue的特點
遵循MVVM模式
體積小、編碼簡潔，執行效率高，適合移動/PC端開發
????????1.1.4.與其他JS框架的關聯
借鑒 Angular 的模板和數據綁定技術
借鑒 React 的組件化和虛擬DOM技術
????????1.1.5. Vue周邊庫
vite：vue腳手架
vue-resource
axios
vue-router：路由
vuex：狀態管理
element-ui：基于vue的UI組件庫（PC端）
1.2. 初識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>初識vue</title><!-- 引入Vue --><script src="../js/vue.js"></script>
</head>
<body><!-- 準備好一個容器 --><div id="root"><h1>Hello！{{name}}!</h1></div><script>Vue.config.productionTip = false // vue在啟動時生成提示關閉new Vue({el:'#root', //el用于指定當前Vue實例為哪個容器服務，值通常為css選擇器字符串data:{ //data用于存儲數據，數據共el所指定的容器去使用name:'JOJO'}})</script>
</body>
</html>
VUE的基本使用
1.導入vue.js腳本文件
2.在頁面聲明一個將要被vue控制的區域
3.創建VUE的實例對象
1.3. 模板語法
<!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>vue模板語法</title><script src="../js/vue.js"></script>
</head>
<body><div id="root"><h1>插值語法</h1><h3>你好，{{name}}!</h3><hr><h1>指令語法</h1><a v-bind:href="url">快去看新番！</a><br><a :href="url">快去看新番！</a></div><script>Vue.config.productionTip = false new Vue({el:'#root', data:{ name:'JOJO',url:'https://www.bilibili.com/'}})</script>
</body>
</html>
總結：
Vue模板語法包括兩大類：
插值語法：
功能：用于解析標簽體內容
寫法：{{xxx}}(matches)，xxx是js表達式，可以直接讀取到data的數據
指令語法：
功能：用于解析標簽（包括：標簽屬性、標簽體內容、綁定事件…）
舉例：v-bind:xxx，xxx同樣要寫js表達式，可以直接讀取到data中的屬性
1.4數據綁定
<body><div id="root">單向數據綁定：<input type="text" v-bind:value="name"><br>雙向數據綁定：<input type="text" v-model:value="name"></div><script>Vue.config.productionTip = false new Vue({el:'#root', data:{name:'JOJO'}})</script>
</body>總結：
Vue有2種數據綁定的方式：
單向綁定（v-bind） 雙向綁定（v-model）
備注：
雙向數據綁定一般應用在表單類元素上（如：<input>、<select>、<textarea>等）
v-model:value可以簡寫為v-model，因為v-model默認收集的是value值
1.5. el與data的兩種寫法
<body><div id="root"><h1>Hello,{{name}}!</h1></div><script>Vue.config.productionTip = false //el的兩種寫法：// const vm = new Vue({// // el:'#root', //第一種寫法// data:{// name:'JOJO'// }// })// vm.$mount('#root')//第二種寫法//data的兩種寫法：new Vue({el:'#root', //data的第一種寫法：對象式// data:{// name:'JOJO'// }//data的第二種寫法：函數式data(){return{name:'JOJO'}}})</script>
</body>
總結：
el有2種寫法：
- 創建Vue實例對象的時用el屬性
- 先創建Vue實例，再通過
vm.$mount('#root')指定el的值
data有2種寫法：
- 對象式
- 函數式
?由Vue管理的函數，一定不要寫箭頭函數，否則this就不再是Vue實例了
?1.6. MVVM模型
?MVVM模型
M ：model表示在頁面渲染時的數據源
V：View表示在頁面渲染的DOM結構
VM：實例對象
<body><div id="app"><span ref="span" @click="change($event)">{{ message }}</span><p>{{name}}</p><p>{{ $options}}</p></div>
</body>
總結：
????????data中所有的屬性，最后都出現在了vm身上
????????vm身上所有的屬性 及 Vue原型上所有的屬性，在Vue模板中直接使用
1.7. Vue中的數據代理
?
總結：
Vue中的數據代理通過vm對象來代理data對象中屬性的操作（讀/寫）
Vue中數據代理的好處：更加方便的操作data中的數據
基本原理：
????????通過object.defineProperty()把data對象中所有屬性添加到vm上。
????????為每一個添加到vm上的屬性，都指定一個getter/setter。
????????在getter/setter內部去操作（讀/寫）data中對應的屬性。
?
 prepare 階段)
