首頁 >web前端 >js教程 >Vue.js簡易安裝與快速入門詳解

Vue.js簡易安裝與快速入門詳解

小云云
小云云原創
2018-01-15 13:04:341381瀏覽

本文主要為大家詳細介紹了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(&#39;card&#39;,{
    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安装教程

vue.js实例对象和组件树实例详解

Vue.js组件通信实例分享

以上是Vue.js簡易安裝與快速入門詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn