本文主要為大家詳細介紹了Vue.js簡易安裝和快速入門的相關資料,具有一定的參考價值,有興趣的小伙伴們可以參考一下,希望能幫助到大家。
上一節我們介紹了Vue.js框架,這一節,我們可以來試著動手寫點小程式碼了。
1 簡易安裝
要使用Vue.js,我們得先把它安裝到我們的專案中,說明了簡易安裝,我們講解的肯定是最簡單的方法,先不管那些高大上的費時間的安裝方法,直接引入一個js文件,先把代碼敲代碼再說。
<head> <meta charset="UTF-8"> <title>简易安装 Vue.js</title> <script src="vue.js"></script> </head>
官網提供了Vue.js原始碼下載的地方:https://cdn.jsdelivr.net/vue/2.1.3/vue.js
如果你不想下載到本地,要可以直接用CDN的方式,引入網上資源,一樣可以:
<script src="https://xx/vue.js"></script>
這樣,我們就成功地用最簡單的方法把Vue.js引進到我們的專案中了。至於那些高大上的npm,Bower等花式安裝方法,我們後期再看它。
2 資料驅動視圖
#引入之後,我們可以用它。聽說它最屌的地方是資料驅動視圖,解放DOM操作,讓你不再做又複雜又耗效能的DOM操作。那麼,我們就來看看它是怎麼玩的!
假設,我們現在要把js對像中的某個變數的值渲染在頁面上,傳統的做法,就是先用getElementById取得到DOM節點對象,再innerHTML設定它的內容。
現在,在Vue.js中,你需要這樣做:
<p id="app"> 公众号:{{ name }} </p> <script> let vm = new Vue({ el:"#app", data:{ name:"web前端教程", } }); </script>
我們透過new Vue( )建立一個實例vm,參數是一個json對象,屬性el提供一個在頁面上存在的DOM 元素(id='app'),表示這個實例是關聯指定的DOM節點。
在DOM節點上,我們就可以使用雙大括號{{ }}的語法來渲染Vue實例物件data中已經存在的屬性值,如上面案例中的name屬性的值“ web前端教學」就會被渲染到頁面中,取代{{ name }} 顯示效果為:「web前端教學」。
在這個過程中,我們並沒有寫過操作DOM節點的程式碼,而且,上一節我們講過,MVVM模式中的viewModel充當著監控者的角色,如果它監控到model資料發生了變化,便會通知view視圖進行更新,這個過程並不需要你去參與。
(複習mvvm)
我們來試試看,我們把name中的值改成:“hello word”,再不加任何程式碼的情況下,頁面視圖是否會自動更新。
看下面的gif動圖,我們透過chrome瀏覽器示範一下:
(慢點,等gif圖載入完)
如上圖所示,一旦name的值被改變了,頁面上立刻跟著發生了變化,而不需要你再寫innerHTML去更新視圖了。
這就是Vue.js的資料驅動視圖。
3 雙向綁定
更方便的是,Vue.js也提供了方便的語法指令,實現視圖和資料的雙向綁定,也就是說,不但資料變化了可以驅動視圖,使用者在頁面上做了一些操作,也很方便地實現更新model層的資料。
範例:監聽使用者在頁面輸入框輸入的內容,然後將其實時更新在頁面上。
在Vue中我們使用v-model指令就可以輕鬆實現。 (v-model是什麼東西,先不用管,後面會有章節詳細介紹)。
<p id="app"> <input v-model="number"> <p>数字:{{ number }}</p> </p> <script> let vm = new Vue({ el:"#app", data:{ number:"", } }); </script>
效果如下面的動圖:
(慢點,等gif圖載入完)
案例中,我們不需要寫程式碼去監聽input控制項的內容變化,使用者輸入的內容,會即時更新vm實例中的data屬性number的值,一旦number更新了,視圖也會跟著更新了。因為這一切,都由Vue.js幫你完成了。
4 元件
上面的我們示範了Vu.jse的資料驅動,別忘了,上一節我們提到Vue.js還有一個重要的核心,就是:元件化。
元件化就是把頁面中特定的區塊獨立抽出來,並封裝成一個可方便重複使用的元件。
範例:假設,頁面上有多個一樣的卡片:
传统的办法,我们可以要写三份同样的HTML布局:
<p id="app"> <!--第1个卡片--> <p class="card"> <img src="logo.png" alt=""> <h2>web前端教程</h2> <p>这里是描述,很长的描述</p> <button>我是按钮</button> </p> <!--第2个卡片--> <p class="card"> <img src="logo.png" alt=""> <h2>web前端教程</h2> <p>这里是描述,很长的描述</p> <button>我是按钮</button> </p> <!--第3个卡片--> <p class="card"> <img src="logo.png" alt=""> <h2>web前端教程</h2> <p>这里是描述,很长的描述</p> <button>我是按钮</button> </p> </p>
如果我们把每个卡片看作一个可复用的区域的话,那么它就可以封装成一个组件。
在Vue.js中,我们试着把卡片封装成一个组件。
<p id="app"> <card></card> <card></card> <card></card> </p> <script> //注册一个名叫card的组件 Vue.component('card',{ template:`<p> <img src="logo.png" alt=""> <h2>web前端教程</h2> <p>这里是描述,很长的描述</p> <button>我是按钮</button> </p>` }); new Vue({ el:"#app" }); </script>
我们用Vue.component(tagName, options)注册了一个名字叫card的组件,这样,在需要复用这个组件的地方,我们只需要使用964759f9f39e815cf935a94673adce1a04ee71702759d3cc1d177dc6f313408c就可以了。实际开发中,组件比这个复杂得多,越复杂,封装后的便利性越高。
可能你会说,组件里面的显示的内容不可能全都一样。放心,Vue为组件提供了props属性来接受传递进来的参数,后面我们会有专门的章节来介绍组件的详细用法。
5 本节小结
看到这里,你已经了解了Vue.js的数据驱动和组件化两大核心了,你已经入门了。后面的章节都是围绕这两个核心点来展开讲解。
相关推荐:
以上是Vue.js簡易安裝與快速入門詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!