成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

使用 ale.js 制作一個(gè)小而美的表格編輯器（1）

pingink / 1258人閱讀

摘要：如果你并沒(méi)有學(xué)習(xí)過(guò)的語(yǔ)法結(jié)構(gòu)，請(qǐng)前往訪(fǎng)問(wèn)教程接下來(lái)，我們?cè)诙x組件時(shí)設(shè)置一個(gè)屬性，并返回一個(gè)鏈接到屬性?xún)?nèi)的函數(shù)的值之后我們需要在屬性里面寫(xiě)上函數(shù)。

今天來(lái)教大家如何使用 ale.js 制作一個(gè)小而美的表格編輯器，首先先上 gif：

是不是還是有一點(diǎn)非常 cool 的感覺(jué)的？那么我們現(xiàn)在開(kāi)始吧！

這是我們這篇文章結(jié)束后完成的效果（如果想繼續(xù)完成請(qǐng)?jiān)L問(wèn)第二篇文章）：

ok，很簡(jiǎn)單吧，我們這篇文章使用的是 ale.js 1.0.1?版本，首先先讓我們鏈接一下這個(gè)版本：

然后，我們?cè)僭?body 標(biāo)簽里創(chuàng)建一個(gè) div，id 為 app，作為我們這個(gè)組件的容器：

接著我們?cè)賱?chuàng)建一個(gè) script 標(biāo)簽，里面寫(xiě)上以下代碼：

Ale("excel", {
    
})
Ale.render("excel", {
    el: "#app"
})

這句代碼的意思是，我們創(chuàng)建一個(gè)名為 excel 的組件，然后把它渲染到 id 為 app 的元素中。

（如果你并沒(méi)有學(xué)習(xí)過(guò) alejs 的語(yǔ)法結(jié)構(gòu)，請(qǐng)前往 cn.alejs.org?訪(fǎng)問(wèn)教程）

接下來(lái)，我們?cè)诙x組件時(shí)設(shè)置一個(gè) template 屬性，并返回一個(gè)鏈接到 methods 屬性?xún)?nèi)的 handleTemplateRender 函數(shù)的值：

Ale("excel", {
    template() {
        return this.methods.handleTemplateRender();
    }
})

之后我們需要在 methods 屬性里面寫(xiě)上?handleTemplateRender 函數(shù)。不過(guò)在這之前，我們需要在 data 屬性?xún)?nèi)定義數(shù)據(jù)，分別是 bookHeader 和 bookData：

data: {
    bookHeader: [
        "Book", "Author", "Language", "Published", "Sales"
    ],
    bookData: [
        ["The Lord of the Rings", "    J. R. R. Tolkien", "English", "1954-1955", "150 million"],
        ["The Little Prince", "Antoine de Saint-Exupéry", "French", "1943", "140 million"],
        ["Dream of the Red Chamber", "Cao Xueqin", "Chinese", "1791", "100 million"]
    ]
}

定義 data 完成后，我們?cè)偃ザx?handleTemplateRender 函數(shù)：

handleTemplateRender() {
    //定義DOM基本結(jié)構(gòu)
    var returnVal = "";

    //循環(huán)遍歷bookHeader數(shù)據(jù)并輸出
    this.data.bookHeader.forEach(function(val, i, arr) {
        returnVal += "";
    })
    returnVal += "";

    //循環(huán)遍歷bookData數(shù)據(jù)并輸出
    this.data.bookData.forEach(function(thisBook, i, arr) {
        //輸出一行
        returnVal += "";
        thisBook.forEach(function(val, i, arr) {
            //輸出一列
            returnVal += "";
        })
        returnVal += "";
    })
    returnVal += "
" + val + "
" + val + "
";

    //返回DOM結(jié)構(gòu)
    return returnVal;
}

好了，現(xiàn)在 alejs 就可以正常在頁(yè)面中輸出數(shù)據(jù)了：

以下是全部 js 代碼結(jié)構(gòu)：

Ale("excel", {
    template() {
        return this.methods.handleTemplateRender();
    },
    methods: {
        handleTemplateRender() {
            //定義DOM基本結(jié)構(gòu)
            var returnVal = "";

            //循環(huán)遍歷bookHeader數(shù)據(jù)并輸出
            this.data.bookHeader.forEach(function(val, i, arr) {
                returnVal += "";
            })
            returnVal += "";

            //循環(huán)遍歷bookData數(shù)據(jù)并輸出
            this.data.bookData.forEach(function(thisBook, i, arr) {
                //輸出一行
                returnVal += "";
                thisBook.forEach(function(val, i, arr) {
                    //輸出一列
                    returnVal += "";
                })
                returnVal += "";
            })
            returnVal += "
" + val + "
" + val + "
";

            //返回DOM結(jié)構(gòu)
            return returnVal;
        }
    },
    data: {
        bookHeader: [
            "Book", "Author", "Language", "Published", "Sales"
        ],
        bookData: [
            ["The Lord of the Rings", "    J. R. R. Tolkien", "English", "1954-1955", "150 million"],
            ["The Little Prince", "Antoine de Saint-Exupéry", "French", "1943", "140 million"],
            ["Dream of the Red Chamber", "Cao Xueqin", "Chinese", "1791", "100 million"]
        ]
    }
})
Ale.render("excel", {
    el: "#app"
})

