在如今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. Linux驱动之中断处理体系结构简析

    S3C2440中的中断处理最终是通过IRQ实现的,在Linux驱动之异常处理体系结构简析已经介绍了IRQ异常的处理过程,最终分析到了一个C函数asm_do_IRQ,接下来继续分析asm_do_IRQ, ...

  2. cmd输入appium-doctor，运行时提示'node'不是内部或外部的命令

    一.提示'node'不是内部或外部命令,先按照下面步骤操作: 1.设置APPIUM_HOME系统变量,值为当前appium安装目录,例如:D:\software_install\Appium 2.设置 ...

  3. css杂烩

    持续更新... 在css中处理外边距合并时,思路是触发BFC,因为在创建了块级格式化的元素中(垂直排列),不会和它的子元素发生外边距合并.而BFC可以通过float(不包括none),overflow ...

  4. TUN/TAP编程实现

    其实关于这两种设备的编程,基本上属于八股文,大家一般都这么干. 启动设备之前 有的linux 并没有将tun 模块编译到内核之中,所以,我们要做的第一件事情就是检查我们的系统是否支持 TUN/TAP ...

  5. python 根据字符串内数字排序

    当我们使用python给一个由字符串组成的列表排序时,常常会排成这样 [‘10a’, ‘11b’, ‘1c’, ‘20d’, ‘21e’, ‘2f’] 这样的形式 ,然而我们想要 [ ‘1c’,‘2f ...

  6. Python day 4

    阅读目录 内容回顾: 流程控制: if分支结构: while循环控制: for循环(迭代器): ##内容回顾: #1.变量名命名规范 -- 1.只能由数字.字母 及 _ 组成 -- 2.不能以数字开头 ...

  7. ios 单例的再次理解

    单例模式    在建模的时候,如果这个东西确实只需要一个对象,多余的对象都是无意义的,那么就考虑用单例模式.比如定位管理(CLLocationManager),硬件设备就只有一  个,弄再多的逻辑对象 ...

  8. 工具SQL

    1.数据库设计文档维护SQL SELECT COLUMN_NAME 列名, COLUMN_TYPE 数据类型, DATA_TYPE 字段类型, CHARACTER_MAXIMUM_LENGTH 长度, ...

  9. 7. The British Thached Roof 英国的茅草屋顶

    7. The British Thached Roof 英国的茅草屋顶 (1) The view over a valley of a tiny village with thatchd roof c ...

  10. MVC+EF(CODEFIRST)+EASYUI医药MIS系统

    https://www.cnblogs.com/chenlinzhi/p/4332628.html