1、VUE构造器简介

VUE构造器是一个非常重要的语法。

每个Vue.js应用都是通过构造函数Vue创建一个根实例。

New了Vue对象，然后调用了这个vue对象的构造器，并向构造器传入了数据。

在实例化Vue时，需要传入一个JSON对象，它可以包含数据、模板、挂在元素、方法、回调函数等选项，全部的选项可以在API文档中查看。

2、Vue代码中寻找MVVM

既然VUE是MVVM架构的，我们已经找到了Model和View层，那么ViewModel是在哪里呢？

我们看一下这个文件 vue.js，这个是从vue官网上下载的。

我们知道，控制器要监控视图，也要监控模型，当视图发生变化，控制器会及时通知模型层，同理，模型层发生变化，控制器会及时通知视图层。

那么下面的这个vue对象是不是就是控制器呢？

我们可以看出，这个vue对象通过el属性监控视图层，通过data监控模型层，那么就说明这个vue对象就是控制器。

所以我们得出一个结论：控制器就是vue对象，他在vue.js创建。

Vue.js已经定义好了控制器，因此我们开发人员不会修改此文件，增加什么东西，所以我们在开发vue程序时，我们只是会写 视图层和模型层的代码。

 

3、构造器扩展

Vue的构造器可以被扩展使用，这样就免去了重复定义构造器的很多内容。

我们以一个增加字母大写转换的过滤器为例说明：

显示效果：

2、Vue构造器和扩展的更多相关文章

  1. vue构造器以及实例属性

    一.构造器 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({}); 2.实例化Vue时,需要传入一个参数(选项对象): 3.参数:选项对象可 ...

  2. 第3章-Vue.js 指令扩展 和 todoList练习

    一.学习目标 了解Vue.js指令的实现原理 理解v-model指令的高级用法 能够使用Vue.js 指令完成 todoList 练习(重点+难点) 二.todoList练习效果展示 2.1.效果图展 ...

  3. vue构造器的内容

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. vue 安装sass扩展

    1.创建一个基于 webpack 模板的新项目 $ vue init webpack myvue 1 2.在当前目录下,安装依赖 $ cd myvue $ npm install 1 2 3.安装sa ...

  5. Vue的思考扩展

    1.Vue是如何实现数据双向绑定的 1.1.实现双向绑定的基本原理 数据驱动:Vue会通过Dircetives指令,对DOM做一层封装,当数据发生改变会通知指令去修改对应的DOM,数据驱动DOM变化, ...

  6. vue构造器注册UI组件

    import ConfirmComponent from '../../components/confirm/index' import { mergeOptions } from '../plugi ...

  7. Vue使用的扩展

    1.Bus(总线)实现非父子组件通信 Vue2.0提供了Vuex进行非父子组件之间的通信,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线. 实现代码示例: <div id=&quo ...

  8. vue开发chrome扩展,数据通过storage对象获取

    开发chrome插件时遇到一个问题,那就是单文件组件的data数据需要从chrome提供的storage对象中获取,但是 chrome.storage.sync.get 方法是异步获取数据的,需要通过 ...

  9. vue - Vue路由（扩展）

    忙里偷闲,还在学校,趁机把后面的路由多出来的知识点学完 十.缓存路由组件 让不展示的路由组件保持挂载,不被销毁 在我们的前面案例有一个问题,都知道vue的路由当我们切换一个路由后,另一个路由就会被销毁 ...

随机推荐

  1. python之pip安装软件包常用命令

    # pip版本号查询 pip -V # 安装软件包.格式:pip install 软件包名 pip install pygame # 安装指定版本号的软件包.格式:pip install 软件包==软 ...

  2. tomcat server.xml 中 host 元素

    测试偶然发现: <Host name="127.0.0.1" appBase="webapps" unpackWARs="true" ...

  3. qtcreator VLD内存检测

    简介 Visual Leak Detector是一款用于Visual C++的免费的内存泄露检测工具.相比较其它的内存泄露检测工具,它在检测到内存泄漏的同时,还具有如下特点: 可以得到内存泄漏点的调用 ...

  4. 是否忘记了向源中添加“#include "StdAfx.h"”?

    错误分析 此错误发生的原因是编译器在寻找预编译指示头文件(默认#include "stdafx.h")时,文件未预期结束.没有找到预编译指示信息的头文件"stdafx.h ...

  5. （原）ubuntu中C++调用libotrch

    转载请注明出处: https://www.cnblogs.com/darkknightzh/p/11479240.html 参考网址: https://pytorch.org/tutorials/ad ...

  6. unity texture贴图纹理

    文章内一些内容引用自作者:Aimar_Johnny http://blog.csdn.net/lzhq1982/article/details/75045358 导入png图片,默认显示如下 Text ...

  7. rpm 子包创建学习

    rpm 在打包的时候,可以创建子包,这样可以清晰的进行软件包的拆分,以下是结合官方文档学习 的一个实践 预备条件 需要安装rpmdevtools spec 文件 内容 Name: foo Versio ...

  8. python yield实现协程(生产者-消费者)

    def customer(): r="" while True: n=yield r#,接收生产者的消息,并向消费者发送r print("customer receive ...

  9. three.js 居中-组

    原文:https://blog.csdn.net/qq_30100043/article/details/78921224 代码: <!DOCTYPE html> <html lan ...

  10. 洛谷[SHOI2002]滑雪题解

    什么破题啊 简直就是浪费我时间! 我每天还被我xf定目标了不知道嘛! 题目 朴素的搜索只能得90分 #include <cstdio> #include <iostream> ...