Xây dựng các thành phần web gốc với Vue.js

Thông số Thành phần Web / Phần tử tùy chỉnh cho phép bạn xác định các phần tử tùy chỉnh của riêng mình trong trình duyệt và logic gắn liền với chúng. Còn lâu mới đến nhưng gần đến nơi rồi. Ưu điểm của Thành phần Web là chúng có thể tương tác giữa bất kỳ khung hoặc thư viện nào, hoặc thậm chí Vanilla JS. Nhờ kích thước nhỏ của Vue , với sự trợ giúp của plugin, bạn có thể tạo các phần tử tùy chỉnh root từ các thành phần Vue.

Cài đặt

Các phần tử tùy chỉnh vue yêu cầu plugin vue-custom-element (được đặt tên thích hợp).

Cài đặt nó qua Yarn hoặc NPM .

# Yarn
$ yarn add vue-custom-element -D

# NPM
$ npm install vue-custom-element --save-dev

Ngoài ra, trừ khi bạn chỉ xây dựng cho Chrome, có thể bạn cần polyfill phần tử đăng ký tài liệu .

Tạo thành phần web

Viết thành phần của bạn như bình thường, các thành phần một file hoạt động tốt nếu sử dụng hệ thống xây dựng.

Ví dụComponent.vue

<template>
  <p>Dynamic prop value: {{myProp}}</p>
</template>

<script>
export default {
  props: ['myProp']
}
</script>

Sau đó, thêm plugin vue-custom-element vào Vue và đăng ký thành phần của bạn.

main.js

import Vue from 'vue';
import vueCustomElement from 'vue-custom-element';

import ExampleComponent from './ExampleComponent.vue';

// Configure Vue to ignore the element name when defined outside of Vue.
Vue.config.ignoredElements = [
  'example-component'
];

// Enable the plugin
Vue.use(vueCustomElement);

// Register your component
Vue.customElement('example-component', ExampleComponent, {
  // Additional Options: https://github.com/karol-f/vue-custom-element#options
});

Bây giờ, sau khi xây dựng thành một tập lệnh độc lập, bạn có thể thêm tập lệnh đó vào bất kỳ trang web nào và để nó hiển thị thành phần ví dụ như mong đợi.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Example Vue Page</title>
    <script src="dist/build.js" async deferred></script>
  </head>
  <body>
    <example-component myProp="I can pass props!"></example-component>
  </body>
</html>

Các đạo cụ sẽ vẫn hoạt động, mặc dù bạn không thể chuyển các giá trị khác ngoài chuỗi.

Và bạn có nó rồi đấy! Một phần tử tùy chỉnh được tạo bằng Vue!

Tags:

Các tin liên quan

Cách sử dụng OpenResty Web Framework cho Nginx trên Ubuntu 16.04
2017-02-28
Roundup: Thư viện thành phần ứng dụng web trên máy tính để bàn Vue.js - Cập nhật Q4 2017
2017-02-23
Cách cài đặt Django Web Framework trên Debian 8
2016-12-21
Cách triển khai ứng dụng web Falcon với Gunicorn và Nginx trên Ubuntu 16.04
2016-11-16
Giới thiệu về Ứng dụng web tiến bộ (PWA): Service Worker & Manifest
2016-11-10
Cách cài đặt Django Web Framework trên Ubuntu 16.04
2016-05-16
Cách triển khai ứng dụng web Clojure trên FreeBSD 10.2
2015-12-22
Cách triển khai ứng dụng web Clojure trên Ubuntu 14.04
2015-11-20
Cách thiết lập web server khả dụng cao với IP giữ và nổi trên Ubuntu 14.04
2015-10-20
Xây dựng cho Sản xuất: Ứng dụng Web - Tổng quan
2015-06-01