@a2604882741z/turbine 中文文档教程

发布于 5年前 浏览 25 更新于 3年前

Turbine Javascript Framework

npm 节点



这是一个SPA项目,使用Vue的玉米概念创建,使用ES6语法编码,基于MVVM 模式。

Features

  • Mixed Javascript Syntax with HTML code, you can be able to describe the relationship between operational code and UI component.
  • HTML View will automatically update after described data has been changed, so you don't have to care how to let update tags, because this process is in good hand with Turbine.
  • Powerful directive support, all directives as like a hook marked a HTML tag with prefix 't-', multiple default directives such as 't-for' for loop a dom from data, 't-if' for logic estimate, 't-bind' for binding attributes of HTML Tag, 't-on' for binding Events etc, these are effective to build complex logic and make things easier.
  • The compatibility covered IE 8+, Firfox, Chrome, Edge etc.
  • It has only 33KB (after compress).

Getting Started

Installing

您可以通过 npm installation 安装 Turbine

npm install @a2604882741z/turbine --save-dev

Tourist Guide

在项目条目的开头导入它

import Turbine from "@a2604882741z/turbine";

A basic example

如何初始化 Turbine 对象:

code:
<turbine id="myFirstTurbineApp"></turbine>
<script>
    Turbine({
        el: "#myFirstTurbineApp"
    });
</script>

result:
<div id="myFirstTurbineApp"></div>

el 是告诉 Turbine 哪个节点应该用作根目标的键,它支持字符串或html 对象。

Render from data:

然后我们要放入一些数据并将其呈现到 HTML 中:

code:
<turbine id="myFirstTurbineApp">{{message}}</turbine>
<script>
    Turbine({
        el: "#myFirstTurbineApp",
        data: {
            message: "hello world"
        }
    });
</script>

result:
<div id="myfirstTurbineApp">hello world</div>

data 是一个对象,用于收集用于创建反应式响应的值,响应导致视图自动更新 .

Using directive statement:

code:
<turbine id="myFirstTurbineApp">
    <div t-for="(i, index) in array">{{i + ' ' + index}}</div>
</turbine>

Turbine({
    el: "#myFirstTurbineApp",
    data: {
          array: [1,2,3]
    }
});

result:
<div id="myfirstTurbineApp">
    <div>1 0</div>
    <div>2 1</div>
    <div>3 2</div>
</div>
code:
<turbine id="myFirstTurbineApp">
    <div t-if="showText">this element won't output into the HTML Tree</div>
</turbine>

Turbine({
    el: "#myFirstTurbineApp",
    data: {
          showText: false
    }
});

result:
<div id="myfirstTurbineApp"></div>
  • Attribute binding statement example:
code:
<turbine id="myFirstTurbineApp">
    <div t-bind:class="className">this tag will have a className as "pink"</div>
</turbine>

Turbine({
    el: "#myFirstTurbineApp",
    data: {
          className: "pink"
    }
});

result:
<div id="myfirstTurbineApp">
    <div class="pink">this tag will have a className as "pink"</div>
</div>
code:
<turbine id="myFirstTurbineApp">
    <div t-on:click="clickEvent()">this tag is clickable</div>
</turbine>

Turbine({
    el: "#myFirstTurbineApp",
    methods: {
        clickEvent: () => {
            alert("The tag has been clicked");
        }
    }
});
code:
<turbine id="myFirstTurbineApp">
    <input type="text" t-model="textValue">
</turbine>

Turbine({
    el: "#myFirstTurbineApp",
    data: {
        textValue: "this value will be automatically changed when user changes the input value"
    }
});
  • Display statement:
code:
<turbine id="myFirstTurbineApp">
    <div t-show="display">This element will output with a style statement "display: none;"</div>
</turbine>

Turbine({
    el: "#myFirstTurbineApp",
    data: {
        display: false
    }
});

result:
<div id="myfirstTurbineApp">
    <div style="display: none;">This element will output with a style statement "display: none;"</div>
</div>
// You might want to access some node directly, here is a way to satisfy your wish by using `ref` as an attribute on tag.

<turbine id="myFirstTurbineApp">
    <div ref="aNode">you can assess this node by coding this.$refs.aNode</div>
</turbine>

let app = Turbine({
    el: "#myFirstTurbineApp"
});
console.log(app.$refs.aNode); // print the dom node out

Troubleshooting

如果您遇到麻烦并希望获得帮助或分享您是如何解决问题的,请访问此页面