看完了這篇文章，有想了解 alejs 的同學(xué)，可以訪(fǎng)問(wèn)?alejs官網(wǎng)、Github?或?碼云，感謝你的支持！

我將在明天發(fā)布第二篇文章！敬請(qǐng)期待！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101064.html

相關(guān)文章

  • window上小而美的軟件(推薦度按排名)

    摘要：更好用更強(qiáng)大的筆記本本地翻譯神器解壓縮軟件程序文件快捷神器搜索本地文件神器像瀏覽器一樣打開(kāi)文件夾記錄每次復(fù)制內(nèi)容黏貼時(shí)可選擇復(fù)制黏貼神器程序文件快捷神器火螢醬程序文件快捷神器多窗口資源管理器干凈的射手播放器網(wǎng)絡(luò)監(jiān)控控件錄屏軟件錄屏軟件更 Notepad++ 更好用更強(qiáng)大的筆記本 QTranslate 本地翻譯神器 7-zip 解壓縮軟件 Wox 程序/文件/快捷 神器 1! Ever...

    Alfred 評(píng)論0 收藏0

  • 小而美的顏色選擇器：xy-color-picker

    摘要：表單元素新增了一個(gè)類(lèi)型，也就是顏色選擇器?；蛘呤褂媚J(rèn)值可以給顏色選擇器指定一個(gè)初始顏色值，取值為合法的顏色值。值顏色設(shè)置或返回顏色選擇器的屬性值。默認(rèn)返回當(dāng)前格式下的顏色值。 html5表單元素input新增了一個(gè)color類(lèi)型，也就是顏色選擇器。 該選擇器在windows上的默認(rèn)效果如下： showImg(https://segmentfault.com/img/bVbv8w7?...

    Kylin_Mountain 評(píng)論0 收藏0

  • Riot.js——一個(gè)小而美的JS框架

    摘要：專(zhuān)有的內(nèi)容更少，而更多符合標(biāo)準(zhǔn)的成分。當(dāng)前標(biāo)簽實(shí)例的方法被調(diào)用時(shí)當(dāng)前標(biāo)簽的任何一個(gè)祖先的被調(diào)用時(shí)更新從父親到兒子單向傳播。相對(duì)來(lái)說(shuō)，微型場(chǎng)景會(huì)更適合，不想要太多的外部依賴(lài)，又需要組件化數(shù)據(jù)驅(qū)動(dòng)等更現(xiàn)代化框架的能力。 Riot.js是什么？ Riot 擁有創(chuàng)建現(xiàn)代客戶(hù)端應(yīng)用的所有必需的成分： 響應(yīng)式 視圖層用來(lái)創(chuàng)建用戶(hù)界面 用來(lái)在各獨(dú)立模塊之間進(jìn)行通信的事件庫(kù) 用來(lái)管理URL和瀏覽器回...

    nemo 評(píng)論0 收藏0

  • Riot.js——一個(gè)小而美的JS框架

    摘要：專(zhuān)有的內(nèi)容更少，而更多符合標(biāo)準(zhǔn)的成分。當(dāng)前標(biāo)簽實(shí)例的方法被調(diào)用時(shí)當(dāng)前標(biāo)簽的任何一個(gè)祖先的被調(diào)用時(shí)更新從父親到兒子單向傳播。相對(duì)來(lái)說(shuō)，微型場(chǎng)景會(huì)更適合，不想要太多的外部依賴(lài)，又需要組件化數(shù)據(jù)驅(qū)動(dòng)等更現(xiàn)代化框架的能力。 Riot.js是什么？ Riot 擁有創(chuàng)建現(xiàn)代客戶(hù)端應(yīng)用的所有必需的成分： 響應(yīng)式 視圖層用來(lái)創(chuàng)建用戶(hù)界面 用來(lái)在各獨(dú)立模塊之間進(jìn)行通信的事件庫(kù) 用來(lái)管理URL和瀏覽器回...

    tolerious 評(píng)論0 收藏0

  • Fre：又一個(gè)小而美的前端MVVM框架

    摘要：，大家好，好久不賤呢最近因?yàn)榭戳艘恍┑男≌f(shuō)，整個(gè)人都比較致郁就在昨天，我用了一天的時(shí)間寫(xiě)了，又一個(gè)小而美的前端框架可能你覺(jué)得，有了和，沒(méi)必要再寫(xiě)一個(gè)了我覺(jué)得我還是想想辦法尋找一下它的存在感吧先看的組件化方案最先看到的應(yīng)該是。 halo，大家好，好久不賤呢！ 最近因?yàn)榭戳艘恍?be 的小說(shuō)，整個(gè)人都比較致郁::>__+ {state.count--}}>- ...

    LittleLiByte 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<