帮酷LOGO
  • 显示原文与译文双语对照的内容
Vue Custom Element - Web Components' Custom Elements for Vue.js

  • 源代码名称:vue-custom-element
  • 源代码网址:https://github.com/karol-f/vue-custom-element
  • vue-custom-element源代码文档
  • vue-custom-element源代码下载
  • Git URL:
    https://github.com/karol-f/vue-custom-element.git
  • Git Clone代码到本地:
    git clone https://github.com/karol-f/vue-custom-element
  • Subversion代码到本地:
    $ svn co --depth empty https://github.com/karol-f/vue-custom-element
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • 内容的table

    演示

    你可以在的https://karol-f.github.io/vue-custom-element/ 中查看Vue-custom-element演示

    安装

    NPM
    npm install vue-custom-element --save
    importvueCustomElementfrom'vue-custom-element'Vue.use(vueCustomElement);
    直接包括

    如果你在全局使用 Vue,只包含 vue-custom-element.js,它将自动安装 Vue.customElement 方法。

    <scriptsrc="path/to/vue-custom-element.js"></script>
    可选 polyfill

    对于 跨浏览器 兼容性( IE9+ ),请使用自定义元素 polyfill 。

    <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.4.1/document-register-element.js"></script>

    或者

    import 'document-register-element/build/document-register-element';

    描述

    Vue-custom-element 是一个围绕Vue组件的小包装器。 它在 HTML 。普通 JavaScript 。Vue 。反应。Angular 等等 中提供了无缝的使用方式,没有手动 initialising Vue 。 它使用了Web组件定制元素的强大功能。

    • 适用于 Vue 0.12. x, 1.x 和 2.x
    • 小型- 2.5 kb min+gzip,可选的polyfill - 5 min+gzip

    为什么需要 Vue-custom-element

    用户理解Vue组件。定制元素和使用案例之间的差异可能会让用户感到困惑。

    为什么需要 Vue-custom-element? 简单来说,对于你的Vue组件 convinience 。 他们所需要做的就是包括你的JavaScript文件,然后他们可以:

    • 包含HTML标记( 比如 。 <my-component><my-component/> ) 在文档生命周期的任何时间。 只要包含HTML标记,就可以在 比如 SPA应用程序中使用元素- 不需要使用Vue初始化或者JavaScript使用。 自定义元素将在装入文档时自动初始化。 你可以将它们包含在 比如 Vue 。Angular 或者响应项目中,浏览器将负责检测它并初始化
    • 使用允许通过更改属性。道具或者侦听事件来与 underlaying Vue实例交互的简单 API
    • 利用类似于惰性加载的功能,允许按需加载组件,只有在用户将它们添加到文档时

    特性

    • 只需要简单tag-name 和Vue组件 object 就可以使用 Vue.customElement()
    • 兼容 - 使用可选polyfill我们可以支持多种浏览器,包括 IE9+,安卓和 IOS
    • 可以使用嵌套。HMR 。槽。延迟加载。本机自定义元素回调的全功能
      • 反应性道具和HTML属性
      • 自动 props ( 数字,布尔值),因此它们不会作为字符串,而是正确的数据类型
      • 侦听Vue组件 $emit'ed 事件
      • '默认'还有'名为'slots可以用于传递 static 内容,检查示例
      • 用于无缝开发人员体验的热模块替换( unminimized构建,Vue 2.x+ )
      • 延迟加载- 你可以在组件附加到文档后下载组件。 对 比如 用户界面库作者有用。 检查演示示例
      • 检测是否由于在模态- 元素中打开vue-custom-element而不调用分离回调,然后再次连接到 DOM 。 立即销毁它是不可取的。
    • 自定义元素 v1 - 与最新规范兼容。 如果支持,Vue-custom-element将使用本机实现

    查看演示站点以查看它的实际情况。

    示例

    有关其他示例和详细说明,请查看演示页面。

    自定义元素 HTML
    <widget-vueprop1="1"prop2="string"prop3="true"></widget-vue>
    JavaScript - 带有Vue-custom-element的register
    Vue.customElement('widget-vue', {
     props: [
     'prop1',
     'prop2',
     'prop3' ],
     data: {
     message:'Hello Vue!' },
     template:'<p>{{ message }}, {{ prop1 }}, {{prop2}}, {{prop3}}</p>'});
    JavaScript - 元素API用法
    document.querySelector('widget-vue')[0].prop2// get prop valuedocument.querySelector('widget-vue')[0].prop2='another string'// set prop value

    你还可以更改 <widget-vue> 属性,更改将立即反映出来。

    浏览器支持


    Firefox
    Chrome
    Safari
    Opera
    iOS
    Android
    在--flag后面54 +10.1 +42 +10.3 +55 +

    自定义元素v1支持

    带有可选polyfill的
    IE/边缘
    Firefox
    Chrome
    Safari
    Opera
    iOS
    Android
    IE9+,边缘

    命令行选项

    Vue.customElement() 选项对象的附加,可选,第三个参数。 你可以通过下列方法。

    'This在回调指向元素 node的自定义 DOM 。

    {
     // 'constructorCallback' can be triggered multiple times when e.g. vue-router is usedconstructorCallback() {
     console.info('constructorCallback', this);
     },
     // element is mounted/inserted into documentconnectedCallback() {
     console.info('connectedCallback', this);
     },
     // element is removed from documentdisconnectedCallback() {
     console.warn('disconnectedCallback', this);
     },
     // one of element's attributes (Vue instance props) is changed attributeChangedCallback(name, oldValue, value) {
     console.info('attributeChangedCallback', name, oldValue, value);
     },
     // in case of using vue-custom-element with modals, we destroy it after defined timeout destroyTimeout:3000,
     // only needed when using lazy-loading - 'props' are not accessible on Custom Element registration so we have to provide them props: [],
     // you can set shadow root for element. Only works if native implementation is available. shadow:false,
     // you can set CSS that will be available in Shadow DOM. shadowCss:''}

    示例选项用法:

    importMyElementfrom'./MyElement.vue';Vue.customElement('my-element', MyElement, {
     shadow:true,
     shadowCss:`. card { background-color: blue; }`});

    回调在从传递给Vue-custom-element的组件的生命周期钩子之前执行。 最好是使用Vue组件生命周期钩子( 比如 。 createdmountedbeforeDestroy ) 。

    :它是如何工作的

    inside HTML标记定义的自定义元素,Vue-custom-element将创建:

    • 用于无缝热插拔模块替换的代理组件,使用渲染功能进行性能( Vue 2.x+ )
    • Vue组件传递给 Vue-custom-element

    自定义元素HTML标签将暴露API与底层的Vue组件交互- 你可以使用JavaScript更改HTML属性或者道具。

    测试

    对于高级访问,当暴露的API不足时,定义的自定义元素将通过 __vue_custom_element__ prop公开Vue实例。

    console.info(document.querySelector('widget-vue').__vue_custom_element__)

    警告

    • 自定义元素必须在它的标记名称中包含连字符。 例如 my-element 是有效的,但 myelement 不是
    • 在dev模式下,Vue将显示关于未注册元素的控制台警告。 我们希望使用浏览器元素注册的自定义方式,这是理想的行为。 你可以使用 https://vuejs.org/v2/api/#ignoredElements 插件来消除这里警告。

    插件开发
    npm install
    npm run dev:demo
    发布
    npm run build

    这里命令将编译 vue-custom-element.js 和文档文件。

    请注意 npm run build 将使用 config.build.assetsPublicPath,它被设置为 config/index.js 中的Github页面路径。

    许可证




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语