Riot.js Tutorial "Two" component authoring guidelines, preprocessor, label styles, and assembly methods

Last Update:2017-10-17 Source: Internet

Author: User

Tags script tag

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Basic requirements

A riot tag is a combination of presentation and logic (i.e. HTML and JS);

The following are the most basic rules for writing riot tags:

Write the HTML first, then write the JS,JS code can be written in the <script> tag inside, but this is not necessary;

The script tag cannot be used internally when the riot tag is defined within the document body;

The script tag can be used internally when the riot tag is defined in a separate file;

If the JS code can not be written inside the <script> tag,

Then we think that the last HTML tag after the end is the JS code;

Riot tags can be empty, or only HTML, or only JS;

Quotation marks are optional, <foo bar={baz}> equivalent to <foo bar= "{baz}" >;

Similar ES6 coding style:

MethodName () {} is equivalent to This.methodname=function () {}.bind (this)

Here the this always points to the current tag instance;

<div class={selected:flag}></div> When the flag variable is true,

The class attribute of the Div is selected;

<input checked={undefined}> equivalent to <input>

All attribute names must be lowercase (browser specification required);

Riot tags can support self-closing tags <div/> equivalent to <div></div>;

<br>

Riot label must be closed (or self-closing)

Standard HTML tags, such as label,table, can also be rewritten, but it is not recommended to do so

Riot tags can also have their own properties;

To customize the riot tag in the document body, you must pay attention to the indentation format;

The indentation of the TAB key is different from the space indentation, which should be noted;

Don't write <script> tag

<todo>

<!--layout--

Logic comes here

This.items = [1, 2, 3]

</todo>

This.items = [All-in-one] is the JS code, can be executed correctly

Riotjs tag inside the last HTML tag after the end, you can directly write the JS code, do not have to write the JS code inside the <script> tag;

Declaring a preprocessor

You can specify a JS preprocessor by using the type attribute

<my-tag>

  <script type= "Coffee" >

    #  your  coffeescript  logic  goes  here

  </script>

</my-tag>

Currently supports COFFEE,TYPESCRIPT,ES6 and none;

You can also write this: type = "Text/coffee"

Label Style

You can insert the <style> tag inside the riot tag and write the style internally;

Riotjs will automatically insert the contents of the <style> tag into the head section of the HTML;

This adjustment process occurs only once, regardless of how many times the riot tag is instantiated within the page;

If you want to control the adjustment process, you can add one of these tags to the head tag:

In this case, the pattern inside the tag will be escaped to the block;

<todo>

<!--layout--

<style>

/** other Tag specific styles **/

h3 {font-size:120%}

/** other Tag specific styles **/

</style>

</todo>

Riotjs supports scoped pseudo-class, but currently does not support Shadow DOM;

I do not recommend that you use scoped pseudo-class, because this thing has been abolished by the user;

Riotjs will support Shadow Dom in the 4.x version;

For the contents of the Shadow DOM, please refer to:

Https://www.toobug.net/article/what_is_shadow_dom.html

For information on Riotjs 4.x upgrades, please refer to:

https://github.com/riot/riot/issues/2283

For scoped Pseudo class, please refer to:

Https://developer.mozilla.org/en-US/docs/Web/CSS/:scope

Assembly method

You can assemble components in the following ways

 <body>

     <!--place the custom tag anywhere inside the body-->

     <todo></todo>

     <!--include riot.js-->

     <script src= "Riot.min.js" ></SCRIPT>

     <!--include the tag-->

     <script src= "Todo.js" ></SCRIPT>

     <!--mount the tag-->

     <script>riot.mount (' Todo ') </script>

 </body>

Custom labels within the body area must be closed in this way:<todo></todo>

This closure method is wrong:<todo/>

Here's how other centralized assembly components are

Automatically assemble all the custom components on the current page

Riot.mount (' * ')

Assemble the component with the specified ID

Riot.mount (' #my-element ')

Assemble the selected components

Riot.mount (' Todo, forum, comments ')

The number of components that can be assembled on a page is unrestricted

Riot.js Tutorial "Two" component authoring guidelines, preprocessor, label styles, and assembly methods

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More