Vue.js簡易安裝和快速入門(第二課)
上一節(jié)我們介紹了Vue.js框架,這一節(jié),我們可以來試著動手寫點(diǎn)小代碼了。
1 簡易安裝
要使用Vue.js,我們得先把它安裝到我們的項(xiàng)目中,說明了簡易安裝,我們講解的肯定是最簡單的方法,先不管那些高大上的費(fèi)時(shí)間的安裝方法,直接引入一個(gè)js文件,先把代碼敲代碼再說。
<head> <meta charset="UTF-8"> <title>簡易安裝 Vue.js</title> <script src="vue.js"></script> </head>
官網(wǎng)提供了Vue.js源碼下載的地方:https://cdn.jsdelivr.net/vue/2.1.3/vue.js
如果你不想下載到本地,要可以直接用CDN的方式,引入網(wǎng)上資源,一樣可以:
<script src="https://xx/vue.js"></script>
這樣,我們就成功地用最簡單的方法把Vue.js引入到我們的項(xiàng)目中了。至于那些高大上的npm,Bower等花式安裝方法,我們后期再看它。
2 數(shù)據(jù)驅(qū)動視圖
引入之后,我們就可以把它用起來。聽說它最牛逼的地方是數(shù)據(jù)驅(qū)動視圖,解放DOM操作,讓你不再做又復(fù)雜又耗性能的DOM操作。那么,我們就看看它是怎么玩的!
假設(shè),我們現(xiàn)在要把js對象中的某個(gè)變量的值渲染在頁面上,傳統(tǒng)的做法,就是先用getElementById獲取到DOM節(jié)點(diǎn)對象,再innerHTML設(shè)置它的內(nèi)容。
現(xiàn)在,在Vue.js中,你需要這樣做:
<div id="app"> 公眾號:{{ name }} </div> <script> let vm = new Vue({ el:"#app", data:{ name:"web前端教程", } }); </script>
我們通過new Vue( )創(chuàng)建一個(gè)實(shí)例vm,參數(shù)是一個(gè)json對象,屬性el提供一個(gè)在頁面上存在的DOM 元素(id='app'),表明這個(gè)實(shí)例是關(guān)聯(lián)指定的DOM節(jié)點(diǎn)。
在DOM節(jié)點(diǎn)上,我們就可以使用雙大括號{{ }}的語法來渲染Vue實(shí)例對象data中已經(jīng)存在的屬性值,如上面案例中的name屬性的值“web前端教程”就會被渲染到頁面中,替換{{ name }} 顯示效果為:“web前端教程”。
在此過程中,我們并沒有寫過操作DOM節(jié)點(diǎn)的代碼,而且,上一節(jié)我們講過,MVVM模式中的viewModel充當(dāng)著監(jiān)控者的角色,假如它監(jiān)控到model數(shù)據(jù)發(fā)生了變化,便會通知view視圖進(jìn)行更新,這個(gè)過程并不需要你去參與。
(復(fù)習(xí)mvvm)
我們來試試看,我們把name中的值改成:“hello word”,再不添加任何代碼的情況下,頁面視圖是否會自動更新。
看下面的gif動圖,我們通過chrome瀏覽器演示一下:
(慢點(diǎn),等gif圖加載完)
如上圖所示,一旦name的值被改變了,頁面上立馬跟著發(fā)生了變化,而不需要你再寫innerHTML去更新視圖了。
這就是Vue.js的數(shù)據(jù)驅(qū)動視圖。
3 雙向綁定
更方便的是,Vue.js還提供了方便的語法指令,實(shí)現(xiàn)視圖和數(shù)據(jù)的雙向綁定,也就是說,不但數(shù)據(jù)變化了可以驅(qū)動視圖,用戶在頁面上做了一些操作,也很方便地實(shí)現(xiàn)更新model層的數(shù)據(jù)。
例子:監(jiān)聽用戶在頁面輸入框輸入的內(nèi)容,然后將其實(shí)時(shí)更新在頁面上。
在Vue中我們使用v-model指令就可以輕松實(shí)現(xiàn)。(v-model是什么東西,先不用管,后面會有章節(jié)詳細(xì)介紹)。
<div id="app"> <input v-model="number"> <p>數(shù)字:{{ number }}</p> </div> <script> let vm = new Vue({ el:"#app", data:{ number:"", } }); </script>
效果如下面的動圖:
(慢點(diǎn),等gif圖加載完)
案例中,我們不需要寫代碼去監(jiān)聽input控件的內(nèi)容變化,用戶輸入的內(nèi)容,會實(shí)時(shí)地更新vm實(shí)例中的data屬性number的值,一旦number更新了,視圖也會跟著更新了。因?yàn)檫@一切,都由Vue.js幫你完成了。
4 組件
上面的我們演示了Vu.jse的數(shù)據(jù)驅(qū)動,別忘了,上一節(jié)我們提到Vue.js還有一個(gè)重要的核心,就是:組件化。
組件化就是把頁面中特定的區(qū)塊獨(dú)立抽出來,并封裝成一個(gè)可方便復(fù)用的組件。
例子:假設(shè),頁面上有多個(gè)一樣的卡片:
傳統(tǒng)的辦法,我們可以要寫三份同樣的HTML布局:
<div id="app"> <!--第1個(gè)卡片--> <div class="card"> <img src="logo.png" alt=""> <h2>web前端教程</h2> <p>這里是描述,很長的描述</p> <button>我是按鈕</button> </div> <!--第2個(gè)卡片--> <div class="card"> <img src="logo.png" alt=""> <h2>web前端教程</h2> <p>這里是描述,很長的描述</p> <button>我是按鈕</button> </div> <!--第3個(gè)卡片--> <div class="card"> <img src="logo.png" alt=""> <h2>web前端教程</h2> <p>這里是描述,很長的描述</p> <button>我是按鈕</button> </div> </div>
如果我們把每個(gè)卡片看作一個(gè)可復(fù)用的區(qū)域的話,那么它就可以封裝成一個(gè)組件。
在Vue.js中,我們試著把卡片封裝成一個(gè)組件。
<div id="app"> <card></card> <card></card> <card></card> </div> <script> //注冊一個(gè)名叫card的組件 Vue.component('card',{ template:`<div> <img src="logo.png" alt=""> <h2>web前端教程</h2> <p>這里是描述,很長的描述</p> <button>我是按鈕</button> </div>` }); new Vue({ el:"#app" }); </script>
我們用Vue.component(tagName, options)注冊了一個(gè)名字叫card的組件,這樣,在需要復(fù)用這個(gè)組件的地方,我們只需要使用<card></card>就可以了。實(shí)際開發(fā)中,組件比這個(gè)復(fù)雜得多,越復(fù)雜,封裝后的便利性越高。
可能你會說,組件里面的顯示的內(nèi)容不可能全都一樣。放心,Vue為組件提供了props屬性來接受傳遞進(jìn)來的參數(shù),后面我們會有專門的章節(jié)來介紹組件的詳細(xì)用法。
5 本節(jié)小結(jié)
看到這里,你已經(jīng)了解了Vue.js的數(shù)據(jù)驅(qū)動和組件化兩大核心了,你已經(jīng)入門了。后面的章節(jié)都是圍繞這兩個(gè)核心點(diǎn)來展開講解。
來源:公眾號:web前端教程
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目如何使用three.js實(shí)現(xiàn)vr360度全景圖片預(yù)覽
這篇文章主要介紹了vue項(xiàng)目如何使用three.js實(shí)現(xiàn)vr360度全景圖片預(yù)覽,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue動態(tài)生成el-checkbox點(diǎn)擊無法賦值的解決方法
這篇文章主要給大家介紹了關(guān)于Vue動態(tài)生成el-checkbox點(diǎn)擊無法賦值的解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02Vue.js實(shí)現(xiàn)一個(gè)漂亮、靈活、可復(fù)用的提示組件示例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)一個(gè)漂亮、靈活、可復(fù)用的提示組件示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03