vue應用程式件立起手式

el ⇒ element縮寫，用來與vue綁定

<div id="app">
  {{ text }}  <!--利用兩個大{}{}將VUE帶入-->
</div>

var app = new Vue ({
	el:'#app', //應用程式雨vue綁定方式!
	data{
		text: 'vue測試測試測試'
	}
})

在el綁定id後可以看見chrome套件中的vue有root代表，綁定成功

也可以使用class綁定效果不變!

一個網頁可以同時放入多個vue的應用程式，可以看見有3個root

vue一次只能綁定一個元素

vue不能建立巢狀應用程式，如下

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

var app = new Vue({
  el: "#app",
  data: {
    text: 'vue測試測試測試'
  }
})
var app2 = new Vue({
  el:'#app2',
  data:{
    text2: 'vue測試綁定2'
  }
})

console會出現錯誤

MVVM概念

模型模型是指代表內容的資料存取層（以資料為中心）。

視圖，視圖是用戶在螢幕上看到的結構、布局和外觀（UI）。