001.helloworld

最新推荐文章于 2022-03-25 10:38:47 发布

yaochaohx

最新推荐文章于 2022-03-25 10:38:47 发布

阅读量145

点赞数

分类专栏： flyingon-ui 文章标签： helloworld flyingon javascript js

本文链接：https://blog.csdn.net/yaochaohx/article/details/87895482

版权

flyingon-ui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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，显示如下

yaochaohx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
001.helloworld

01.新建helloworld.html，输入代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;helloworld&lt;/title&gt;&lt;/head&gt;&
复制链接

扫一扫

专栏目录