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. docker运行jpress

    1.前提安装好docker mkdir docker//建立工作文件夹 cd docker 2.下载tomcat镜像和jpress开源项目 docker pull docker pull hub.c. ...

  2. Spark学习（一）——Spark运行架构

    基本概念 在具体讲解Spark运行架构之前,需要先了解几个重要的概念: RDD:是弹性分布式数据集(Resilient Distributed Dataset)的简称,是分布式内存的一个抽象概念,提供 ...

  3. Win10无法修改编辑hosts文件

    Win10无法修改编辑hosts文件 一.总结 一句话总结: 这里我的问题是windows的某次更新中把hosts文件或者上级目录设置成了只读,在文件属性中去掉这个只读就好 后文的操作相当于是给文件添 ...

  4. 查询Oracle表空间使用情况

    ,),'990.99')||'%' "使用比(%)",F.TOTAL_BYTES "空闲空间(M)",F.MAX_BYTES "最大块(M)" ...

  5. CNN入门讲解-为什么要有最后一层全连接？

    原文地址:https://baijiahao.baidu.com/s?id=1590121601889191549&wfr=spider&for=pc 今天要说的是CNN最后一层了,C ...

  6. 【9】letter-spacing / box-shadow

    1.letter-spacing :增加或减少字符间的空白(字符间距),如:h1 {letter-spacing:2px} 2.box-shadow : box-shadow: 10px 10px 5 ...

  7. java：Review（J2ee）

    1.oracle: 1.1 增:insert into 删:delete from 改:update tablename set 查:select * from 1.2 聚合函数 max,min,av ...

  8. centos中切换图形与命令行界面

    1.在命令行的centos中安装图形化 配置本地源 [root@localhost yum.repos.d]# yum clean all [root@localhost yum.repos.d]# ...

  9. cocos2dx[3.2](8) 数学类Vec2/Size/Rect

    数学类Vec2.Size.Rect,是cocos2dx中比较常用的类. 比如设置图片位置,设置图片大小,两图片的碰撞检测等等. 比起2.x版本,在3.x中本质上其实没有太大的变化,主要的变化就是将全局 ...

  10. Python学习之表的数据类型

    数据类型 数值类型 类型 大小 范围(有符号) 范围(无符号)unsigned约束 用途 TINYINT 1 字节 (-128,127) (0,255) 小整数值 SMALLINT 2 字节 (-32 ...