在如今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. Laravel5 (cli)命令行执行脚本及定时任务

    Artisan是Laravel自带的命令行接口名称,它提供了很多有用的命令想要查看所有可用的Artisan命令,可使用list命令查看: 1 php artisan list 每个命令都可以用help ...

  2. FortiGate外网IPSec链路及运维专线链路到个别网段不通

    1.现状: 如图,用户网段有192.168.50.0/24.192.168.51.0/24和192.168.52.0/24.192.168.53.0/24.在防火墙上有静态路由到运维专线的10.160 ...

  3. Percentage&Last zero&Convert from char to float

    Percentage g_rate = wg_header-rate. condense g_rate. SHIFT g_rate RIGHT DELETING TRAILING '0'. REPLA ...

  4. canvas（五）createPattern

    /** * Created by xianrongbin on 2017/3/9. * 图片填充 */ var dom = document.getElementById('clock'), ctx ...

  5. 前后端跨域 _ cross domain

    1. 解决跨域既可以从前端, 也可以从后端. 参考好的网络资源: http://www.cnblogs.com/vajoy/p/4295825.html

  6. centos 7 vim 保存文件 root 权限 及 使用

    vim打开文件时,没有用root账户,保存时才发现需要root权限.办法是在vim执行一下命令: :w !sudo tee % 未完待续

  7. java并发编程艺术

    cas算法 概要 刚开始看这本书的时候很经常看到cas算法,个人觉得cas算法在并发编程中也是挺重要的的一部分,cas是比较并交换的意思(compare and swap),campareAndSwa ...

  8. js多维数组转一维数组

    1,使用map方法 var arr = [1,[2,[[3,4],5],6]]; function unid(arr){ var arr1 = (arr + '').split(',');//将数组转 ...

  9. docker容器的使用

    Docker客户端 docker客户端非常简单,我们可以直接输入docker命令来查看到Docker客户端的所有命令选项. runoob@ docker 可以通过命令docker command -- ...

  10. 深入C#的String类