在如今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. HDU 6304 Chiaki Sequence Revisited

    题目链接 : http://acm.hdu.edu.cn/showproblem.php?pid=6304 多校contest1   Problem Description Chiaki is int ...

  2. [leetcode]32. Longest Valid Parentheses最长合法括号子串

    Given a string containing just the characters '(' and ')', find the length of the longest valid (wel ...

  3. ORACLE数据库测试数据插入速度[z]

    一,没有优化的速度:Executed in 69.436 seconds drop table t purge;create table t(x int);/*清空共享池,注意在生产环境中千万不能做这 ...

  4. Pandas处理丢失数据

    1.创建含NaN的矩阵 >>> dates = pd.date_range(', periods=6) >>> df = pd.DataFrame(np.arang ...

  5. uni-app开发一次，覆盖多端的前端框架

    uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台. 一套代码,运行多个平台 uni-app实现了一套代码, ...

  6. 可遇不可求的Question之导入mysql中文乱码解决方法篇

    可遇不可求的Question之导入mysql中文乱码解决方法篇 先 set names utf8;然后 source c:\1.sql ?

  7. C语言中的语句

    • 表达式语句 表达式后加 ; 构成表达式语句. a = b+c; x+y i++ • 控制语句 完成一定的控制功能. if(...){...}else{...}                   ...

  8. Linux（以centos7为例）下自动挂载NTFS硬盘

    Linux(以centos7为例)下自动挂载NTFS硬盘 作者:子敬叔叔 编写时间:2017年5月3日星期三 需求:     为了熟悉Linux的使用,在自己的笔记本上新安装一个centos7, 但我 ...

  9. Python简介及环境安装

    Python 官网传送门 Python是一种面向对象的解释性计算机程序设计语言. Python 2.7将于2020年1月1日终止支持,本笔记基于Python3. pip pip 是一个现代的,通用的 ...

  10. Springboot高版本中@ConfigurationProperties注解取消location属性

    在spring boot 1.5 版本之前 在@ConfigurationProperties注释中有两个属性:locations:指定配置文件的所在位置prefix:指定配置文件中键名称的前缀 sp ...