vue.js（1）--创建vue实例的基本结构
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实例的基本结构的更多相关文章
- 【前端】vue.js环境配置以及实例运行简明教程
vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...
- vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)
第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...
- vue.js+webpack在一个简单实例中的使用过程demo
这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...
- vue.js最最最最简单实例
vue.js最最最最简单实例 一.总结 一句话总结: 1.vue.js实现实现数据的双向绑定用的是什么标记? 双大括号:比如{{message}} 2.vue数据循环输出的标记是什么? 用的是标签的v ...
- Vue.js 2 vs Vue.js 3的实现 – 云栖社区
Vue.js 2 vs Vue.js 3的实现 – 云栖社区 vue.js核心团队已经讨论过将在Vue3实现的变化.虽然API不会改变,但是数据响应机制(译者注:对数据改变的监听和通知)发生了变化.这 ...
- vue.js学习之入门实例
之前一直看过vue.js官网api,但是很少实践,这里抽出时间谢了个入门级的demo,记录下一些知识点,防止后续踩坑,牵扯到的的知识点:vue.vue-cli.vue-router.webpack等. ...
- vue 学前班002(创建一个实例)
创建一个Vue实例 我们之前说过,Vue是数据驱动视图的,只要model(模型层)的数据改变了,Vue就会帮我们改变视图上显示的内容,不用我们自己去动手写代码更新.那么,它是怎么做到的,我们的代码要怎 ...
- vue.js路由参数简单实例讲解------简单易懂
vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...
- 初学Vue.js，用 vue ui 创建项目会不会被鄙视
全栈的自我修养: 6使用vue ui进行vue.js环境搭建 It is only with the heart that one can see rightly. What is essential ...
- vue.js执行mounted的实例
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
随机推荐
- 【学习】SpringBoot之简介、特点、缺点、应用场景
Spring Boot 的介绍 SpringBoot的目的在于创建和启动新的基于Spring框架的项目.Spring Boot 会选择最合适的Spring子项目和第三方开源库进行整合.大部分Sprin ...
- LeetCode 148. 排序链表（Sort List）
题目描述 在 O(n log n) 时间复杂度和常数级空间复杂度下,对链表进行排序. 示例 1: 输入: 4->2->1->3 输出: 1->2->3->4 示例 ...
- SpringBoot 2.x 使用Redis作为项目数据缓存
一.添加依赖 <!-- 添加缓存支持 --> <dependency> <groupId>org.springframework.boot</groupId& ...
- [C#菜鸟]C# Hook (三) Windows常用消息大全
表A-1 Windows消息分布 消息范围 说 明 0 - WM_USER – 1 系统消息 WM_USER - 0x7FFF 自定义窗口类整数消息 WM_APP - 0xBFFF 应用程序自定义消 ...
- Android EditText弹出软键盘实现页面标题头不动，软键盘弹出在编辑框下面
为了实现EditText编辑的时候弹出软键盘标题头不动,底部编辑框,上移在这总结: RelativeLayout在弹出软键盘的时候先寻找android:layout_alignParentBottom ...
- Kettle使用教程之Job使用
1.Kettle的Job使用十分简单,这里也只是演示比较简单的操作,创建Job 2.点击转换,然后点击浏览,选择转换对象 3.执行按钮,运行该转换 4.如果需要长期的进行定时转换,可以在Job中的st ...
- 阶段3 2.Spring_06.Spring的新注解_7 spring整合junit问题分析
测试类重复代码的问题 这是之前的方式 运行findAll的方法,没有问题 测试人员不需要关心上面的方法,.应该关心的各个方法是否能够正常的运行 对于一个测试工程师,只要写完变量就可以测试了. 可以使用 ...
- 对docker一些认知
关于docker(应用容器引擎) docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化.容器是完全使用 ...
- Java学习之==>条件判断、循环控制
一.条件判断 1.if-else 示例: /** * 第1种,1个分支 */ public void case1() { int age = 15; if (age > 18) { System ...
- 数据科学中的R和Python: 30个免费数据资源网站
1 政府数据 Data.gov:这是美国政府收集的数据资源.声称有多达40万个数据集,包括了原始数据和地理空间格式数据.使用这些数据集需要注意的是:你要进行必要的清理工作,因为许多数据是字符型的或是有 ...