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. Leetcode周赛165

    目录 找出井字棋的获胜者 思路 代码 不浪费原料的汉堡制作方案 思路 代码 统计全为 1 的正方形子矩阵 思路 代码 分割回文串 III 思路 代码 找出井字棋的获胜者 思路 模拟. 代码 class ...

  2. CentOS6.10部署的Tomcat8.5启动后,浏览器访问不到的解决方法

    解决过程如下: 一.关闭 selinux 和 iptables 防火墙 二.查看 tomcat 是否在运行 ps aux |grep tomcat 三.查看端口情况 lsof -i:8080 查看后都 ...

  3. 201871010126 王亚涛 《面向对象程序设计(java)》 第四周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  4. mysql解析binlog日志

    binlog日志用于记录所有更新了数据或者已经潜在更新了数据(例如,没有匹配任何行的一个DELETE)的所有语句.语句以“事件”的形式保存,它描述数据更改.因为有了数据更新的binlog,所以可以用于 ...

  5. 网站调试时记得关闭火狐adblock插件

    由于特殊需要,xmyanke需要在网站右侧添加一个弹窗,第一个网站加上代码后可以正常显示,第二个网站却怎么也看不到图片,同样的安装方法为什么差别那么大呢?重新复制代码还是不行,再试一遍,依然如此,wi ...

  6. flask获取get请求传过来的数组

    robots = request.args.getlist("robots[]")

  7. chromedriver对应chrome版本

    chromedriver版本 支持的Chrome版本 v2.41 v67-69 v2.40 v66-68 v2.39 v66-68 v2.38 v65-67 v2.37 v64-66 v2.36 v6 ...

  8. Anaconda3(0)环境基本使用

    https://blog.csdn.net/u012005313/article/details/82347817 主要内容: 查看环境列表 创建新的 Python 环境 激活/停止 Python 环 ...

  9. ESA2GJK1DH1K基础篇: 来吧! 彻底了解一下MQTT

    首先你需要知道MQTT并不是什么高大上的事物,它只是一个软件,对就是一个软件.其实就是个TCP服务器 一,既然是TCP服务器,这个TCP服务器和咱平时做的有什么不一样呢. 首先,平时的时候咱做的TCP ...

  10. 【转】C++ 异常机制分析

    阅读目录 C++异常机制概述 throw 关键字 异常对象 catch 关键字 栈展开.RAII 异常机制与构造函数 异常机制与析构函数 noexcept修饰符与noexcept操作符 异常处理的性能 ...