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 ...
随机推荐
- 使用oracle数据库的开发流程
- 【攻克RabbitMQ】常见问题
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/zlt995768025/article/ ...
- ActiveMQ配置文档
本文介绍一对一.一对多.持久化.非持久化消息配置方式 一.创建项目 导入jar 二.创建MQ.xml <!-- 配置JMS连接工厂 --> <bean id="connec ...
- android 播放音乐媒体文件（三）
看段小代码: mMediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC);mMediaPlayer.setDataSource(url);mM ...
- PDFCrop裁剪PDF文档使用方法
使用VISIO画图,然后生成PDF文档插入到LaTeX文档中,会出现黑边框的问题.通过对PDF文件进行裁剪可以去掉黑边框,之前我是通过Acrobat进行裁剪,后来激活失效了..只好找其他方法.今天发现 ...
- Ruby小白入门笔记之<Rails项目目录结构>
一 .流程分析 二.目录分析 DemoRails app (核心) assets (web前端所需文件) images (图片) javascripts (JS代码) styleshe ...
- Custom Configuration 的两种方法：2.XmlSerializer XmlAttribute
第二种:XmlSerializer XmlAttribute 1.CustomConfiguration.xml 2.CustomConfigurationSetting.cs 3.CustomCon ...
- 创建策略(Creation Policy )和生命周期(Life Cycle)
前言 在前面的介绍中我们已经知道:导入和导出的匹配成功需要ContractType,ContractName,Metadata都匹配,这里我们还要介绍一个新的东西:创建策略(creation poli ...
- 诺依/RuoYi开源系统搭建总结
问题一:从{码云}下载下来看,输入项目编码不过 解决方法: 加入下列依赖,版本要和下载下来的{spring-boot-dependencies}一致.不一致就会报问题2: <parent> ...
- Wireshark 学习笔记 Lebal：Research
学习Wireshark主要是为了契合我最近做的线性激光雷达项目,主要用于抓取数据包 首先是三本书比较值得一看,第一本是清华大学出版社的,侧重教学,第二三两本是人民邮电出版社的,其中第二本是许多课程的指 ...