vue 學前班002(建立一個執行個體)

2023-06-09 13:33:52

建立一個Vue執行個體

我們之前說過，Vue是資料驅動視圖的，隻要model（模型層）的資料改變了，Vue就會幫我們改變視圖上顯示的内容，不用我們自己去動手寫代碼更新。那麼，它是怎麼做到的，我們的代碼要怎麼寫才能做到這一點。

答案是：Vue執行個體。

先確定你的項目安裝好Vue.js，官網可以看到

安裝好之後，我們來看看怎麼建立和使用Vue執行個體，我們把它分成 4 步走。

第1步建立文法

建立一個Vue執行個體的文法很簡單，如下：

<script>
      let vm = new Vue({});
   </script>

通過關鍵語句 new Vue( )我們就可以建立一個Vue執行個體：vm了。我們注意到了我們給Vue( )傳了一個參數選項，是一個空對象，我們接着往下看。

第2步設定資料

沒錯，我們就是利用上面的對象參數，來建立這個Vue執行個體wm的，比如，設定vm裡面的資料。

let vm = new Vue({
     //執行個體vm的資料
   data:{
          name: "張三",
          age :  21
     }
  });

寫法也很簡單，參數對象不再是一個空對象，它包含一個屬性：data，而data的值也是一個對象，這個對象就是我們給執行個體vm設定的資料了。比如：name為張三，age為21等等。

第3步挂載元素

建立了一個執行個體vm，設定了vm的資料後，我們怎麼把資料展示在視圖上呢這就要通過我們的挂載元素了。我們看看怎麼用：

視圖view部分：

<div id="app"></div>

視圖（html部分）上我們有一個id為”app”的div元素。

let vm = new Vue({
    //挂載元素
  el:'#app',
    //執行個體vm的資料
  data:{
        name: "張三",
        age :  21
    }
  });

我們看到參數中我們不但有屬性“data”，還多了個屬性：“el”，el參數提供一個在頁面上已經存在的DOM元素，作為我們執行個體vm的挂載目标。表示我們的執行個體vm和id為“app”的DOM節點就關聯起來了。

第4步渲染

執行個體vm建立好了，資料data有了，DOM節點也關聯起來了，最後一步，就是把vm的資料綁定到指定的視圖上了，也就是資料渲染。

<div id="app">
    我是{{ name }}，
  今年{{ age }}歲
  </div>

對，就是你看到的這麼簡單，我們隻需要用一個雙大括号：{{ }} 即可，你可以留意到，{{ name }} 和 {{ age }} 就是我們給執行個體vm設定的資料name和age，我們用{{ }}可以直接讀取到它們的值。

我們通路頁面，就會看到vm的資料data就會被成功地渲染出來：

（資料渲染成功）

就這樣，我們就成功地建立了一個vue執行個體。

5 本節小結

建立并使用一個Vue執行個體并不難，僅需4步走：

vue 學前班002(建立一個執行個體)

轉載于:https://www.cnblogs.com/ysshuai/p/7094206.html