2、Vue构造器和扩展
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构造器和扩展的更多相关文章
- vue构造器以及实例属性
一.构造器 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({}); 2.实例化Vue时,需要传入一个参数(选项对象): 3.参数:选项对象可 ...
- 第3章-Vue.js 指令扩展 和 todoList练习
一.学习目标 了解Vue.js指令的实现原理 理解v-model指令的高级用法 能够使用Vue.js 指令完成 todoList 练习(重点+难点) 二.todoList练习效果展示 2.1.效果图展 ...
- vue构造器的内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- vue 安装sass扩展
1.创建一个基于 webpack 模板的新项目 $ vue init webpack myvue 1 2.在当前目录下,安装依赖 $ cd myvue $ npm install 1 2 3.安装sa ...
- Vue的思考扩展
1.Vue是如何实现数据双向绑定的 1.1.实现双向绑定的基本原理 数据驱动:Vue会通过Dircetives指令,对DOM做一层封装,当数据发生改变会通知指令去修改对应的DOM,数据驱动DOM变化, ...
- vue构造器注册UI组件
import ConfirmComponent from '../../components/confirm/index' import { mergeOptions } from '../plugi ...
- Vue使用的扩展
1.Bus(总线)实现非父子组件通信 Vue2.0提供了Vuex进行非父子组件之间的通信,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线. 实现代码示例: <div id=&quo ...
- vue开发chrome扩展,数据通过storage对象获取
开发chrome插件时遇到一个问题,那就是单文件组件的data数据需要从chrome提供的storage对象中获取,但是 chrome.storage.sync.get 方法是异步获取数据的,需要通过 ...
- vue - Vue路由(扩展)
忙里偷闲,还在学校,趁机把后面的路由多出来的知识点学完 十.缓存路由组件 让不展示的路由组件保持挂载,不被销毁 在我们的前面案例有一个问题,都知道vue的路由当我们切换一个路由后,另一个路由就会被销毁 ...
随机推荐
- 并发编程(五)--GIL、死锁现象与递归锁、信号量、Event事件、线程queue
一.GIL全局解释器锁 1.什么是全局解释器锁 GIL本质就是一把互斥锁,相当于执行权限,每个进程内都会存在一把GIL,同一进程内的多个线程,必须抢到GIL之后才能使用Cpython解释器来执行自己的 ...
- MySQL事务优化
====================事务特性 事务隔离级别 事务控制语句 MySQL优化==================== 事务的概念 事务指逻辑上的一组操作,组成这组操作的各个单元,要么全 ...
- Redis五大数据类型详解
关于Redis的五大数据类型,它们分别为:String.List.Hash.Set.SortSet.本文将会从它的底层数据结构.常用操作命令.一些特点和实际应用这几个方面进行解析.对于数据结构的解析, ...
- IDEA中如何导入一个maven项目并配置相关设置
导入一个maven项目参照如下链接 https://jingyan.baidu.com/article/b0b63dbf0c0ac04a49307078.html 要想启动这个导入的项目目前我所接触到 ...
- python3用turtle库进行绘制小猪佩奇图案
晚上闲着无事,深入学习这个turtle用法,就做了小猪佩奇图 附上代码: # coding: utf-8 #功能:绘画小猪佩奇 import turtle as t t.screensize(400, ...
- 【Linux】文件拷贝-Linux当前目录所有文件移动到上一级目录(转)
Linux当前目录所有文件移动到上一级目录 mv * ../
- HTTP协议之chunk,单页应用这样的动态页面,怎么获取Content-Length的办法
当客户端向服务器请求一个静态页面或者一张图片时,服务器可以很清楚的知道内容大小,然后通过Content-Length消息首部字段告诉客户端需要接收多少数据.但是如果是动态页面等时,服务器是不可能预先知 ...
- (二)STM32开发例程
1控制LED和继电器 除了 PA11和PA12其他都可以 void setup() { pinMode(PC13, OUTPUT); pinMode(PC14, OUTPUT); pinMode(PC ...
- ES6-Generator基础用法
Generator简介: 生成器,本身是函数,执行后返回迭代对象,函数内部要配合yield使用Generator函数会分段执行,遇到yield暂停. 使用Generator注意点:function 和 ...
- 第6课 nullptr_t和nullptr
一. nullptr与nullptr_t (一)nullptr_t是一种数据类型,而nullptr是该类型的一个实例.通常情况下,也可以通过nullptr_t类型创建另一个新的实例. (二)所有定义为 ...