Contact me

Github:链接
邮箱:mr.jiangxue@hotmail.com

Turbine Javascript Framework

npm node



This is a SPA project, It's created with corn concept of Vue, It coded by ES6 Syntax and based on MVVM pattern.

Features

  • Mixed Javascript Syntax with HTML code, you can be able to describe the relationship between operational code and UI component.
  • HTML View will automatically update after described data has been changed, so you don't have to care how to let update tags, because this process is in good hand with Turbine.
  • Powerful directive support, all directives as like a hook marked a HTML tag with prefix 't-', multiple default directives such as 't-for' for loop a dom from data, 't-if' for logic estimate, 't-bind' for binding attributes of HTML Tag, 't-on' for binding Events etc, these are effective to build complex logic and make things easier.
  • The compatibility covered IE 8+, Firfox, Chrome, Edge etc.
  • It has only 33KB (after compress).

Getting Started

Installing

You can install Turbine via npm installation

npm install @a2604882741z/turbine --save-dev

Tourist Guide

Import it at the beginning of your porject's entry

import Turbine from "@a2604882741z/turbine";

A basic example

how to initialize a Turbine object:

code:
<turbine id="myFirstTurbineApp"></turbine>
<script>
    Turbine({
        el: "#myFirstTurbineApp"
    });
</script>

result:
<div id="myFirstTurbineApp"></div>

el is a key to tell Turbine which node shall be used as root target, it supports string or html object.

Render from data:

then we gonna put some data and render it into the HTML:

code:
<turbine id="myFirstTurbineApp">{{message}}</turbine>
<script>
    Turbine({
        el: "#myFirstTurbineApp",
        data: {
            message: "hello world"
        }
    });
</script>

result:
<div id="myfirstTurbineApp">hello world</div>

data is an Object to gather the values which are used to create reactive response, The response cause the View update automatically.

Using directive statement:

code:
<turbine id="myFirstTurbineApp">
    <div t-for="(i, index) in array">{{i + ' ' + index}}</div>
</turbine>

Turbine({
    el: "#myFirstTurbineApp",
    data: {
          array: [1,2,3]
    }
});

result:
<div id="myfirstTurbineApp">
    <div>1 0</div>
    <div>2 1</div>
    <div>3 2</div>
</div>
code:
<turbine id="myFirstTurbineApp">
    <div t-if="showText">this element won't output into the HTML Tree</div>
</turbine>

Turbine({
    el: "#myFirstTurbineApp",
    data: {
          showText: false
    }
});

result:
<div id="myfirstTurbineApp"></div>
  • Attribute binding statement example:
code:
<turbine id="myFirstTurbineApp">
    <div t-bind:class="className">this tag will have a className as "pink"</div>
</turbine>

Turbine({
    el: "#myFirstTurbineApp",
    data: {
          className: "pink"
    }
});

result:
<div id="myfirstTurbineApp">
    <div class="pink">this tag will have a className as "pink"</div>
</div>
code:
<turbine id="myFirstTurbineApp">
    <div t-on:click="clickEvent()">this tag is clickable</div>
</turbine>

Turbine({
    el: "#myFirstTurbineApp",
    methods: {
        clickEvent: () => {
            alert("The tag has been clicked");
        }
    }
});
code:
<turbine id="myFirstTurbineApp">
    <input type="text" t-model="textValue">
</turbine>

Turbine({
    el: "#myFirstTurbineApp",
    data: {
        textValue: "this value will be automatically changed when user changes the input value"
    }
});
  • Display statement:
code:
<turbine id="myFirstTurbineApp">
    <div t-show="display">This element will output with a style statement "display: none;"</div>
</turbine>

Turbine({
    el: "#myFirstTurbineApp",
    data: {
        display: false
    }
});

result:
<div id="myfirstTurbineApp">
    <div style="display: none;">This element will output with a style statement "display: none;"</div>
</div>
// You might want to access some node directly, here is a way to satisfy your wish by using `ref` as an attribute on tag.

<turbine id="myFirstTurbineApp">
    <div ref="aNode">you can assess this node by coding this.$refs.aNode</div>
</turbine>

let app = Turbine({
    el: "#myFirstTurbineApp"
});
console.log(app.$refs.aNode); // print the dom node out

Troubleshooting

If you get into a trouble and want to get help or share how you solved the issue please visit this page.

Contact me

Github: link
Email: mr.jiangxue@hotmail.com

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文