Vue全局API总结】的更多相关文章

1.extend用于创建一个子类Vue,用$mount来挂载 <body> <div id="app"></div> <script> const app=Vue.extend({ template:'<p>{{a}} {{b}} {{c}}</p>', data:function(){ return { a:'Welcome', b:"To", c:"BeiJing" }…
一.Vue.extend() 顾名思义  extend  继承,官方给出的解释是   (使用基础 Vue 构造器,创建一个“子类”.参数是一个包含组件选项的对象.) Vue构造器是指  vue是一个构造函数, 所以在编写代码的时候被称之为构造器 Vue.extend()  看起来和new Vue() 有点像 他们的区别在于 new Vue是一个实例 vue.extend 组件构造器 需要传入component进行注册 vue.component直接注册组件内部已经自动构造了 <div id=ap…
vue 源码详解(一):原型对象和全局 API的设计 1. 从 new Vue() 开始 我们在实际的项目中使用 Vue 的时候 , 一般都是在 main.js 中通过 new Vue({el : '#app , ...options}) 生成根组件进行使用的, 相关的配置都通过 options 传入. Vue 的原型对象会帮我们初始化好很多属性和方法, 我们可以通过 this.property 直接调用即可: 而 Vue 这个类也通过类的静态方法初始化了一些全局的 api, 我们可以通过类名直…
1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装完成后在命令行执行以下命令查看npm包管理器版本 npm -v npm中文文档:https://www.npmjs.cn/ 配置淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org 然后执行 cnpm -v 查看版本信…
全局api方法 1.Vue.extend(options) 请注意,extend创建的是一个组件构造器,而不是一个具体的组件实例.所以他不能直接在new Vue中这样使用: new Vue({components: fuck}) 最终还是要通过Vue.components注册才可以使用的. // 创建构造器 var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',…
Vue源码探究-全局API 本篇代码位于vue/src/core/global-api/ Vue暴露了一些全局API来强化功能开发,API的使用示例官网上都有说明,无需多言.这里主要来看一下全局API模块的实现.全局API的文件夹里有一个入口文件,各个功能分开定义,在这个入口文件中统一注入. 入口文件index.js /* @flow */ // 从各个模块导入功能函数 import config from '../config' import { initUse } from './use'…
3.全局API 3-1. Vue.directive 自定义指令 Vue.directive用于自定义全局的指令 实例如下: <body> <div id="app"> <p v-sq="color">{{message}}</p> </div> </body> <script> Vue.directive('sq', function (el, binding, vnode) {…
本文介绍的全局api并不在Vue的构造函数内,而是在Vue构造器外面提供这些方法,让我们扩展新功能. 1. vue.extend(options) 参考:https://www.w3cplus.com/vue/vue-extend.html   1 vue在创建vue实例会经过以下四个过程: 使用vue.extend创建实例也是相似的: <!DOCTYPE html> <html lang="en"> <head> <meta charset=…
1.Vue.extend(options) 构造器,创建一个 子类 .参数是一个包含组件选项的对象 data 选项是特例,需要注意 在 Vue.extend() 中它必须是一个函数, <div id="test"></div> // 创建构造器 let MyTest = Vue.extend({ template: '<p>{{name}} {{age}}</p>', data(){ return { name: 'zhangning',…
目标 深入理解以下全局 API 的实现原理. Vue.use Vue.mixin Vue.component Vue.filter Vue.directive Vue.extend Vue.set Vue.delete Vue.nextTick 源码解读 从该系列的第一篇文章 Vue 源码解读(1)-- 前言 中的 源码目录结构 介绍中可以得知,Vue 的众多全局 API 的实现大部分都放在 /src/core/global-api 目录下.这些全局 API 源码阅读入口则是在 /src/cor…