寫在前面的話:
文章是我的學習過程當中的總結,爲方便之後回頭在學習。
文章中會參考官方文檔和其餘的一些文章,示例均爲親自編寫和實踐,如有寫的不對的地方歡迎你們和我一塊兒交流。javascript
本篇做爲vue入門的一篇總結,目地在使用vue一些簡單的特性去打開vue的學習之門。css
搭建vue的開發環境通常有兩種方式,一種是使用vue-cli腳手架,這個須要具有Node的一些基礎知識;第二種方式是在咱們編寫的html頁面中引入vue.js文件,就可使用vue了。後面咱們一直會使用第二種的方式去搭建vue的環境。html
注意:後續系列文章引入的vue.js是基於vue.2x版本的,大多數的知識點和特性的介紹都是參考官方文檔。官方文檔地址:https://cn.vuejs.org/v2/guide/vue
在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>
建立vue實例須要經過構造函數建立的。
var vm = new Vue({ });
使用構造函數建立vue實例時,咱們能夠傳入一個包含多個鍵值對的字典對象,完整的鍵值對配置能夠參考官方文檔。後面的部分咱們只簡介最基礎的配置項。
el配置項的值能夠是兩種類型,一種是字符串,一種是HTMLElement。當是字符串時,它表示一個css選擇器;當是HTMLElement時,它表示文檔中的某個元素。
基本語法java
var vm = new Vue({ el:'id選擇器' | HTMLElement, });
或者vue-cli
var vm = new Vue({ }); vm.$el = 'id選擇器' | HTMLElement ;
做用npm
它主要的做用是將vue實例掛載到文檔中的DOM節點上,掛載完成後的DOM節點就是一個vue容器,在這個容器裏咱們就可使用vue的一些特性;vue實例建立以後,咱們可使用vm.$el去訪問掛載的這個DOM節點。
示例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>
打印結果ide
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>
上面咱們介紹瞭如何在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對象的屬性
要加油鴨