1.爲什麼要學習VUE
最近公司的領導讓我抽空學習一下VUE，下一個項目要用到它。這麼多年開發中也知道有VUE這個東西發展很迅猛，基本上國內的互聯網企業用VUE的越來越多，而且面試招聘中也要求熟練和使用VUE的需求。
2. Vue的架構
在學習VUE之前瞭解過其是一個MVVM模型架構，JAVA程序員一定對MVC軟件架構模式很清晰。MVC分爲 Model（模型）、Controller（控制器）、View（視圖），Spring MVC正式這種架構風格的體現。而 Vue是基於MVVM架構風格
這種架構體系中，View的變化會同步更新到ViewModel中，於此同時ViewModel的變化也會同步更新到View中，其架構圖如下所示：
3. HelloWorld
項目可以使用script引入加載CDN文件，截止到當前Vue 2.x 最新版本爲2.6.11。
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
下面我們實現一個如下效果的簡單案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>helloworld</title>
</head>
<body>
<div id="app">
<input type="text" v-model="something">
<!-- 注意這裏面引用vue必須在vue app容器中 -->
<p>hello {{something}}</p>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
let app=new Vue({
el:'#app',
data: {
something:'join'
}
})
</script>
</html>
上面的代碼非常簡單。
- 引入Vue.js文件
- 在body中我們定義一個id爲app的div，Vue的所有渲染都是圍繞這個app而展開的。
- 在Js代碼中我們定義了一個Vue對象，並且指定所有的操作都是對app這個div展開的。
- data爲Vue管理的變量賦值。
4. VUE-devtools
平時開發中在Chrome中可以使用這個插件方便我們Vue的調試工作。如果你掌握了科學上網的方法這個時候可以在chrome的網上商店下載這個插件如下所示：
添加到Chrome後我們可以在控制檯選擇vue的按鈕使用這個插件如下所示：
這裏我們在剛剛的helloworld.html中打開這個vue的dev-tools如下所示：
接下來我們使用這個工具調試一下下列一個案例源碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="person in persons" >
{{person.name}}
</li>
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',//這個app就是DIV的屬性值裏的app
data: {
persons: [
{name: '前端工程師'},
{name: 'java後端工程師'},
{name: '運維工程師'},
{name: '大數據工程師'},
{name: 'ui工程師'}
],
// username:'join'
}
});
</script>
</body>
</html>
我們打開這個插入如下所示：
