精华内容
参与话题
问答
  • Vue全局方法 Vue.extend

    2019-06-14 13:36:23
    Vue.extend属于 Vue 的全局 API,在实际业务开发中我们很少使用,因为相比常用的Vue.component写法使用extend步骤要更加繁琐一些。但是在一些独立组件开发场景中,Vue.extend+$mount这对组合是我们需要去关注的。 ...

    文章转自: https://www.cnblogs.com/hentai-miao/p/10271652.html

     

    Vue.extend 属于 Vue 的全局 API,在实际业务开发中我们很少使用,因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中,Vue.extend + $mount 这对组合是我们需要去关注的。

    官方文档

    学习开始之前我们先来看一下官方文档是怎么描述的。

    Vue.extend( options )

    • 参数

      • {Object} options
    • 用法

      使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。

      data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数

      <div id="mount-point"></div>
      // 创建构造器
      var Profile = Vue.extend({
        template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
        data: function () {
          return {
            firstName: 'Walter',
            lastName: 'White',
            alias: 'Heisenberg'
          }
        }
      })
      // 创建 Profile 实例,并挂载到一个元素上。
      new Profile().$mount('#mount-point')

      结果如下:

      <p>Walter White aka Heisenberg</p>
    • 参考组件

    可以看到,extend 创建的是 Vue 构造器,而不是我们平时常写的组件实例,所以不可以通过 new Vue({ components: testExtend }) 来直接使用,需要通过 new Profile().$mount('#mount-point') 来挂载到指定的元素上。

    为什么使用 extend

    在 vue 项目中,我们有了初始化的根实例后,所有页面基本上都是通过 router 来管理,组件也是通过 import 来进行局部注册,所以组件的创建我们不需要去关注,相比 extend 要更省心一点点。但是这样做会有几个缺点:

    1. 组件模板都是事先定义好的,如果我要从接口动态渲染组件怎么办?
    2. 所有内容都是在 #app 下渲染,注册组件都是在当前位置渲染。如果我要实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它,该怎么办?

    这时候,Vue.extend + vm.$mount 组合就派上用场了。

    简单示例

    我们照着官方文档来创建一个示例:

    import Vue from 'vue'
    
    const testComponent = Vue.extend({
      template: '<div>{{ text }}</div>',
      data: function () {
        return {
          text: 'extend test'
        }
      }
    })

    然后我们将它手动渲染:

    const extendComponent = new testComponent().$mount()

    这时候,我们就将组件渲染挂载到 body 节点上了。

    我们可以通过 $el 属性来访问 extendComponent 组件实例:

    document.body.appendChild(extendComponent.$el)

    如果想深入掌握 extend 知识,不妨做一个 alert 组件来实现类似于原生的全局调用。

    加油!

    展开全文
  • vue笔记系列第三篇】Vue.extend使用

    千次阅读 2019-04-04 12:42:31
    1.1,Vue.extend返回的是一个扩展实例构造器,也就是预设了部分选项的Vue实例构造器。 1.2,其主要用来服务于Vue.component,用来生成组件 可以简单的理解为当在模板中遇到该组件名称作为标签的自定义元素时,会...

    一,概述

    1,定义

    1.1,Vue.extend返回的是一个扩展实例构造器,也就是预设了部分选项的Vue实例构造器。

    1.2,其主要用来服务于Vue.component,用来生成组件

    可以简单的理解为当在模板中遇到该组件名称作为标签的自定义元素时,会自动调用扩展实例构造器来生产组件实例,并挂载到自定义元素上。

    1.3,vue构造器生命周期

     

    2,栗子
    我们希望在html中只需要写<baidu></baidu>就可以显示百度,并添加百度链接 ,这和自定义组件很像,但是他没有传递任何参数,只是个静态标签。

    <html>
    <head>
        <title>Vue.extend扩展实例构造器</title>
    </head>
    <body>
        <baidu></baidu>
        <!-- <span id='baidu'>跳转</span> -->
        <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
        <script type="text/javascript">
    
            //使用Vue.extend,用它来编写一个扩展实例构造器。
            var baiduExtend=Vue.extend({
                template:"<p><a :href='bdurl'>{{bdname}}</a></p>",
                data:function(){
                    return {
                        bdname:'百度',
                        bdurl:'https://www.baidu.com'
                    }
                }
            })
            //扩展实例构造器是需要挂载的,我们再进行一次挂载
            new baiduExtend().$mount('baidu');
            //还可以通过HTML标签上的id或者class来生成扩展实例构造器,Vue.extend里的代码是一样的
            // new baiduExtend().$mount('#baidu');
        </script>
    </body>
    </html>

    3,效果

    二,分析

    1,官方api地址

    https://cn.vuejs.org/v2/api/#Vue-extend

    1.1 页面

     

    2,实验

    2.1 html元素

    <div id="mount-point"></div>

    2.2 js写法

    构造

    var Profile = Vue.extend({
    	template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
    	data: function () {
    		return {
    			firstName: 'Walter',
    			lastName: 'White',
    			alias: 'Heisenberg'
    		}
    	}
    })

    绑定到元素上

    // 创建 Profile 实例,并挂载到一个元素上。
    new Profile().$mount('#mount-point')

     2.3 html全文

    <html>
    <head>
        <title>Vue.extend扩展实例构造器</title>
    </head>
    <body>
        <div id="mount-point"></div>
        <!-- <span id='baidu'>跳转</span> -->
        <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
        <script type="text/javascript">
    		// 创建构造器
    		var Profile = Vue.extend({
    			template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
    			data: function () {
    				return {
    					firstName: 'Walter',
    					lastName: 'White',
    					alias: 'Heisenberg'
    				}
    			}
    		})
    		// 创建 Profile 实例,并挂载到一个元素上。
    		new Profile().$mount('#mount-point')
        </script>
    </body>
    </html>

    2.4 效果

    三,总结

    vue.extend就是一个扩展构造器。可以对自定义标签进行更容易的数据绑定

    展开全文
  • vue构造、vue组件和vue实例这三个是不同的概念,它们的关系有点类似于Java的继承概念: 关系:vue构造-&gt;vue组件-&gt;vue实例 也就是说不同的vue组件可以共用同一个vue构造,不同的vue实例可以共用同一...

    vue构造、vue组件和vue实例这三个是不同的概念,它们的关系有点类似于Java的继承概念:

    关系:vue构造->vue组件->vue实例

    也就是说不同的vue组件可以共用同一个vue构造,不同的vue实例可以共用同一个vue组件。在大型项目中,用过java开发的都知道,继承是非常重要的,前端也一样。我们先看看他们之间的实现代码区别:

    <script>
    	//vue构造
    	Vue.extend({
    		props: [],
    		data: function() {
    			return {}
    		},
    		template: ""
    
    	});
    	
    	//vue组件
    	Vue.component("mycomponent", {
    		props: [],
    		data: function() {
    			return {}
    		},
    		template: ""
    	});
    	
    	//vue实例
    	new Vue({
    		el: "",
    		data: {}
    	});
    </script>

    从上面的代码可以看出,vue构造和vue组件所需的部分初始化结构参数是一样的,这意味着vue实例可以直接跳过vue组件直接使用vue构造对自身组件初始化,也就是vue构造->vue实例,下面是三种API的区别:

    vue.extend

    特点:

    1.只能通过自身初始化结构

    使用范围:

    1.挂载在某元素下

    2.被Vue实例的components引用

    3.Vue.component组件引用

    <div id="app2"></div>
    <script>
    	var apple = Vue.extend({
    		template: "<p>我是构造函数创建:自身参数:{{a}}|外部传参:{{b}}</p>",
    		data: function() {
    			return {
    				a: "a"
    			}
    		},
    		props: ["b"]
    	});
    
    	//挂载构造函数
    	new apple({
    		propsData: {
    			b: 'Vue.extend'
    		}
    	}).$mount('#app2');
    </script>

    运行结果:

    我是构造函数创建:自身参数:a|外部传参:Vue.extend。

    Vue.component

    特点:

    1.可通过自身初始化组件结构

    2.可通过引入Vue.extend初始化组件结构

    3.可通过第三方模板temple.html初始化组件结构

    使用范围:

    任何已被vue初始化过的元素内

    <div id="app3">
    	<applecomponent v-bind:b="vparam"></applecomponent>
    	<mycomponent v-bind:b="vparam"></mycomponent>
    	<templecomponent v-bind:b="vparam"></templecomponent>
    </div>
    
    <script>
    	//方法1 【引入构造】
    	Vue.component('applecomponent', apple);
    	//方法2 【自身创建】
    	Vue.component("mycomponent", {
    		props: ["b"],
    		data: function() {
    			return {
    				a: "a"
    			}
    		},
    		template: "<p>我是vue.component创建 自身参数:{{a}}|外部传参:{{b}}</p>"
    	});
    	//方法3 第三方模板引入,可参照上一篇文章
    	Vue.component('templecomponent', function(resolve, reject) {
    		$.get("./../xtemplate/com.html").then(function(res) {
    			resolve({
    				template: res,
    				props: ["b"],
    				data: function() {
    					return {
    						a: "a"
    					}
    				}
    			})
    		});
    	});
    	var app3 = new Vue({
    		el: "#app3",
    		data: {
    			vparam: "Vue.component"
    		}
    	});
    </script>

    运行结果:

    我是构造函数创建:自身参数:a|外部传参:Vue.component
    我是vue.component创建 自身参数:a|外部传参:Vue.component
    我是导入模板 自身参数:a|外部入参:Vue.component


    new Vue

    this.$options.key表示其自定义属性值,this.$??表示系统属性值,如this.$el

    特点:

    1.可以通过自身components引用Vue.extend构造,通过自身data向构造传参

    2.可以通过自身components引用组件模板,通过自身data向组件传参

    使用范围:

    1.仅限于自身

    <div id="app1">
    	<dt1></dt1>
    	<vueapple v-bind:b="msg"></vueapple>
    </div>
    
    <script type="text/x-template" id="dt1">
    	<div>这里是子组件1</div>
    </script>
    
    <script>
    	new Vue({
    		el: "#app1",
    		data: {
    			msg: "vue实例参数"
    		},
    		components: {
    			dt1: {
    				template: "#dt1"
    			},
    			vueapple: apple //【引入构造】
    		}
    	});
    </script>

    运行结果:

    这里是子组件1
    我是构造函数创建:自身参数:a|外部传参:vue实例参数

     

    展开全文
  • vue extend使用

    2020-11-17 20:46:49
    需求: 界面中有些需求是需要在很多不同界面用js打开同一个界面 这个时候再用vue传统模板就比较繁琐了,所以用vue.extend()API。 弹框页面 传递过来的数据实在生成页面后传递的所以直接获取不到 要在界面更新去取 ...

    前言

    需求: 界面中有些需求是需要在很多不同界面用js打开同一个界面 这个时候再用vue传统模板就比较繁琐了,所以用vue.extend()API。


    弹框页面 传递过来的数据实在生成页面后传递的所以直接获取不到 要在界面更新去取

    在这里图片描述

    js界面 引入页面生成并将传递过来的值赋值到页面中去

    在这里插入图片描述

    界面调用弹框 因为里面是回调this指向不一样所以在外面确定this

    在min.js挂载 这里有个引用坑 在weabpack中配置默认是取index.vue


    在这里插入图片描述

    在这里插入图片描述

    这里有个坑 页面通过js调用打开这个界面传递过来的数据不会被data监听 所以发生会数据更改界面不更改 用set可以处理(最后两个箭头 1代表错误)

    在这里插入图片描述

    总结

    提示:这里对文章进行总结:
    例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

    展开全文
  • vue.extend()写全局组件(插件)

    千次阅读 2019-06-13 15:07:03
    extend创建的是一个组件构造器,而不是一个具体的组件实例 创建一个myToast.vue文件: <template> <div class="wrap" v-if="show"> <div>{{text}}</div> <div>{{title}}</div&...
  • 关于vue.extendvue.component的区别浅析

    万次阅读 2018-02-06 16:44:39
    关于vue.extendvue.component的区别浅析 转载 2017-08-16 投稿:daisy 我要评论 最近工作中遇到了vue.extend,vue.component,但二者之间的区别与联系是什么呢?下面这篇文章主要给大家介绍了关于vue.extend和...
  • vueextend用法

    千次阅读 2019-05-04 20:10:08
    通过extent拓展全局组件 首先在MessageBox.vue中做好模板 <template> <div class="MessageBox"> <h3>{{ title }}</h3> <p>{{ message }}</p> <div> ...
  • vue extend 的基本使用

    千次阅读 2019-03-26 14:32:13
    vue extend 的基本使用 vue.extend 局部注册的应用2 请注意,extend创建的是一个组件构造器,而不是一个具体的组件实例。所以他不能直接在new Vue中这样使用:new Vue({components: fuck}) 最终还是要通过Vue....
  • vue.extend(),自己的小理解

    千次阅读 2019-07-24 09:59:12
    1、Vue.extend()官网的解释 使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。 2、个人理解认识 Vue.extend({ template:'<h1>......</h1>', data(){} }) 通过他构建...
  • VueVue.extend() 详解及使用

    千次阅读 2020-07-20 23:44:03
    Vue.extend 属于 Vue 的全局 API,在实际业务开发中我们很少使用,因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中,Vue.extend + $mount 这对组合是我们需要去...
  • is 预期:string | Object (组件的选项对象) 用于动态组件且基于 DOM 内模板的限制来工作 示例: <!-- 当 `currentView` 改变时,组件也跟着改变 -->...详见vue API中关于is的定义和用法 至于用在tab...
  • 最近尝试了一下 TypeScript,试着把一个 Vue 项目改成了 TypeScript 的,感觉还不错 目前 Vue 和 TypeScript 的配合还不算很完美,Vuex 和 TypeScript 的配合挺糟糕的,尝试需要谨慎 如果想体验一下的话,强烈建议...
  • Vue.extend组件的注册

    2019-04-20 18:05:11
    1.vue.js文件中暴露出一个Vue的构造器函数, 这个函数的作用,是用来实例化出来一个实例, 那么这个实例也是一个组件, 我们称之为 ‘根实例’ 2.我们从vue detools(Vue谷歌调试工具)中我们发现这个实例的表现形式...
  • 学习vue不得不学习vue实例上得方法,extend是一个组件继承vue实例得函数,我们就来看看Vue.extend函数得实现原理是什么? 用法: Vue.extend( options ) 参数: {Object} options 作用: 使用基础Vue构造器,...
  • 怎么在vue.extend 构造器中引用外部js 方法,就是 import {getAppFormList} from 'xxxx.js', 现在只能在main 中编写全局方法才可以调用到,见下方代码,button 点击时间无法调用外部 getAppFormList方法 ``...
  • 一、Vue.extend Vue.extend( optons ); (1)参数 {object }options (2)用法 使用基础Vue构造器创建一个“子类”,其参数是一个包含“组件选项”的对象。data选项是特例,在Vue.extend()中,它必须是函数...
  • Vue.extend()构造器

    千次阅读 2017-07-05 11:09:12
    Vue.extend( options ) 参数: {Object} options 用法: 使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。 data选项是特例,需要注意 - 在Vue.extend()中它必须是函数。 另:在网上...
  • Vue.extend的理解

    2020-03-10 14:14:50
    它就是通过Vue.extend + $mount实现。 扩展实例构造器 Vue.extend返回的是一个“扩展实例构造器”,也就是一个预设了部分选项的 Vue 实例构造器。刚学的时候对“扩展实例构造器”这一名词感觉很疑惑,其实它就像构....
  • Vue.extend 属于 Vue 的全局 API,但是在实际业务开发中我们很少使用,因为使用extend写法比常用的Vue。components写法要繁琐一些。但是在一些独立组件开发场景中,Vue.extend + $mount 这对组合是我们需要去关注的...
  • vue.extend的使用

    2020-09-27 00:07:14
    vue.extend常使用场景 当需要在某一个场景内要使用一个新功能,该新功能只是在某组件上作一些新的逻辑新功能即可,选择用Vue.extend。 注意:需要在项目下新建文件vue.config.js module.exports = { runtime...
  • Vue.extendVue.component、new Vue以及Vue.compile1、Vue.extend(options):2、Vue.component(options):3、new Vue创建==根实例== Vue.extend(vue扩展构造器)、Vue.component(vue全局组件注册)、new Vue(创建vue...
  • vue.extendvue.component

    2019-04-02 21:32:51
    (1)extend组件构建器 个人描述:暂时还没有挂载到dom文档流中的一个组件说明 (2)component 组件注册器 个人描述:我也不需要挂载到dom文档流中,我也还是一个说明 <div id="mount-point"...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>...script src="bower_components/vue/dist/vue.js">...
  • 1、通过 Vue.extend() 创建构造器 2、通过 Vue.$mount() 挂载到目标元素上 3、目标实现一个 alert 弹框,确认和取消功能如下图 document.createElement 其实想要插入一个元素,通过 document.createElement 就可以...
  • Vue.extend源码分析

    2020-04-02 01:00:50
    整体思路比较简单,就直接...Vue.extend = function (extendOptions: Object): Function { extendOptions = extendOptions || {} const Super = this // 这里指向function Vue() {} const SuperId = Super.cid ...
  • 问题背景 前端交互中经常使用确认框。在删除、修改等操作时,调用后端接口之前,先跳出弹框显示提示信息,提示用户确认,避免...如果你完整引入了 Element,它会为Vue.prototype添加如下全局方法: $msgbox, $aler...
  • Vue.extend动态组件

    2020-09-05 16:50:46
    Vue.extend 属于 Vue 的全局 API,在实际业务开发中我们很少使用,因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中,Vue.extend + $mount 这对组合是我们需要去...
  • Vue2 向Vue.extend传参-propsData属性

    千次阅读 2017-09-18 10:23:34
    Vue.extend的propsData 用得很少,仅用于开发环境 我是网站头部 I am message! -by wss 代码: Vue.extend的propsData 用得很少,仅用于开发环境 var CommonHeader = Vue.extend({ template:"我是网站头部 {{ ...
  • 一、vue.use()自定义组件或者引用第三方组件(即vue文档中的插件)?参考:https://cn.vuejs.org/v2/guide/plugins.html1.1、使用第三方组件通常我们在vue里面使用别人开发的组件,第一步就是install,第二步在main....
  • Vue利用Vue.extend()实现自定义弹出框

    千次阅读 2019-01-16 15:11:23
    container层html(遮罩层) &lt;template&gt; &lt;transition name="dialog"&gt; &lt;div class="container" v-show="visible" @click="...conten

空空如也

1 2 3 4 5 ... 20
收藏数 13,531
精华内容 5,412
关键字:

vue.extend

vue 订阅