06-MVVM模型-JZTXT

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

const vm = new Vue({
  // 选项
})

Vue 的设计虽然没有完全遵循 MVVM模型，但是也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

MVVM模型

M：模型（Mdel），对应Vue的data数据

V：视图（View），对应Vue的模板代码

VM：视图模型（ViewModel），对应Vue实例对象

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Vue中的MVVM</title>
      <!--  引入Vue  -->
      <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <h1>学校名称：{{name}}</h1>
      <h1>学校地址：{{adress}}</h1>
    </div>
  </body>
  <script type="text/javascript">
    // 阻止 vue 在启动时生成生产提示
    Vue.config.productionTip = false

    const vm =new Vue({
      el:"#root",
      data(){
        return{
          name:"东华理工大学",
          adress:"江西省南昌市东华理工大学广兰校区"
        }
      }
    })
  </script>
</html>