vue实例基本结构与MVVM框架

（1）vue实例基本结构

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>创建vue实例基本结构</title>

    <script src="../lib/vue.js"></script>

    <!-- 导入vue.js -->

</head>

<body>

    <div id="app">

        {{ msg }}

    </div>     //此处可在页面上显示啦啦啦啦啦

</body>

</html>

<script>

    var vm = new Vue({  //new出来的vm对象就是 vm层--调度者

        el:"#app",  //el为所要操控的HTML区域

        data:{

            msg:"啦啦啦啦啦"

        }  //data传入数据，无需操作dom来进行页面渲染

    })

    // 创建一个vue实例

</script>

（2）vue实例与MVVM结构对应关系

　　MVVM是前端视图层的概念，主要关注于视图层分离，即把前端视图层分为三部分：model、view、viewmodel。

1、M（model）层--保存每个页面的单独数据

　　vue实例的vm对象中的data完成了数据的存储，通过data传入数据，无需操作dom元素来进行页面渲染（框架不提倡操作dom元素）。

2、V（view）层--实例中对应的html区域

　　view层即每个页面的html结构。

3、VM（ViewModel）层--调度者

　　ViewModel层是MVVM结构的核心，是view和model之间的调度者，提供了数据的双向绑定，完成数据的中间处理工作。事例中定义的vm对象就是viewmodel（调度者）。

vue.js（1）--创建vue实例的基本结构的更多相关文章

  1. 【前端】vue.js环境配置以及实例运行简明教程

    vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...

  2. vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)

    第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...

  3. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  4. vue.js最最最最简单实例

    vue.js最最最最简单实例 一.总结 一句话总结: 1.vue.js实现实现数据的双向绑定用的是什么标记? 双大括号:比如{{message}} 2.vue数据循环输出的标记是什么? 用的是标签的v ...

  5. Vue.js 2 vs Vue.js 3的实现 – 云栖社区

    Vue.js 2 vs Vue.js 3的实现 – 云栖社区 vue.js核心团队已经讨论过将在Vue3实现的变化.虽然API不会改变,但是数据响应机制(译者注:对数据改变的监听和通知)发生了变化.这 ...

  6. vue.js学习之入门实例

    之前一直看过vue.js官网api,但是很少实践,这里抽出时间谢了个入门级的demo,记录下一些知识点,防止后续踩坑,牵扯到的的知识点:vue.vue-cli.vue-router.webpack等. ...

  7. vue 学前班002(创建一个实例)

    创建一个Vue实例 我们之前说过,Vue是数据驱动视图的,只要model(模型层)的数据改变了,Vue就会帮我们改变视图上显示的内容,不用我们自己去动手写代码更新.那么,它是怎么做到的,我们的代码要怎 ...

  8. vue.js路由参数简单实例讲解------简单易懂

    vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...

  9. 初学Vue.js，用 vue ui 创建项目会不会被鄙视

    全栈的自我修养: 6使用vue ui进行vue.js环境搭建 It is only with the heart that one can see rightly. What is essential ...

  10. vue.js执行mounted的实例

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

随机推荐

  1. C++入门经典-例5.12-动态内存的销毁

    1:当申请一块堆内存后,系统不会再程序执行时一句情况自动销毁它.若想释放该内存,则需要使用delete关键字.下面的代码中,可以看出堆和栈的不同.代码如下: // 5.12.cpp : 定义控制台应用 ...

  2. CentOS 7，使用yum安装Nginx

    https://www.centos.bz/2018/01/centos-7%EF%BC%8C%E4%BD%BF%E7%94%A8yum%E5%AE%89%E8%A3%85nginx/ 文章目录 [隐 ...

  3. 黑马lavarel教程---3、数据库和视图注意点

    黑马lavarel教程---3.数据库和视图注意点 一.总结 一句话总结: 使用其实都很简单,MVC的框架都很像,用的时候直接可以去看手册,这样才能记得住 1.数据库删除操作注意? 删非删:很多网站的 ...

  4. slub

    1.前言 在Linux中,伙伴系统(buddy system)是以页为单位管理和分配内存.但是现实的需求却以字节为单位,假如我们需要申请20Bytes,总不能分配一页吧!那岂不是严重浪费内存.那么该如 ...

  5. Python之标示符和关键字

    <1>标示符 开发人员在程序中自定义的一些符号和名称 标示符是自己定义的,如变量名 .函数名等 <2>标示符的规则 标示符由字母.下划线和数字组成,且数字不能开头 python ...

  6. Libvirt Live Migration 与 Pre-Copy 实现原理

    目录 文章目录 目录 Libvirt 的 Live Migration 网络数据传输层 控制层 通过 libvirt 库实现虚拟机迁移的示例 KVM 的预拷贝(Pre-Copy)Live Migrat ...

  7. 无界面上(linux)运行jmeter（2）

    无界面上(linux)运行jmeter 1.先在bin目录下面创建一个文件夹testplan用来存放脚本(.jmx文件),然后在创建一个文件夹testresult用来存放脚本执行后的结果(.jtl文件 ...

  8. 63不同路径II

    题目: 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” ).机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为“Finish”).现在考 ...

  9. 【内部】Fiddler设置代理请求的方式

    1.2 打开Fiiddler,设置如图步骤: 3.添加规则: 4.这里选择第三个选项: 5.选中^开始,空格结束的如图内容.复制你要代理的地址.如:http://wap.cmread.com/nap/ ...

  10. Docker面试题（二）

    什么是虚拟化? 虚拟化允许您在相同的硬件上运行两个完全不同的操作系统.每个客户操作系统都经历了引导,加载内核等所有过程.您可以拥有非常严格的安全性,例如,客户操作系统无法完全访问主机操作系统或其他客户 ...