在如今VUE盛行的情况下，我们一直在惊叹于VUE的组件的功能，却不知道，原生js早就已经支持了这个功能。

最近在公开课学到的，js还有很多很多需要探索学习。

下面是一个简单的例子

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>创建标签</title>

    </head>

    <body>

        <x-product>测试</x-product>

        <script type="text/javascript">

            var _xproproto=Object.create(HTMLElement.prototype)

            _xproproto.createdCallback=function(){

                this.addEventListener('click',function(){

                    alert(1)

                })

            }

            document.registerElement('x-product',{  //注册标签，通过原型链继承方法和属性

                prototype:_xproproto

            })</script>

    </body>

</html>

原生js实现vue组件功能的更多相关文章

  1. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  2. 原生JS实现百度搜索功能

    今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html> <head> <meta charset= ...

  3. 原生JS实现滑动验证功能

    一般很多网站都有滑动验证的功能,简单滑动验证的原理如下图所示: 主要理解思想就行 图中的代码可能和实际写的有所不同 HTML和CSS也可根据仔细的喜好就行修改 完整代码: <!DOCTYPE h ...

  4. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  5. Vue结合原生js实现自定义组件自动生成

    就目前三大前端主流数据驱动框架(vue,ng,react)而言,均具有创建自定义组件的api,但都是必须先做到事先写好挂载点,这个挂载点可以是原有静态元素标签也可以是自定义模板:对于多种组件通过同一数 ...

  6. 原生 js 实现 vue 的某些功能

    1.数据双向绑定:https://www.cnblogs.com/yuqing-o605/p/6790709.html?utm_source=itdadao&utm_medium=referr ...

  7. 原生js开发vue的双向数据绑定

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 使用原生js实现前端分页功能

    背景: 从后台提取出来数据,在前端进行分页. 代码: user-manage.js window.onload = function(){ var result = { message : " ...

  9. 原生js实现拖拽功能

    1. 给个div,给定一些样式 <div class="drag" style="left:0;top:0;width:100px;height:100px&quo ...

随机推荐

  1. Django的rest_framework的分页组件源码分析

    前言: 分页大家应该都很清楚,今天我来给大家做一下Django的rest_framework的分页组件的分析:我的讲解的思路是这样的,分别使用APIview的视图类和基于ModelViewSet的视图 ...

  2. JAVA中字符串操作几种方式对比

    @参考文章 方法及原理: 方法1:a=a+b实际上另开辟一个空间c=a+b;然后将c的引用赋给a 方法2:a += b实际上是建立一个StringBuffer,然后调用append(),最后再将Str ...

  3. （转）css3实现load效果

    本文转自:https://www.cnblogs.com/jr1993/p/4625628.html 谢谢作者 注:gif图片动画有些卡顿,非实际效果! 第一种效果: 代码如下: <div cl ...

  4. java命令分析线程死锁以及内存泄漏

    一.介绍 jstack是java虚拟机自带的一种堆栈跟踪工具.jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项&qu ...

  5. 如何访问dashed filename

    第一关:boJ9jbbUNNfktd78OOpsqOltutMc3MY1 第二关:CV1DtqXWVFXTvM2F0k09SHz0YwRINYA9 cat <- 第三关:如何访问spaces i ...

  6. node.js中使用zlib模块进行数据压缩和解压

    我们可以使用 zlib 模块来对数据进行压缩和解压处理,减小数据体积,加快传输速度. 一.通过创建转换流,对文件进行压缩和解压 const fs = require('fs'); const zlib ...

  7. application/json和application/x-www-form-urlencoded使用选择

    一.参考资料 选application/x-www-form-urlencoded还是application/json? @RequestBody应用 二.理解 1.@RequestBody的作用 注 ...

  8. jdk8 永久代变更

    java8 去掉了永久代permgen(又称非堆,其实也是堆的一部分),类的方法代码,常亮,方法名,静态变量等存放在永久代中 改为使用元空间 Metaspace , Metaspace 不在是堆的一部 ...

  9. AX_SysExcel

    void KTL_CPeng_ImportCustStamp()  {      str                 file;      FileNameFilter      filter = ...

  10. 通过JDBC进行简单的增删改查（以MySQL为例） 目录

    通过JDBC进行简单的增删改查(以MySQL为例) 目录 前言:什么是JDBC 一.准备工作(一):MySQL安装配置和基础学习 二.准备工作(二):下载数据库对应的jar包并导入 三.JDBC基本操 ...