在如今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. Ubuntu修改时间时区

    设定时区:dpkg-reconfigure tzdata 选择Asia,Hong Kong. sudo apt-get install ntpdate // 安装时间同步工具 sudo ntpdate ...

  2. c++沉思录 学习笔记 第六章 句柄(引用计数指针雏形？)

    一个简单的point坐标类 class Point {public: Point():xval(0),yval(0){} Point(int x,int y):xval(x),yval(y){} in ...

  3. 团队-爬取豆瓣电影TOP250-代码设计规范

    队长博客:http://www.cnblogs.com/gengwenhao/

  4. x64 assembler fun-facts（转载）

    原文地址 While implementing the x64 built-in assembler for Delphi 64bit, I got to “know” the AMD64/EM64T ...

  5. 《Linux就该这么学》第二天课程

    秦时明月经典语录:很多人被命运安排,而我安排命运.——卫庄 今天介绍了VM 虚拟机的安装以及Linux系统的安装,还讲解了Linux内核 RPM:降低软件的安装难度 源代码+安装规则→将程序源代码与安 ...

  6. python基础循环

    1.使用while循环输入1234568910 n = 1 while n < 11: if n == 7: pass else: print(n) n = n + 1 2.求1 - 100的所 ...

  7. (PMP)第9章-----项目资源管理

    9.1 规划资源管理 数据表现: 1.层级型(高层次的角色):工作分解结构,组织分解结构,资源分解结构 2.责任分配矩阵:RAM,RACI,执行,负责,咨询,知情(只有一个A) 3.文本型(记录详细职 ...

  8. javascript的常用事件

  9. docker学习笔记-命令大全

    容器生命周期管理 • Run OPTIONS说明: • -a :显示所有的容器,包括未运行的. • -f :根据条件过滤显示的内容. • --format :指定返回值的模板文件. • -l :显示最 ...

  10. Note of Python Turtle

    Note of Python Turtle         Turtle 库函数是 Python语言中一个流行的绘图函数库.Turtle 意思是海龟,在Python中显示为一个小箭头,通过它的移动而留 ...