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>
