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. python环境下安装virtualenv,virtualenvwrapper

    在使用 Python 开发的过程中,工程一多,难免会碰到不同的工程依赖不同版本的库的问题: 亦或者是在开发过程中不想让物理环境里充斥各种各样的库,引发未来的依赖灾难. 此时,我们需要对于不同的工程使用 ...

  2. CyclicBarrier源码阅读

    一种允许多个线程全部等待彼此都到达某个屏障的同步机制 使用 多个线程并发执行同一个CyclicBarrier实例的await方法时,每个线程执行这个方法后,都会被暂停,只有当最后一个线程执行完awai ...

  3. Shell执行脚本

    Shell作用是解释执行用户的命令,用户输入一条命令,Shell就解释执行这一条,这种方式称为交互式,但还有另一种执行命令的方式称为批处理方式,用户事先写一个Shell脚本,Shell可以一次把这些命 ...

  4. LeetCode 39. 组合总和（Combination Sum）

    题目描述 给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的数字可以无限 ...

  5. 让socket端口不被子进程继承

    有两个程序A,B A绑定端口8000,然后用system函数启动程序B,然后再把A杀掉,这个时候再重启A的时候会发现绑定端口失败, 原因是端口被B绑定了,实际上是被继承了,为了避免这种情况,需要对主s ...

  6. java远程调用中出现的问题（主要是在不同电脑之间出现的问题）

    1.在运行远程服务端之前,使用rmic命令操作impl 2.运行客户端出现time out,尝试ping服务器电脑不能成功.关闭服务器端防火墙,可ping成功. 3.显示连接失败,错误显示的ip不是自 ...

  7. PowerBuilder -- 连接sqlite

    1.注册表修改,将以下内容保存为.reg文件,然后双击执行,注:测试机器为win10 64位系统 Windows Registry Editor Version 5.00 [HKEY_LOCAL_MA ...

  8. EasyPHP(php集成环境)下载 v5.4.6官方安装版

    EasyPHP版本:12.1(32位) PHP版本:5.4.6 MYSQL版本:5.5.27 APACHE版本:2.4.2 下载地址请点击

  9. 阶段3 2.Spring_08.面向切面编程 AOP_1 AOP的概念

  10. python003

    一.列表 1.列表是有序的,列表的元素可以修改# list 类li=[1,22,'ss','zp',['qqqq',111,33,['eeeeeeeee'],'ddddd',True]] #通过lis ...