iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 3
1
自我挑戰組

前端新手筆記-Vue.js系列 第 3

Day3 Vue Instance(實體)介紹

上一篇文章我們簡單介紹了Vue的幾個重要特性(漸進式框架、MVVM、元件、載入方式)。若不清楚的話,可以點擊上篇觀看Day2 - Vue 基本介紹(漸進式框架、MVVM、元件)

OK,我們今天終於要進入正題,了解該如何撰寫Vue!

Vue Instance(實體)

每個 Vue.js 的應用程式都是從Vue建構式 (vue constructor) 建立根實體 (root vue instance) 開始,再一個個將元件搭建上去而來的。

Vue的實體是透過new關鍵字來建立

建立Vue Instance寫法1

使用 vue constructor 建立 vue instance「vm」,vm 為 view model 的簡稱

var vm = new Vue({
    //option object
});

建立Vue Instance寫法2

new Vue({
  el: '#app',
  data() {
    return {
      isShowing: false 
    }
});

了解了基礎寫法後,我們馬上來實作練習一下吧!
範例連結
HTML部分

<div id="app">
          {{text2}}
        </div>
        <div id="app2">
          {{text}}
        </div>

說明:我們這邊可以透過雙大括號{{}},來將vue實體的data資料呈現於畫面上
JavaScript部分

       //實體一
        var app = new Vue({
            el: '#app',
            data: {
              text: '這是一段話',
              text2:'這是第二段話'
            }
          })
        //實體二
          var app2 = new Vue({
            el: '#app2',
            data: {
              text: '妳好嗎?'
            }
          })     

補充:Chrome開啟console時,請記得先在Chrome上安裝Vue.js devtools套件,如此才能方便我們開發時,了解Vue Instance資料變化

小結論

兩者寫法都是可行,差異僅在於是否賦予一個值到變數上,而這個變數是可以用來以後取值使用。後面章節介紹(Vue Cli)時也會比較常寫法2。原因就是不太需要使用該變數做任何操作
補充:同一個頁面上可以建立兩個以上的Vue實體在是沒有問題,只是不能寫成巢狀結構

Vue實體基本屬性

圖片來源:五倍紅寶石Vue實戰課程

el&data

  • el:就是用來綁定網頁dom元素與Vue實體可以控制的範圍的媒介

但,當實體沒有el屬性,就只能透過vm.$mount()來進行手動掛載
備註:
1.這用法很少用,所以知道就好 文章參考
2.vm是指上面圖片宣告的變數(這邊是可以自定義)

  • Data: 用來存放實體綁定的資料
    實體內:透過this.XXX 取得資料
    實體外:透過Hello.$data.value 取得資料 Hello這個變數是可以自行命名

實體外指的就是下方Hello實體物件範圍外
在子元件內時,須以 function的形式來來回傳。

var Hello = new Vue({
      el: '#app',
      data: {
        value: 'Hi Vue!'
      }
    });
Hello.$mount().value  //"Hi Vue!"

備註:Data內屬性不可由$或_開頭 如:$abc、_abc

methods、watch、mounted、props、computed

這些屬性,我會在後面文章中搭配範例直接講解

傳入選項物件

當實體(Vue instance)被創建後,物件可以傳入包含el、data、methods、watch、mounted、props、computed

var vm = new Vue({
    el: '#app',
    data: {
    message:"hello vue.js!"
     },
    methods:{ //略    
}
});

擴充建構式

var component = Vue.extend({
    data: function(){
    return{ 
     message:'hello '
     }
   },
});
var cp = new component();
console.log(cp.message) //hello

data選項,需要注意在Vue.extend()中它必須是函數

介紹完Vue Instance後,明天將會介紹Vue生命週期,那我們明天見!


上一篇
Day2 - Vue 基本介紹(漸進式框架、MVVM、元件)
下一篇
Day4 - Vue 生命週期介紹
系列文
前端新手筆記-Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言