在如今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. Java16-java语法基础——异常

    Java16-java语法基础——异常 一.异常概念 1.异常:应用程序在运行过程中出现的错误或非正常的意外情况,即虚拟机的通常操作中可能遇到的异常,是一种常见的运行错误. 2.原因:数组越界.空指针 ...

  2. Jmeter创建一个web测试计划

    1.  下载Jmeter 下载地址:http://jmeter.apache.org/download_jmeter.cgi 下载后解压到你想“安装”的路径下,比如: D:\Program Files ...

  3. mysql 递归查找菜单节点的所有子节点

    背景                                                                                                   ...

  4. Linux的top命令

    文章来自于长风破浪博主的内容,下面是该博客网址. https://www.cnblogs.com/dragonsuc/p/5512797.html 为了自己能多学习,多记忆,所以直接搬到了这里,希望小 ...

  5. Java 7 使用TWR(Try-with-resources)完成文件copy

    try-with-resources语句是声明了一个或多个资源的try语句块.在java中资源作为一个对象,在程序完成后必须关闭.try-with-resources语句确保每个资源在语句结束时关闭. ...

  6. 选择困难症的福音——团队Scrum冲刺阶段-Day 2

    选择困难症的福音--团队Scrum冲刺阶段-Day 2 今日进展 编写提问部分 如何将不同的问题选项连接到不同的下一个问题 如何保证问题的链接不会弄丢 登陆注册界面 完成密码可见与不可见的更改 ui界 ...

  7. Eclipse Python 开发环境搭建 pydev 插件

    已安装: python 3.6 JDK Eclispe 在 Eclipse 中安装 pydev Pydev 的下载网址 http://www.pydev.org/download.html 安装完成后 ...

  8. AutoCAD开发5--批量修改dwg文件

    Dim files, path, filename path = ThisDrawing.Utility.GetString(True, "输入dwg文件所在路径:") 'dwg文 ...

  9. 如何将JetBrains IDE 光标由块变为 |

    1 设置中确认未勾选 2 安装了IdeaVim 插件,将其改为未选中状态,或者 ⌥ + ⌘ +  v 将其关闭

  10. Android Studio导入第三方jar包或依赖工程的方法

    Android Studio导入第三方jar包或依赖工程的方法   一 导入jar包的方法 1.打开自己的工程,将需要导入的jar包copy到libs文件夹下 2.在导入的jar包处单击菜单 Add ...