一、Vue框架簡介
1、Vue.js 是目前最火的一個前端框架，和Angular.js、React.js 一起，併成爲前端三大主流框架。
2、Vue.js是用於構建用戶界面的漸進式框架。
3、在Vue中，一個核心的概念，就是讓用戶不再操作DOM元素，解放了用戶的雙手，讓程序員可以更多的時間去關注業務邏輯。
4、Vue框架，能夠提高開發的效率。
提高開發效率的發展歷程:
原生JS -> Jquery之類的類庫 -> 前端模板引擎 -> Vue.js
二、MVVM簡介
MVVM是Model-View-ViewModel的簡寫，即模型-視圖-視圖模型。
【模型】指的是後端傳遞的數據。
【視圖】指的是所看到的頁面。
【視圖模型】mvvm模式的核心，它是連接view和model的橋樑。
在MVVM的框架下視圖和模型是不能直接通信的。它們通過ViewModel來通信。
ViewModel通常要實現一個observer觀察者，當數據發生變化，ViewModel能夠監聽到數據的這種變化，然後通知到對應的視圖做自動更新，而當用戶操作視圖，ViewModel也能監聽到視圖的變化，然後通知數據做改動，這實際上就實現了數據的雙向綁定。
三、Vuejs中的HelloWorld
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE中最厲害的HelloWorld</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>請輸入: <input type="text" v-model="name"> </p>
<p>你輸入的爲: <span v-text="name"> </span> </p>
</div>
<script type="text/javascript">
// 原生JS操作DOM實現
// let input = document.getElementsByTagName("input")[0];
// let span = document.getElementsByTagName("span")[0];
// input.onkeyup = function(){
// span.innerText=input.value;
// }
// VUE版本實現
const vm = new Vue({
el:"#app",
data:{
name:"manong0371"
}
})
</script>
</body>
</html>
