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

vue.extend()学习

作者头像
公众号---人生代码
发布于 2020-05-18 08:42:47
发布于 2020-05-18 08:42:47
65300
代码可运行
举报
文章被收录于专栏:人生代码人生代码
运行总次数: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.2K0
灵光一闪!帮你使用Vue,搞定无法解决的“动态挂载”
06Vue.js快速入门-Vue组件化开发
老马
2018/01/05
1.2K0
过年了,基于Vue做一个消息通知组件
今天除夕,在这里祝大家新年快乐!!!今天在这个特别的日子里我们做一个消息通知组件,好,我们开始行动起来吧!!!
Vam的金豆之路
2021/12/01
8470
过年了,基于Vue做一个消息通知组件
vue中extend,mixins,extends,components,install的几个操作
结论: Vue.extend实际是创建一个构造器,对应的初始化构造器,并将其挂载到标签上
火狼1
2019/04/17
1.7K0
vue 自定义MessageBox 消息框组件
通过js this.$message() , 能显示一个消息组件 ; 所需知识点:
用户9914333
2022/07/22
2.3K0
Vue基础语法(三)
(1)写法:在watch中需要handler和deep结合(注意单词不要拼写错,不然会报错)
申小兮
2023/05/09
3190
Vue基础语法(三)
Vue.extend详解,自定义toast弹窗
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/08
4930
一面高频vue面试题
eventBus事件总线适用于父子组件、非父子组件等之间的通信,使用步骤如下: (1)创建事件中心管理组件之间的通信
bb_xiaxia1998
2022/10/28
8610
Vue生命周期-手动挂载理解
浏览器缓存,试了下确实一定概率可以显示,但是,哪怕浏览器不行,我们也只能从自己的代码里修改来配合它,兼容它。
ydymz
2018/09/10
5380
Vue生命周期-手动挂载理解
手把手教你实现一个简易的Vue组件在线编辑器
vue-cli使用过vue的我想大家都知道,那么xxx.vue组件是怎么运行的呢?怎么把template,script,style渲染到页面上的呢?今天我们手动写了个简易的Vue组件在线编辑器玩一玩。
小丑同学
2020/12/22
1.7K0
手把手教你实现一个简易的Vue组件在线编辑器
Vue Class Component文档翻译
Vue Class Component 是一个可以让你使用Class风格语法编写Vue组件的库. 例如, 下面是一个通过Vue Class Component编写的简单的计数器组件的例子:
治电小白菜
2020/08/25
3.3K0
Vue Class Component文档翻译
vue学习笔记3
什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可; 组件化和模块化的不同:
用户6362579
2019/09/29
8210
Java学习笔记-全栈-web开发-24-Vue
jq利用DOM操作,降低了ajax请求函数的复用性(js与html耦合性太高)。 而vue通过框架提供的指令实现数据双向绑定,我们只需要关注业务逻辑,而不需要直接操作DOM元素。
devi
2021/08/18
1.3K0
在vue中使用ts
首先找到文档:https://www.tslang.cn/samples/index.html
阿超
2022/08/21
9600
在vue中使用ts
10天从入门到精通Vue(四)Vue中的路由指南
考虑一个问题:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变;
共饮一杯无
2022/11/28
5870
10天从入门到精通Vue(四)Vue中的路由指南
Vue2学习计划六:组件化
我们面对乱麻的时候,当然是快刀斩。面对复杂问题的时候,我们最佳方案就是将问题进行拆解成一个个小问题,然后一个一个的解决。
松鼠先生
2022/02/22
3420
Vue2学习计划六:组件化
Vue.js基础特性
计算属性 computed 与data,el,methods属性一样,都是vm实例的属性(选项) 理解其大致意思即可
河湾欢儿
2018/09/06
1.9K0
Vue学习-组件化开发
将一个页面拆分成一个个小的功能块,每个功能块完成自己独立的功能,这样在之后的页面维护和管理就会方便许多。
花猪
2022/02/17
1.6K0
Vue学习-组件化开发
Vue.js - 组件快速入门(上)
组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树:
Vincent-yuan
2020/07/03
1.8K0
相关推荐
vue.extend vue.component new vue
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验