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. 使用oracle数据库的开发流程

  2. 【攻克RabbitMQ】常见问题

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/zlt995768025/article/ ...

  3. ActiveMQ配置文档

    本文介绍一对一.一对多.持久化.非持久化消息配置方式 一.创建项目 导入jar 二.创建MQ.xml <!-- 配置JMS连接工厂 --> <bean id="connec ...

  4. android 播放音乐媒体文件(三)

    看段小代码: mMediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC);mMediaPlayer.setDataSource(url);mM ...

  5. PDFCrop裁剪PDF文档使用方法

    使用VISIO画图,然后生成PDF文档插入到LaTeX文档中,会出现黑边框的问题.通过对PDF文件进行裁剪可以去掉黑边框,之前我是通过Acrobat进行裁剪,后来激活失效了..只好找其他方法.今天发现 ...

  6. Ruby小白入门笔记之<Rails项目目录结构>

    一 .流程分析 二.目录分析 DemoRails app (核心) assets  (web前端所需文件) images       (图片) javascripts  (JS代码) styleshe ...

  7. Custom Configuration 的两种方法:2.XmlSerializer XmlAttribute

    第二种:XmlSerializer XmlAttribute 1.CustomConfiguration.xml 2.CustomConfigurationSetting.cs 3.CustomCon ...

  8. 创建策略(Creation Policy )和生命周期(Life Cycle)

    前言 在前面的介绍中我们已经知道:导入和导出的匹配成功需要ContractType,ContractName,Metadata都匹配,这里我们还要介绍一个新的东西:创建策略(creation poli ...

  9. 诺依/RuoYi开源系统搭建总结

    问题一:从{码云}下载下来看,输入项目编码不过 解决方法: 加入下列依赖,版本要和下载下来的{spring-boot-dependencies}一致.不一致就会报问题2: <parent> ...

  10. Wireshark 学习笔记 Lebal:Research

    学习Wireshark主要是为了契合我最近做的线性激光雷达项目,主要用于抓取数据包 首先是三本书比较值得一看,第一本是清华大学出版社的,侧重教学,第二三两本是人民邮电出版社的,其中第二本是许多课程的指 ...