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物件的屬性