06-Vue核心-MVVM模型

每个 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>

    <script type="text/javascript">
        // 阻止 vue 在启动时生成生产提示
        Vue.config.productionTip = false

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

 

posted @ 2023-09-10 09:52  马铃薯1  阅读(21)  评论(0)    收藏  举报