1、為什么要學習vue
學習Vue之前我們先來談談JQ的優點:
鏈式操作DOM
抹平各個瀏覽器之間的差異
頻繁的操作DOM會造成什么呢?
回流和重繪:
頁面布局流發生改變就叫做回流
重繪元素自身的額樣式發生改變但是不會影響布局流
回流一定會發生重繪 重繪不一定會發生回流
2、vue的發展史
漸進式的JavaScript的框架
vue的作者:尤雨溪
mvvm框架:
M:model層 數據的增刪改查
V:view層 視圖的展示 類似於html一樣的模板
VM:viewModel層 model層view層之間的控制層
vue最大的特點
數據驅動視圖 虛擬DOM 組件.....
如何做到數據驅動視圖?
Object.defineProperty();
getter(get()) setter(set());
vue3.0 new proxy();
3.初體驗
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-model="msg"> <p>{{msg}}</p> </div> </body> </html> <script src="./vue.js"></script> <script> new Vue({ //vue所作用的范圍 el:"#app", //document.querySelector("#app") //當前Vue所需要的一些狀態 當前組件所需要的一些狀態 當前vue所需要的一些屬性 data:{ msg:"1905" } }) </script>