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

資訊專欄INFORMATION COLUMN

Vue從Hello World到打包（后端適讀）

ACb0y / 2572人閱讀

摘要：從到上線簡(jiǎn)介是個(gè)框架?，F(xiàn)在，我們完成一個(gè)項(xiàng)目后，需要打包，因?yàn)樵陂_發(fā)環(huán)境下，運(yùn)行所依賴的包達(dá)到好幾百個(gè)，為了將文件體積縮減到正常范圍，必須按需打包。

Vue從Hello World到上線 Vue 簡(jiǎn)介

Vue是個(gè)MVVM框架。

特點(diǎn)：簡(jiǎn)單易學(xué)、體積小、性能高。并且它的源碼耦合性非常低，了解它的過程也就是思想進(jìn)步的過程。

當(dāng)然，只學(xué)這一個(gè)框架，無法完成前端的全部工作，除了Vue之外，還需要了解axios、Webpack，才能完成整個(gè)開發(fā)過程。

好了，我們開始！

Vue的Hello World

寫Hello World已經(jīng)成了傳統(tǒng)，我們也不例外，盡管Vue的入門文檔寫的非常好，但是在這里還是按照我的思路來走吧！

首先，我們先寫一個(gè)html頁面：


   
Hello World

好了，現(xiàn)在我們已經(jīng)寫出了一個(gè)靜態(tài)的Hello World，現(xiàn)在我們要用Vue將它改造成動(dòng)態(tài)的。Vue的引入可以很簡(jiǎn)單，像極了jQuery，一個(gè)

然后我們?cè)俳ㄒ粋€(gè)

好了，現(xiàn)在我們只差一步了，Vue里面已經(jīng)有了數(shù)據(jù)，只欠綁定，將

內(nèi)的內(nèi)容改成這樣既可：{{ myData }}，那么最終的寫法是這樣：


   
{{ myData }}

現(xiàn)在Hello World已經(jīng)寫出來了，那就需要敲打一下了。el: "body"這個(gè)地方十分不建議寫成這樣，直接綁定body會(huì)有一些方法無法使用，建議寫成這樣：


    

        
{{ myData }}

在body內(nèi)部添加一層并賦一個(gè)id是比較好的做法。放心，這或許是你整個(gè)Vue項(xiàng)目唯一需要寫的ID屬性，它不需要像jQuery一樣命名一大堆ID。

添加事件

上面的Hello World其實(shí)就是一個(gè)數(shù)據(jù)綁定，那么我們深入一點(diǎn)，來了解事件綁定：

現(xiàn)在，有一個(gè)需求，需要在

{{ myData }}
這個(gè)塊里添加一個(gè)點(diǎn)擊事件，給你十秒鐘想一想jQuery是怎么做的，是不是挺復(fù)雜的？而Vue有很簡(jiǎn)單的事件綁定寫法：

{{ myData }}

// 是不是很像onClick事件？
// 其實(shí)是不一樣的，在最終生成的代碼里，你不會(huì)看到@click，它最終會(huì)被轉(zhuǎn)換成DOM2級(jí)事件。

現(xiàn)在，我們點(diǎn)擊這個(gè)

塊的時(shí)候，就會(huì)觸發(fā)myClick方法，咦，等等，myClick方法還沒定義呢！

那我們回到j(luò)s代碼里，添加methods屬性：

new Vue({
    el: "#app",    
    data: {     
        myData: "Hello World"
    },
    methods: {      // 這個(gè)methods也是不可以改的哦，記得加s
        myClick: function() {
            alert("你點(diǎn)" + this.myData + "干啥？");
            // 你可以盡情使用data里的數(shù)據(jù)，但是要加上this指向
        }
    }
})

好了，可以運(yùn)行了，如果myClick方法需要加參數(shù)的話，也很簡(jiǎn)單：

{{ myData }}
，當(dāng)然，下面的定義部分也需要配上形參：

myClick: function(data) {
    alert("你點(diǎn)" + data + "干啥？");
}

相信你看出來了，data里面是放數(shù)據(jù)的，methods里面是放方法的。

