国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

ACb0y / 2558人閱讀

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

Vue從Hello World到上線 Vue 簡介

Vue是個MVVM框架。

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

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

好了，我們開始！

Vue的Hello World

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

首先，我們先寫一個html頁面：


   
Hello World

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

然后我們再建一個

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

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


   
{{ myData }}

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


    

        
{{ myData }}

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

添加事件

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

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

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

{{ myData }}

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

現(xiàn)在，我們點擊這個

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

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

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

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

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

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

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

添加屬性

理解了添加事件，那理解添加屬性就更簡單了。

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

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

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

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

需要用

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

    我們看看Vue是怎么做的？

    data: {
    list: arr
}
...

      
    
    • {{ item }}
      •

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

    我們再來個復(fù)雜點的數(shù)據(jù)：

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

    給你十秒鐘想想……

    算了，還是直接上vue吧

    data: {
    list: json
}
...

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

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

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

  • {{ item.Wind | cutWind }}

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

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

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

Ajax

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

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

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

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

不同的項目可能略有差別，但webpack命令就是我們需要的，這條命令的key是build，因此我們在項目的命令行運行npm run build，即可完成打包，如果沒有報錯信息，說明一切順利，只需要將dist目錄里的東西部署到線上即可。

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/82056.html

相關(guān)文章

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

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

    SoapEye 評論0 收藏0

  • webpack4.x升級摘要

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

    levinit 評論0 收藏0

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

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

    big_cat 評論0 收藏0

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

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

    Lavender 評論0 收藏0

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

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

    stormzhang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<