*****
### VSCode插件安裝
后面開發`Vue`項目，使用`.vue`的單文件開發，就需要一些插件來幫我們識別`.vue`文件。插件安裝在`Extension`中，點開即可看到一個搜索按鈕，可以輸入關鍵字搜索自己想要的插件。
這里我們開發`Vue`推薦的幾個插件：
1. `jshint`：`js`代碼規范檢查。
2. `Beautify`：一鍵美化代碼的插件。
3. `Vetur`：`.vue`文件識別插件。
4. `Javascript(ES6) code snippets`：`ES6`語法提示。
5. `Auto Rename Tag`：自動重命名標簽。標簽都是成對出現的，開始標簽修改了，結束標簽也會跟著修改。
6. `Auto Close Tag`：自動閉合標簽。針對一些非標準的標簽，這個插件還是很有用的。
7. `vue helper`：一些`Vue`代碼的快捷代碼。
8. `vscode-icons`：可選。提供了很多類型的文件夾`icon`，不同類型的文件夾使用不同的`icon`，會讓文件查找更直觀。
9. `open in browser`：可選。右鍵可以選擇在默認瀏覽器中打開當前網頁。
## Vue介紹
Vue(讀音/vju?/，類似于view) 是一套用于構建前后端分離的框架。剛開始是由國內優秀選手尤雨溪開發出來的，目前是全球“最”流行的前端框架。使用vue開發網頁很簡單，并且技術生態環境完善，社區活躍，是前后端找工作必備技能！
### Vue安裝和使用
vue的安裝大體上分成三種方式，第一種是通過script標簽引用的，第二種是通過npm(node package manager)來安裝，第三種是通過vue-cli命令行來安裝。作為初學者，建議直接通過第一種方式來安裝，把心思集中在vue的學習上，而不是安裝上。
```
# 開發環境
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
# 或者是指定版本號
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
# 或者是下載代碼保存到本地
<script src="lib/vue.js"></script>
# 生產環境，使用壓縮后的文件
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
```
### 基本使用
要使用Vue，首先需要創建一個Vue對象，并且在這個對象中傳遞el參數，el參數全稱是element，用來找到一個給vue渲染的根元素。并且我們可以傳遞一個data參數，data中的所有值都可以直接在根元素下使用{{}}來使用。示例代碼如下：
```
<div id="app">
<p>{{username}}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
"username": "邏輯教育"
}
});
</script>
```
其中data中的數據，只能在vue的根元素下使用，在其他地方是不能被vue識別和渲染的
```
<div id="app">
</div>
<!-- 這里渲染不了 -->
<p>{{username}}</p>
<script>
let vm = new Vue({
el: "#app",
data: {
"username": "邏輯教育"
}
});
</script>
```
另外也可以在vue對象中添加methods，這個屬性中專門用來存儲自己的函數。methods中的函數也可以在模板中使用，并且在methods中的函數來訪問data中的值，只需要通過this.屬性名就可以訪問到了，不需要額外加this.data.屬性名來訪問
```
<div id="app">
<p>{{greet()}}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
"username": "邏輯教育"
},
methods: {
greet: function(){
return "晚上好！" + this.username
}
}
});
</script>
```
