首页 > 其他分享 >Vue的MVVM模型

Vue的MVVM模型

时间:2022-12-05 23:23:37浏览次数:41  
标签:Vue MVVM 模型 vm data 属性

MVVM模型                         1. M:模型(Model) :data中的数据                         2. V:视图(View) :模板代码                         3. VM:视图模型(ViewModel):Vue实例             观察发现:                         1.data中所有的属性,最后都出现在了vm身上。                         2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用。

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>理解MVVM</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body> 
        <!-- 准备好一个容器-->
        <div id="root">
            <h1>学校名称:{{name}}</h1>
            <h1>学校地址:{{address}}</h1>
            <!-- <h1>测试一下1:{{1+1}}</h1>
            <h1>测试一下2:{{$options}}</h1>
            <h1>测试一下3:{{$emit}}</h1>
            <h1>测试一下4:{{_c}}</h1> -->
        </div>
    </body>

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

        const vm = new Vue({
            el:'#root',
            data:{
                name:'哈哈哈',
                address:'北京',
            }
        })
        console.log(vm)
    </script>
</html>

 

 

只要是vm中有的属性,都能拿来直接用:

 

标签:Vue,MVVM,模型,vm,data,属性
From: https://www.cnblogs.com/anjingdian/p/16953873.html

相关文章

  • Vue之el与data的两种写法
    data与el的2种写法          1.el有2种写法                  (1).newVue时候配置el属性。     ......
  • Vue数据绑定
    Vue中有2种数据绑定的方式:          1.单向绑定(v-bind):数据只能从data流向页面。          2.双向绑定(v-model):数据不仅能......
  • vue3 webstorm 快捷新建组建模板
          <template><h1>${COMPONENT_NAME}</h1></template><scriptlang="ts"setup>import{reactive}from'vue';import{useRouter}from"vue......
  • 数据量大小和模型大小之间的关系
    作者:Henry链接:https://zhuanlan.zhihu.com/p/539233251来源:知乎1、从模型方面考虑。举例说明:本身问题是二次的,用线性模型处理问题就是欠拟合,用三次及更高次处理问题就是......
  • 网络编程基础(1)---OSI七层模型
    网络编程基础(1)心得学习网络编程的核心之一,作为程序员必须要掌握的东西虽在学校学过,同一个东西,初次学习和有经验后的学习感受确实不同需要明白自己在那一层做开发明......
  • Vue3 setup如何使用this.$xxx全局变量
    在vue2中,我们知道vue2.x是使用Vue.prototype.$xxxx=xxx来定义全局变量,然后通过this.$xxx来获取全局变量。但是在vue3中,这种方法显然不行了。因为vue3中在setup里面我们是......
  • Vue组件
    组件的使用使用import语法导入需要的组件使用components节点注册组件以标签形式使用刚才注册的组件全局组件:在main.js入口文件中,通过Vue.component()方法注册全局组......
  • vue实现路由懒加载
    1、安装插件@babel/plugin-syntax-dynamic-importnpminstall–-save-dev@babel/plugin-syntax-dynamic-import2、安装完成之后,打开babel.config.js文件,将@babel/p......
  • Vue2(笔记21) - 组件 - 组件的嵌套
    组件的嵌套官方的图中,就可以看出,组件之间是可以嵌套的;没有嵌套的组件为了方便,就直接把前面写好的拿来用了;<divid="root"><h1>{{msg}}</h1><hr><school></schoo......
  • 【Vue】ElementUI中el-tabs事件绑定的具体使用_vue.js
    tabs组件的属性tabs的属性tabs的事件tab-pane的属性标签代码<el-tabsv-model="activeName"><el-tab-panename="0"label="标签1"></el-tab-pane><e......