應用程式創立

<div id="app">

{{text}}

</div>

var app = new Vue({

el: '#app',

data:{
text: 'Vue的第一句話'

}
})

結構當中必須要有
* el ：代表element的縮寫，用於資料綁定，Vue程序專門綁定的方法
這時候使用開發者工具可以看到<Root> ，這邊代表應用程式已經建立成功了

* Data ：用於資料呈現，使用{{ }}方式作呈現。綁定時也可以使用class。但是在vue當中一次只能綁定一個元素，所以還是使用id比較恰當

MVVM概念

<div id="app">

{{message}}
<div v-text="message"></div>

<input type="text" v-model="message">

</div>


<div id="app2”> //vue第2個程式，測試v-html使用

<div v-html="messageHtml"></div>

</div>


<script>
var app = new Vue({

el: '#app',

// 在此建立資料內容
data: {

message: '哈囉'
}
})


var app = new Vue({
//vue第2個程式，測試v-html使用

el: '#app2',
data: {

messageHtml: '<span>這邊是用標籤包進來的喔</span>'

}
})


</script>

* {{}} ： 花括號 ，Mustache

* v-model：透過 input 來修改顯示的內容，程式碼當中的message就是對應到data的message

* v-text：用於顯示資料，差別在於他是用文字的方式將message插到標籤當中上方是用{{}}呈現，
下方是用v-text

* v-htnl：用於顯示資料，可以將標籤給顯示出來

v-bind動態屬性

<div id="app">
<img v-bind:src="imgSrc" v-bind:class="className" alt="">
</div>

<script>
var app = new Vue({
el: '#app',
data: {

imgSrc: 'https://images.unsplash.com/photo-1479568933336-ea01829af8de?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d9926ef56492b20aea8508ed32ec6030&auto=format&fit=crop&w=2250&q=80',
className: 'img-fluid'

}
})
</script>

* v-bind：可以對資料進行動態綁定，在標籤當中”屬性"綁定功能，例如src 或是class