在如今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. 安装64位office时，弹出提示，要求卸载32位office

    运行 regedit,进入到HKEY_CLASSES_ROOT\Installer\Products下,删除0000510开头的项或00002开头项.然后重启计算机. 参考:  https://blo ...

  2. 227. Basic Calculator II 无括号版本计算器

    ［抄题］: Implement a basic calculator to evaluate a simple expression string. The expression string con ...

  3. 如何学好游戏3D引擎编程

    注:本文是网上看到的一篇文章,感觉写的很好,因此收藏了下来 <如何学好游戏3D引擎编程>此篇文章献给那些为了游戏编程不怕困难的热血青年,它的神秘要我永远不间断的去挑战自我,超越自我,这样才 ...

  4. 20172325 2018-2019-2 《Java程序设计》第七周学习总结

    20172325 2018-2019-2 <Java程序设计>第七周学习总结 教材学习内容总结 二叉查找树 二叉查找树:是含附加属性的二叉树,即其左孩子小于父节点,而父节点又小于或等于右孩 ...

  5. trinitycore 魔兽服务器源码分析(一) 网络

    trinitycore是游戏服务器的开源代码 许多玩家使用魔兽的数据来进行测试 ,使用它来假设魔兽私服. 官方网址  https://www.trinitycore.org/ 类似的还有mangos ...

  6. AX_UserInfo

    UserInfoHelp::userInUserGroup(curuserid(), "Admin")  EmplTable::userId2EmplId(curuserid()) ...

  7. 开启hadoop集群

    首先开启zookeeper zkServer.sh start start-all

  8. Mybatis的针对于同一个有自己父类或子类的递归查询 （如商品分类）

    1.pojo代码 private Integer categoryId; private Integer superId; private String name; private Byte leve ...

  9. 12. The Biggest Safety Threat Facing Airlines 航空公司面临的最大安全威胁

    12. The Biggest Safety Threat Facing Airlines 航空公司面临的最大安全威胁 (1) The biggest safety threat facing air ...

  10. 曙光服务器挂载EMC存储

    1.登录集群(用户名密码远程登录,然后切换到root用户) 2.连接主机:ssh node72 3.在主机下进行存储挂载: 1)fdisk -l 查看磁盘信息,如下图所示: 2)查看磁盘挂载信息:mo ...