添加屬性

理解了添加事件，那理解添加屬性就更簡(jiǎn)單了。

例如，有個(gè) ... new Vue({ el: "#app", data: { srcUrl: "../images/logo.png" } }) 

警告：如果這個(gè)標(biāo)簽的src屬性值是動(dòng)態(tài)的，那就不要添加原生的src屬性，通過屬性綁定的方式引入路徑是最佳實(shí)踐，其他屬性綁定也是同理。
更強(qiáng)的數(shù)據(jù)綁定

如果我們有這樣一段數(shù)據(jù)：

arr = [1, 2, 3, 4, 5, 6];

需要用

    和
  • 標(biāo)簽渲染，給你十秒鐘想想jQuery是怎么做的？不管怎么做，做出來都是悲劇！

    我們看看Vue是怎么做的？

    data: {
    list: arr
}
...

      
    
    • {{ item }}
      •

    如此一來，數(shù)據(jù)就可以漂亮地渲染到頁面上了。

    我們?cè)賮韨€(gè)復(fù)雜點(diǎn)的數(shù)據(jù)：

    json = [
    {
        "AirPortCode": "HGH", 
        "Temperature": "10℃", 
        "Visib": "很好", 
        "WeatherType": "晴", 
        "Wind": "東風(fēng) - 3級(jí)", 
        "city": "杭州"
    }, 
    {
        "AirPortCode": "CAN", 
        "Temperature": "17℃", 
        "Visib": "7000米", 
        "WeatherType": "多云", 
        "Wind": "北偏東北風(fēng) - 2級(jí)", 
        "city": "廣州"
    }, 
    {
        "AirPortCode": "PEK", 
        "Temperature": "12℃", 
        "Visib": "很好", 
        "WeatherType": "晴", 
        "Wind": "南偏西南風(fēng) - 2級(jí)", 
        "city": "北京首都"
    }
]

    給你十秒鐘想想……

    算了，還是直接上vue吧

    data: {
    list: json
}
...

      
    
    • {{ item.city }} {{ item.Temperature }}
      •

    在這里只顯示了城市和溫度兩樣?xùn)|西。你愿意的話，可以顯示更多。盡管數(shù)據(jù)好像復(fù)雜了很多，但是Vue應(yīng)付起來并沒有多吃力。

    好了，我想我們的頁面已經(jīng)足夠動(dòng)態(tài)了，但是還不夠智能，怎么說呢？例如上面的數(shù)據(jù)里有個(gè)Wind的字段，將這個(gè)字段渲染到頁面上的時(shí)候，我并不希望全部渲染，我只想渲染風(fēng)力級(jí)別，那我需要將前面的風(fēng)向給去掉，這時(shí)候就需要加過濾器。

  • {{ item.Wind | cutWind }}

Vue提供了內(nèi)置的過濾器，但切割天氣顯然不是它內(nèi)置的過濾器，因此我們現(xiàn)在需要自己定義一個(gè)：

Vue.filter( "cutWind" , function(value) {
    return value.split("-")[1];
});

本來還應(yīng)該加一個(gè)去空格的處理，但現(xiàn)在為了演示就暫且無視空格吧……

Ajax

現(xiàn)在數(shù)據(jù)都可以動(dòng)態(tài)渲染了，我們需要考慮的就是，應(yīng)該怎么從服務(wù)端獲取數(shù)據(jù)，ajax庫有很多，Vue原本也自己實(shí)現(xiàn)了一個(gè)，但后來?xiàng)売昧?，原因是不想重?fù)造輪子?，F(xiàn)在官方推薦的Ajax庫叫axios，它確實(shí)也是一個(gè)小巧而輕量的庫，體積大約是11k，同樣可以通過

/src目錄是源碼文件夾，里面的都是源碼，開發(fā)環(huán)境都只打開這個(gè)文件。
/dist目錄是發(fā)布文件夾，取自“distribution（發(fā)布）”這個(gè)單詞，里面的代碼都是正式代碼，所有資源都經(jīng)過壓縮，因此不是給人看的。

