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. 【Java基础】谈谈集合.List

    摘自:https://www.cnblogs.com/54chensongxia/p/11722828.html 目录 1. ArrayList 1.1 ArrayList的构造 1.2 add方法 ...

  2. ssm框架文件配置

    1 简介 Spring MVC (web level),采取 MVC 架构,意图取代麻烦的 Servlet 写法,简化 web 层 MyBatis (dao level),意图取代 jdbc 操作数据 ...

  3. mybatis plus table doesn't exists

    使用@TableName 注解即可 实际上就是建立bean与表名的连接

  4. 选题 Scrum立会报告+燃尽图 05

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/8749 一.小组情况组长:贺敬文组员:彭思雨 王志文 位军营 杨萍队名:胜 ...

  5. Hadoop之集群搭建

    准备 需要准备多台主机(已经安装并且配置好hadoop和jdk) 需要配置ssh免密服务 下面我们开始进行配置,拿到已经准备好的主机,主机名分别为: centos101 centos102 cento ...

  6. MongoDB与mysql的对比

    1.与Mql对照 MySQL MongoDB 说明 mysqld mongod 服务器守护进程 mysql mongo 客户端工具 mysqldump mongodump 逻辑备份工具 mysql m ...

  7. centos6 升级php版本

    配置yum源 追加CentOS 6.8的epel及remi源. # rpm -Uvh http://ftp.iij.ad.jp/pub/linux/fedora/epel/6/x86_64/epel- ...

  8. linux的awk使用

    awk统计password文件中,登陆shell为“/sbin/nologin”的用户个数 [root@localhost ~]# cat passwd | grep "/sbin/nolo ...

  9. VC中MessageBox与AfxMessageBox用法与区别

    一.MessageBox()用法 1.函数原型 Messagebox函数在Win32 API和MFC里的定义有区别. Win32 API的定义如下: int WINAPI MessageBox(    ...

  10. eclipse subclipse svn 插件安装使用

    一.在线安装 1.打开Eclipse,菜单栏中选择"Help"->"Install New SoftWare..." 2.在弹出的对话框中,点击" ...