Vue入坑第一篇
- 2019 年 11 月 6 日
- 筆記
寫在前面的話：
文章是個人學習過程中的總結，為方便以後回頭在學習。
文章中會參考官方文檔和其他的一些文章，示例均為親自編寫和實踐，若有寫的不對的地方歡迎大家和我一起交流。
一.前言
本篇作為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對象的屬性