對(duì)/src里的文件做了相應(yīng)的修改后，可以查看package.json這個(gè)文件，找到

"scripts": {
    "build": "webpack --progress -p --watch"
},

不同的項(xiàng)目可能略有差別，但webpack命令就是我們需要的，這條命令的key是build，因此我們?cè)陧?xiàng)目的命令行運(yùn)行npm run build，即可完成打包，如果沒有報(bào)錯(cuò)信息，說明一切順利，只需要將dist目錄里的東西部署到線上即可。

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

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

相關(guān)文章

  • 寫給后端同學(xué)的vue

    摘要：有寫后臺(tái)的哥們說，怎么寫，怎么新建一個(gè)項(xiàng)目，然后我想了想，覺得寫一個(gè)面向后臺(tái)同學(xué)的教程也是有必要，文章中幾乎沒講和細(xì)節(jié)處理的相關(guān)內(nèi)容，減少接受不必要的信息量，降低的學(xué)習(xí)成本。 安裝環(huán)境 文章內(nèi)，圖片很多，占據(jù)了一定的篇幅。有寫后臺(tái)的哥們說，vue怎么寫，怎么新建一個(gè)vue項(xiàng)目，然后我想了想，覺得寫一個(gè)面向后臺(tái)同學(xué)的vue教程也是有必要，文章中幾乎沒講css和vue細(xì)節(jié)處理的相關(guān)內(nèi)容，減...

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

  • webpack4.x升級(jí)摘要

    摘要：以為例，編寫來幫助我們完成重復(fù)的工作編譯壓縮我只要執(zhí)行一下就可以檢測(cè)到文件的變化，然后為你執(zhí)行一系列的自動(dòng)化操作，同樣的操作也發(fā)生在這些的預(yù)處理器上。的使用是針對(duì)第三方類庫使用各種模塊化寫法以及語法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發(fā)展 很久以前，互聯(lián)網(wǎng)行業(yè)有個(gè)職位叫做 軟件開發(fā)工程師 在那個(gè)時(shí)代，大家可能...

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

  • 基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn)

    摘要：原作者原鏈接基于多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn)法律聲明警告本作品遵循署名非商業(yè)性使用禁止演繹未本地化版本協(xié)議發(fā)布。這是什么背景現(xiàn)代化的前端項(xiàng)目中很多都使用了客戶端渲染的單頁面應(yīng)用。 原作者：@LinuxerPHL原鏈接：基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn) 法律聲明 警告：本作品遵循 署名-非商業(yè)性使用-禁止演繹3.0 未本地化版本（CC BY-...

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

  • 基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn)

    摘要：原作者原博文地址基于多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn)法律聲明警告本作品遵循署名非商業(yè)性使用禁止演繹未本地化版本協(xié)議發(fā)布。這是什么背景現(xiàn)代化的前端項(xiàng)目中很多都使用了客戶端渲染的單頁面應(yīng)用。 原作者：@LinuxerPHL原博文地址: 基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn) 法律聲明 警告：本作品遵循 署名-非商業(yè)性使用-禁止演繹3.0 未本地化版本（...

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

  • 最詳細(xì)的Vue Hello World應(yīng)用開發(fā)步驟

    摘要：運(yùn)行命令，安裝一個(gè)輕量級(jí)的服務(wù)器，該服務(wù)器用于應(yīng)用開發(fā)完畢后的本地測(cè)試。到目前為止，這個(gè)基于的應(yīng)用的開發(fā)和配置都結(jié)束了，是不是很簡(jiǎn)單我們可以來測(cè)試了。瀏覽器里訪問，看到的輸出，說明我們成功地走完了一個(gè)基于的應(yīng)用開發(fā)流程。 很多Vue的初學(xué)者想嘗試這個(gè)框架時(shí)，都被webpack過于復(fù)雜的配置所嚇倒，導(dǎo)致最后無法跑出一個(gè)期望的hello word效果。今天我就把我第一次使用webpack打...

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

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

0條評(píng)論

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