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存储过程及sql优化-（二）
接下来比较重要,我会先贴出一个存储过程,根据这个存储过程讲解 PROCEDURE AP_CXBB_GT3_SBFGL_SBFYJSQC (OUT_RECORD OUT SYS_REFCURSOR, P ...
- 作业要求20191010-3 alpha week 1/2 Scrum立会报告+燃尽图 01
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/8746 一.小组情况组长:贺敬文组员:彭思雨 王志文 位军营 杨萍队名:胜 ...
- weblogic报:java.lang.LinkageError: loader constraint violation in interface itable initialization
原因分析: gdaml服务中依赖org.apache.xerces_2.9.0.v201101211617.jar会产生jar包冲突 解决方法: 项目中的这个jar包删除,并将这个jar包放在服务器中 ...
- android 模糊背景 异型背景
模糊算法参考: http://blog.csdn.net/markl22222/article/details/10313565 网上很多,这东西是个概念理解,没有什么新鲜的. 轮子有现成的,模糊算法 ...
- vue指令之v-cloak
vue指令之v-cloak 一起学 vue指令 v-cloak 指令可看作标签属性 某些情况下可能由于机器性能故障或者网络原因,导致传输有问题,那么浏览器无法成功解析数据,此时浏览器输出的内容就是纯 ...
- 三步解决IDEA系列开发工具 RubyMine、IntelliJ IDEA 卡顿问题
近日有小伙伴跟我反映说自己的开发工具很卡,有没有什么解决方案?答案是当然有啦!接下来看看怎么设置! 1.打开RubyMine,或IDEA,上边工具栏选择Help,下拉选择Edit Custom VM ...
- java利用dom4j读取xml
java连接oracle数据库的时候, 需要从特定地方读取xml文件中的sql去get结果集, xml文件放在和java文件: SqlLoaderFromXML的目录下OracleSQL, xml文件 ...
- 删除delphi组件TStringlist中的重复项目
https://blog.csdn.net/ozhy111/article/details/87975663 删除delphi组件TStringlist中的重复项目 2019年02月27日 15:41 ...
- docker rm & docker rmi & docker prune 的差异
docker rm & docker rmi & docker prune 的差异 docker rm : 删除一个或多个 容器 docker rmi : 删除一个或多个 镜像 do ...
- linux判断httpd端口是否打开
判断端口是否打开 lsof -i:80 判断端口打开了几个 lsof -i:80 | wc -l