寫在前面的話：
文章是個人學習過程中的總結，為方便以后回頭在學習。
文章中會參考官方文檔和其他的一些文章，示例均為親自編寫和實踐，若有寫的不對的地方歡迎大家和我一起交流。
VUE基礎系列目錄
一.前言
本篇作為vue入門的一篇總結，目地在使用vue一些簡單的特性去打開vue的學習之門。
二.搭建vue開發環境
搭建vue的開發環境一般有兩種方式，一種是使用vue-cli腳手架，這個需要具備Node的一些基礎知識；第二種方式是在我們編寫的html頁面中引入vue.js文件，就可以使用vue了。后續vue基礎的學習會用使用第二種方式搭建vue的開發環境。
注意：后面引入的vue文件都是基於vue.2x版本的，大多數的知識點和特性的介紹都是參考官方文檔。官方文檔地址：https://vuejs.bootcss.com/v2/guide/
三.開始使用vue
1.創建項目目錄
2.在html中引入vue.js
#在index.html引入vue.js
在html中直接引入vue.js也有兩種方式，一種是直接將文件下載到本地，一種是引用cdn上面的文件。此處我們使用cnd的方式引入vue.js。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>初識vue入門第一課</title>
<!-- 按照官方文檔，引入開發環境的vue.js，准確的版本為 v2.6.10 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
</body>
</html>
3.創建第一個vue實例
創建vue實例需要通過構造函數創建的。
var vm = new Vue({
});
使用構造函數創建vue實例時，我們可以傳入一個包含多個鍵值對的字典對象，完整的鍵值對配置可以參考官方文檔。后面的部分我們只總結了最基礎幾個的配置項。
4.DOM-el配置項
#el配置項的數據類型
el配置項的值可以是兩種類型，一種是字符串，一種是HTMLElement。當是字符串時，它表示一個css選擇器；當是HTMLElement時，它表示文檔中的某個元素。
#基本語法
var vm = new Vue({
el:'css選擇器' | HTMLElement,
});
#作用
它主要的作用是將vue實例掛載到文檔中的DOM節點上，掛載完成后的DOM節點就是一個vue容器，在這個容器里我們就可以使用vue的一些特性；
備注：在vue構造函數外部，可以使用vm.$el去訪問掛載的這個DOM節點。
#示例
下面我們寫一個示例體驗一下。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>初識vue入門第一課</title>
<!-- 按照官方文檔，引入開發環境的vue.js，准確的版本為 v2.6.10 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
</div>
<script type="text/javascript">
var vm = new Vue({ el: '#box' }); //在構造函數外部訪問vue掛載點dom節點
var vueEle = vm.$el; console.log(vueEle); </script>
</body>
</html>
#打印結果
5.數據-data配置項
#data配置項的數據類型
data的數據類型同樣是兩種：javascript原生的Object類型或者一個返回原生對象的函數。
函數類型一般用於在定義組件的時候，因為組件是會被復用的，這樣每一個復用組件的實例都會擁有這個data數據的副本，而不會互相影響。
#基本語法
var vm = new Vue({
data: {
屬性名: 屬性值
},
});
#作用
它主要是給vue示例提供數據支撐。
備注：在vue構造函數外部，可以使用vm.$data訪問這個數據。
#示例
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>初識vue入門第一課</title>
<!-- 按照官方文檔，引入開發環境的vue.js，准確的版本為 v2.6.10 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
</div>
<script type="text/javascript">
var vm = new Vue({ el: '#box', data:{ name: 'todo', age: 20, } }); //在vue構造函數外部，可以使用vm.$data訪問數據 var name = vm.$data.name; console.log(name); // 'todo'
var age = vm.$data.age; console.log(age); // 20
</script>
</body>
</html>
6.vue模板語法渲染數據-文本插值
上面我們介紹了如何在vue實例中定義數據，那么如何將vue實例中的數據展示到我們的頁面中呢，這就需要使用vue的模板渲染語法，模板渲染語法包含很多種形式，這里我們只講雙花括號形式的文本插值。
雙花括號的文本插值法，就是將vue中的數據以文本的形式解析到html中。在html中直接訪問vue實例里data對象中的屬性即可獲取到對應的值。而且當data對象中的屬性值發生變化，模板中插入的值也會自動發生變化。
#基本語法
{{ 變量名 }}
#示例
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>初識vue入門第一課</title>
<!-- 按照官方文檔，引入開發環境的vue.js，准確的版本為 v2.6.10 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<!-- 使用雙花括號將vue中的數據以文本的形式展示 -->
<h1>{{name}}</h1>
<h1>{{age}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({ el: '#box', data:{ name: 'todo', age: 20, } }); </script>
</body>
</html>
#界面展示結果
四.總結回顧
到此vue入坑第一篇學習結束，這里總結一下前面講過的內容
- 使用構造函數的方式可以創建一個vue示例
- el屬性將vue掛載到DOM節點上
- data屬性給vue示例提供數據
- 雙花括號可以訪問實例中data對象的屬性
要加油鴨