使用Safe.js綁定聯動快速開發用戶信息頁面

時間 2019-11-13

標籤使用 safe.js safe 綁定聯動快速開發用戶信息頁面欄目 JavaScript 简体版

原文原文鏈接

這篇文章將會講解如何使用safe.js快速開發一個web應用程序。

前言

在這篇文章裏面，我將簡單製做一個用戶信息輸入的頁面javascript

【本文不會講解safe.js每句代碼的具體做用，若是想了解請點擊此連接：https://gitee.com/skyogo/Safe/wikis/Safe.js】html

開始

首先咱們先創建一個Demo.html的文件，裏面寫上基本結構，並用script標籤引入safe.js的文件：（Safe.js Gitee連接：https://gitee.com/skyogo/Safe）【safejs版本必須大於3.1.0】java

<!DOCTYPE html>
<html>
    <head>
        <title>Safe.js Demo</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <script src="js/Safe.js"></script>
        <script>
            window.onload = function(){
                
            }
        </script>
    </body>
</html>

而後咱們在body標籤裏面寫上如下代碼：git

<input id="nameInput" placeholder="請輸入名字：" type="text">
        <span id="name">你的名字：<span class="val"></span></span>
        <br>
        <br>
        <hr>
        <input id="ageInput" placeholder="請輸入年齡：" type="text">
        <span id="age">你的年齡：<span class="val"></span></span>
        <br>
        <br>
        <hr>
        <select id="cityInput">
            <option>北京</option>
            <option>上海</option>
        </select>
        <span id="city">你選擇的城市：<span class="val">北京</span></span>

咱們打開瀏覽器看下效果：web

如今咱們再在script標籤裏面的window.onload事件裏寫上這樣的safejs代碼：瀏覽器

new safeInit({
    el: "#nameInput",
    bindHTML: "#name .val"
})
new safeInit({
    el: "#ageInput",
    bindHTML: "#age .val"
})
new safeInit({
    el: "#cityInput",
    bindHTML: "#city .val"
})

如今咱們打開瀏覽器看看效果，會發現已經實現了聯動了！spa

Safe.js下載地址：code

https://gitee.com/skyogo/Safehtm