vue提供了一整套前端解决方案,可以提升企业开发效率

vue的处理过程

app.js

项目入口,所有请求最先进入此模块进行处理

route.js

由app.js调用,处理路由的分发

controller.js

处理各种业务

model.js

执行增删改查crud(create、read、update、delete)

MVC

即model(M)、html(V)、route、controller(c)

MVVM

VM是连接M和V的中介角色,VM提供了数据的双向绑定,作为view的html展示数据时需要调用VM,VM调用model取数据再返回给html,html需要操作数据则调用VM,VM调用model来完成对数据的增删改查

创建vue对象

vue不需要调用类似inser的js方法将数据插入dom元素,你只需要指定需要dom元素的class或id,然后指定数据,它会自动对元素所包含的内容中的任何具有插值表达式的地方进行填充。下面是一个简单的示例:

<script src="Scripts/vue-2.4.0.js"></script>
<body>
    <div id="app">
        {{msg}} //插值表达式,可以写vue对象中的data的任何变量,也即只有绑定了vue对象的html元素,它内部才可以使用插值表达式,否则会被当成纯文本输出
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({ //vue对象就是MVVM中的VM中介者
        el: "#app",
        data: { //data里可以自定义任意的多个变量
            msg:"hello world!" //model
        }
    });
</script>

Javascript - 学习总目录

Javascript - Vue - vue对象的更多相关文章

  1. javascript 及 vue 中的变量前面的美元符号 $ 是什么意思

    $ 您会注意到,我们将库代理为以美元符号“$”为前缀的属性名. 你可能还看过其他的属性和方法,例如,$refs, $on, $mount等等也都是以”$”开头. 虽然属性名上添加前缀不是必须的,但是这 ...

  2. vue修改对象的属性值后页面不重新渲染

    原文地址:vue修改对象的属性值后页面不重新渲染 最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: [html] view plain copy &l ...

  3. 用TypeScript开发Vue——如何通过vue实例化对象访问实际ViewModel对象

    用TypeScript开发Vue--如何通过vue实例化对象访问实际ViewModel对象 背景 我个人很喜欢TypeScript也很喜欢Vue,但在两者共同使用的时候遇到一个问题. Vue的实例化对 ...

  4. Vue实例对象的数据选项

    前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...

  5. 创建Vue.js对象:我的第一个Vue.js输出信息

    <!DOCTYPE html><html><head><meta charset=”utf-8″><title>Vue第一条信息</t ...

  6. Vue实例对象的数据选项(火柴)

    前言 一般地,当模板内容比较简单的时候,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项. dat ...

  7. Vue源码学习二 ———— Vue原型对象包装

    Vue原型对象的包装 在Vue官网直接通过 script 标签导入的 Vue包是 umd模块的形式.在使用前都通过 new Vue({}).记录一下 Vue构造函数的包装. 在 src/core/in ...

  8. vue - vue

    一.vue - 介绍 vue的作者叫尤雨溪,中国人.自认为很牛逼的人物,也是我的崇拜之神. 关于他本人的认知,希望大家读一下这篇关于他的文章,或许你会对语言,技术,产生浓厚的兴趣.https://mp ...

  9. vue - vue基础/vue核心内容

    终于算是顺利进入vue了,确实也只有学了过后才知道,之前三过vue而不学,确实是对的,现在进来了一点都不后悔,ajax.node.js.promise.webpack.git等等确实是除了三大基础外还 ...

随机推荐

  1. 【Beta阶段】第一次Scrum Meeting!

    本次会议为第一次Scrum Meeting会议~ 会议时长:20分 会议地点:依旧是7公寓1楼会客室   昨日任务一览 明日任务一览 刘乾 预定任务:(未完成)#128 学习如何在Github上自动构 ...

  2. 【读书笔记】Linux内核设计与实现(第一章&第二章)

    http://pan.baidu.com/s/1hqYAZNQ OneNote做的笔记没法儿带着格式一起导进来.所以上传到百度云,麻烦老师下载一下了. 下次不再用OneNote.

  3. 每日scrum(4)

    今天是冲刺第4天,大家都忙着找大二的学弟学妹来点评来支持我们的软件. 遇到的问题主要是如何劝说学弟学妹选择我们的软件然后继续往下做. 任务看板: 燃尽图:

  4. 我是一个程序猿 ——《不是书评 :<我是一只IT小小鸟>》有感

    读了刘未鹏先生的文章<不是书评 :<我是一只IT小小鸟>>,产生了诸多共鸣,更明白了不少道理. 首先是一个很平常的现象,进度条效应,在操作移动终端上的软件时,如果没有进度条,人 ...

  5. 蜗牛慢慢爬 LeetCode 23. Merge k Sorted Lists [Difficulty: Hard]

    题目 Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity ...

  6. [转帖]Prometheus+Grafana监控Kubernetes

    原博客的位置: https://blog.csdn.net/shenhonglei1234/article/details/80503353 感谢原作者 这里记录一下自己试验过程中遇到的问题: . 自 ...

  7. MacOS 如何剪切文件

    MacOS 如何剪切文件 MacOS 剪切文件 command + C 复制 command + V 粘贴 删除 & 粘贴 在 Windows中 Ctrl + X 是剪切,MacOS中没有剪切 ...

  8. kubeadm安装部署kubernetes 1.11.3(单主节点)

    由于此处docker代理无法使用,因此,请各位设置有效代理进行部署,勿使用文档中的docker代理.整体部署步骤不用改动.谢谢各位支持. 1.部署背景 操作系统版本:CentOS Linux rele ...

  9. 【题解】 [SCOI2010]连续攻击游戏 (二分图匹配)

    原题目戳我 Solution: 方法很巧妙,我们把每个装备的属性 与 装备编号连起来 从1-10000跑二分图,如果出现断层,就退出,输出答案就好. memset清理bool快一点,int洛谷上超时了 ...

  10. Oracle 11g DRCP连接方式——基本原理

    学习Oracle是一个复杂.繁琐的过程.在浩如烟海的Oracle官方资料.新特性.MOS资料和各种Internal知识面前,我们总是觉得力不从心.不知所措.但是,这往往也就是我们不断坚持.积累和追寻的 ...