vue學習筆記【一、理解MVVM】

理解MVVM：以.vue文件爲例

一個.vue文件就是一個組件，一個組件就是一個小的MVVM。

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <label><input type="text" v-model="msg" /></label>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
  	return {
  		msg:"學習vue...."
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

V：視圖

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <label><input type="text" v-model="msg" /></label>
  </div>
</template>

VM：實例，實現業務邏輯

<script>
export default {
  name: 'HelloWorld',
  data(){
  	return {
  		msg:"學習vue...."
  	}
  }
}
</script>

M：存放數據

將數據掛載到VM上，體現在文件中是：

data(){
  	return {
  	    msg:"學習vue...."
}

總結：V與VM之間是雙向的，當V內容改變後，VM會及時監聽到V，並做出相應改變。但是這並不意味着數據流是雙向的。