在如今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 mysql 联表查询

    在rhce考试题中,第21.22题为数据库查询题 题目: 在system1上创建一个Maria DB数据库,名为Contacts,要求: 数据库应该包含来自数据库users.mdb的内容,数据库只能被 ...

  2. The Moon and Sixpence摘抄

    I had not yet learnt how contradictory is human nature; I did not know how much pose there is in the ...

  3. scrapy -->CrawlSpider 介绍

    scrapy -->CrawlSpider 介绍 1.首先,通过crawl 模板新建爬虫: scrapy genspider -t crawl lagou www.lagou.com 创建出来的 ...

  4. 部分用户访问Polycom视频会议时故障

    1.现象 Polycom视频会议服务器部署在防火墙下,通过Paloalto防火墙的一对一映射到公网. 部分同事使用职场网络或者4G通过公网访问时,出现超时问题. 2.分析: Polycom设备并没有做 ...

  5. LinkedList 源码实现

    闲暇之余,准备将Java 一些常用的数据结构进行重新的剖析,并记录博客比如LinkedList ,HashMap ,HashTable ,以及并发包所引入的集合,在博客中会陆续更新 start 哈哈, ...

  6. 学习笔记《简明python教程》

    学习笔记<简明python教程> 体会:言简意赅,很适合新手入门 2018年3月14日21:45:59 1.global 语句 在不使用 global 语句的情况下,不可能为一个定义于函数 ...

  7. 点击导出table表格

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. google protobuf VC下的使用笔记

    1 使用protobuf 2.x 下载地址(3.x 在c++11 vs2017下报错) 源码 https://github.com/google/protobuf 或者直接下载 二进制文件 2 如果下 ...

  9. Chapter3_操作符_逻辑操作符

    逻辑操作符与(&&)或(||)非(^)能够对布尔类型的数据类型进行操作,并且生成布尔值,和关系操作符的产生的数据类型是一样的.需要注意的不多,有以下几点: (1)在需要使用string ...

  10. c语言基础课第三次作业

    7-1找出最小值 1.实验代码 #include <stdio.h> int main(void) int n, i, m, min; scanf("%d", & ...