Vue核心之MVVM模型

小凡喜编程

已于 2022-11-23 15:58:15 修改

阅读量341

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-11-22 14:06:09 首次发布

本文链接：https://blog.csdn.net/qq_61658398/article/details/127981318

版权

vue 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

1. M：模型(Model) ：对应data 中的数据
2. V：视图(View) ：模板
3. VM：视图模型(ViewModel) ： Vue 实例对象

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

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

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

观察发现：

1.data中所有的属性，最后都出现在了vm身上

2.vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入Vue-->
    <script type="text/javascript" src="../js/vue.js">
    </script>
</head>
<body>
    <!--
        MVVM模型：
            1. M：模型(Model) ：对应data 中的数据
            2. V：视图(View) ：模板
            3. VM：视图模型(ViewModel) ： Vue 实例对象
        观察发现：
            1.data中所有的属性，最后都出现在了vm身上
            2.vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用
    -->
    <!-- 创建一个容器 -->
    <div id ="app">
        <h1>学校名称：{{name}}</h1>
        <h1>学校地址：{{address}}</h1>
        <h1>测试一下1：{{1+1}}</h1>
        <h1>测试一下2：{{$options}}</h1>
        <h1>测试一下3：{{$emit}}</h1>
    </div>
    <script type="text/javascript">
    Vue.config.productionTip = false   // 阻止vue在启动时生成生产提示
    //创建Vue实例
    const  vm = new Vue({
        el:'#app',
        data() {
            return {
                name:'阳光小学',
                address:'阳光大道',
                a:1
            }
        },
    })
    console.log(vm)
    </script>
</body>
</html>

小凡喜编程

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue核心之MVVM模型

2.vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。1.data中所有的属性，最后都出现在了vm身上。3. VM：视图模型(ViewModel) ： Vue 实例对象。，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用。(ViewModel 的缩写) 这个变量名表示 Vue 实例。1. M：模型(Model) ：对应data 中的数据。2. V：视图(View) ：模板。每个 Vue 应用都是通过用。
复制链接

扫一扫