寫在前面的話：
文章是個人學習過程中的總結，爲方便以後回頭在學習。
文章中會參考官方文檔和其他的一些文章，示例均爲親自編寫和實踐，若有寫的不對的地方歡迎大家和我一起交流。
一.前言
本篇作爲vue入門的一篇總結，目地在使用vue一些簡單的特性去打開vue的學習之門。
二.如何搭建vue環境
搭建vue的開發環境一般有兩種方式，一種是使用vue-cli腳手架，這個需要具備Node的一些基礎知識；第二種方式是在我們編寫的html頁面中引入vue.js文件，就可以使用vue了。後面我們一直會使用第二種的方式去搭建vue的環境。
注意：後續系列文章引入的vue.js是基於vue.2x版本的，大多數的知識點和特性的介紹都是參考官方文檔。官方文檔地址：https://cn.vuejs.org/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:'id選擇器' | HTMLElement,});`
或者
`var vm = new Vue({
});
vm.$el = 'id選擇器' | 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: {
屬性名: 屬性值 },
});`
或者
`var vm = new Vue({
});
vm.$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,
}
});
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入坑第一篇的內容結束，在此總結一下前面梳理過的內容
1.使用構造函數的方式可以創建一個vue示例
2.el屬性將vue掛載到DOM節點上
3.data屬性給vue示例提供數據
4.雙花括號可以訪問實例中data對象的屬性
要加油鴨