001.helloworld

01.新建helloworld.html，输入代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>helloworld</title>
</head>
<body>
    
</body>
</html>

02.在<head>中引入flyingon.css和flyingon.min.js

<link rel="stylesheet" type="text/css" href="https://freeoasoft.github.io/flyingon-ui/css/default/flyingon.css" />
<script type="text/javascript" src="https://freeoasoft.github.io/flyingon-ui/js/flyingon.min.js"></script>

03.在<head>中添加style，代码如下：

<style type="text/css">
        html,body,#container {
            margin: 0;
            border: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
</style>

04.在<body>中添加

    <div id="container"></div>
    <script type="text/x-template" id="template">
        
    </script>
    <script type="text/javascript">
        
    </script>

div是flyingon的容器，div后面第一个<script>是flyingon模板，第二个<script>是flyingon的js代码书写区域。

05.编辑flyingon模板

<script type="text/x-template" id="template">
        <label :text="txt"/>
</script>

模板<script>放置一个<label>，text属性前加冒号":text"表示该属性是flyingon属性，可以通过flyingon的js代码对label的text属性赋值，不加冒号<label text="txt"/>则是普通的text属性，属性值为"txt"。

06.下面在第二个<script>中写flyingon的js代码，现在我们通过flyingon的js代码修改label的text属性值。

    <script type="text/javascript">
        flyingon.view({
            host: 'container',
            template: '#template',
            defaults: {
                txt: 'HelloWorld'
            }
        });
    </script>

通过关键字flyingon引入，如同jquery的$，用flyingon.view()将值显示在模板上，view()的参数是一个json，host（主入口）、template（模板）、defaults（默认项）三个关键字必不可少，host: 'container'选id为container的<div>为入口容器，template: '#template'选id为template的<script>为模板，defaults的值也是json，模板<script>的<label :text="txt"/>中txt是值，而在defaults: {txt: 'HelloWorld'}中转变成了变量，值为'HelloWorld'，<label>的txet属性就被设置成了'HelloWorld'。

07.完整的helloworld.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>helloworld</title>
    <link rel="stylesheet" type="text/css" href="https://freeoasoft.github.io/flyingon-ui/css/default/flyingon.css" />
    <script type="text/javascript" src="https://freeoasoft.github.io/flyingon-ui/js/flyingon.min.js"></script>
    <style type="text/css">
        html,body,#container {
            margin: 0;
            border: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="container"></div>

    <script type="text/x-template" id="template">
        <label :text="txt"/>
    </script>

    <script type="text/javascript">
        flyingon.view({
            host: 'container',
            template: '#template',
            defaults: {
                txt: 'HelloWorld'
            }
        });
    </script>
</body>
</html>

在浏览器中打开helloworld.html，显示如下

001.helloworld

相关推荐