Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vue.extend()学习

vue.extend()学习

作者头像
公众号---人生代码
发布于 2020-05-18 08:42:47
发布于 2020-05-18 08:42:47
69700
代码可运行
举报
文章被收录于专栏:人生代码人生代码
运行总次数:0
代码可运行

我准备把我 400多篇关于前端工作中的遇到的问题,都搬运到我的公众号上面了

vue.extend()方法其实是vue的一个构造器,继承自vue

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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')

结果如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<p>Walter White aka Heisenberg</p>

接下来,我们来用vue.extend()来实现以下

首先我们新建一个 hello.vue

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!--hello.vue-->
<template>
  <div>{{text}}</div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      text: ''
    }
  }
}
</script>

接下来我们在同级新建一个 hello.js

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-05-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 CryptoCode 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue.extend vue.component new vue
关系:vue构造->vue组件->vue实例 也就是说不同的vue组件可以共用同一个vue构造,不同的vue实例可以共用同一个vue组件
conanma
2021/11/03
1.2K0
灵光一闪!帮你使用Vue,搞定无法解决的“动态挂载”
在一些特殊场景下,使用组件的时机无法确定,或者无法在Vue的template中确定要我们要使用的组件,这时就需要动态的挂载组件,或者使用运行时编译动态创建组件并挂载。
葡萄城控件
2021/10/29
1.3K0
灵光一闪!帮你使用Vue,搞定无法解决的“动态挂载”
06Vue.js快速入门-Vue组件化开发
老马
2018/01/05
1.3K0
vue中extend,mixins,extends,components,install的几个操作
结论: Vue.extend实际是创建一个构造器,对应的初始化构造器,并将其挂载到标签上
火狼1
2019/04/17
1.7K0
Vue生命周期-手动挂载理解
浏览器缓存,试了下确实一定概率可以显示,但是,哪怕浏览器不行,我们也只能从自己的代码里修改来配合它,兼容它。
ydymz
2018/09/10
5470
Vue生命周期-手动挂载理解
vue 自定义MessageBox 消息框组件
通过js this.$message() , 能显示一个消息组件 ; 所需知识点:
用户9914333
2022/07/22
2.5K0
在vue中使用ts
首先找到文档:https://www.tslang.cn/samples/index.html
阿超
2022/08/21
1.1K0
在vue中使用ts
Vue.extend详解,自定义toast弹窗
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/08
5430
Vue基础语法(三)
(1)写法:在watch中需要handler和deep结合(注意单词不要拼写错,不然会报错)
申小兮
2023/05/09
3400
Vue基础语法(三)
过年了,基于Vue做一个消息通知组件
今天除夕,在这里祝大家新年快乐!!!今天在这个特别的日子里我们做一个消息通知组件,好,我们开始行动起来吧!!!
Vam的金豆之路
2021/12/01
8880
过年了,基于Vue做一个消息通知组件
手把手教你实现一个简易的Vue组件在线编辑器
vue-cli使用过vue的我想大家都知道,那么xxx.vue组件是怎么运行的呢?怎么把template,script,style渲染到页面上的呢?今天我们手动写了个简易的Vue组件在线编辑器玩一玩。
小丑同学
2020/12/22
1.8K0
手把手教你实现一个简易的Vue组件在线编辑器
Vue实现一个全屏加载插件并发布至npm仓库
谁经历的苦难多,谁懂得的东西也就多。 前言 在做头像上传功能时,为了防止用户多次点击,通常会在上传时添加一个遮罩,提示用户:图片正在上传中,上传完毕后,关闭这个遮罩层,本来想找个UI框架引入进来,使用框架提供的弹层,找了很多没找到满意的,干脆自己做一个吧😂。接下来就跟大家分享下如何制作一个插件,先跟大家展示下最终实现的效果: 实现思路 涉及到的知识点:Vue 构造器、实例挂载 编写加载层业务代码,实现全局加载层的相关效果 在插件包的index.js中进行相关封装 定义插件对象,实现install方法 使
神奇的程序员
2022/04/10
7670
Vue实现一个全屏加载插件并发布至npm仓库
Vue2学习计划六:组件化
我们面对乱麻的时候,当然是快刀斩。面对复杂问题的时候,我们最佳方案就是将问题进行拆解成一个个小问题,然后一个一个的解决。
松鼠先生
2022/02/22
3850
Vue2学习计划六:组件化
vue基础(四)
什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可; 组件化和模块化的不同: + 模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一; + 组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;
不愿意做鱼的小鲸鱼
2022/09/24
2.1K0
vue基础(四)
如何开发一个Vue插件
2、 将弹框组件扩展为 Vue 插件,通过 API 的方式进行调用,插件API的调用规则为 vm.$alert('提示消息') 。
挥刀北上
2019/07/19
1.3K0
一面高频vue面试题
eventBus事件总线适用于父子组件、非父子组件等之间的通信,使用步骤如下: (1)创建事件中心管理组件之间的通信
bb_xiaxia1998
2022/10/28
9380
一文搞定Vue面试
mutation中的操作是一系列的同步函数,用于修改state中的变量的的状态。当使用vuex时需要通过commit来提交需要操作的内容。mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是实际进行状态更改的地方,并且它会接受 state 作为第一个参数:
bb_xiaxia1998
2022/11/02
7360
vue学习笔记4
考虑一个问题:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变;(用以前的知识如何实现???)
用户6362579
2019/09/29
7560
10天从入门到精通Vue(四)Vue中的路由指南
考虑一个问题:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变;
共饮一杯无
2022/11/28
6570
10天从入门到精通Vue(四)Vue中的路由指南
Vue Class Component文档翻译
Vue Class Component 是一个可以让你使用Class风格语法编写Vue组件的库. 例如, 下面是一个通过Vue Class Component编写的简单的计数器组件的例子:
治电小白菜
2020/08/25
3.3K0
Vue Class Component文档翻译
相关推荐
vue.extend vue.component new vue
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档