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

時間  2019-11-07
標籤 vue hello world 打包 後端 简体版
原文   原文鏈接

Vue從Hello World到上線

Vue 簡介

Vue是個MVVM框架。css

特色：簡單易學、體積小、性能高。而且它的源碼耦合性很是低，瞭解它的過程也就是思想進步的過程。html

固然，只學這一個框架，沒法完成前端的所有工做，除了Vue以外，還須要瞭解axios、Webpack，才能完成整個開發過程。前端

好了，咱們開始！vue

Vue的Hello World

寫Hello World已經成了傳統，咱們也不例外，儘管Vue的入門文檔寫的很是好，可是在這裏仍是按照個人思路來走吧！webpack

首先，咱們先寫一個html頁面：ios

<body>
   <div>Hello World</div> 
</body>

好了，如今咱們已經寫出了一個靜態的Hello World，如今咱們要用Vue將它改形成動態的。Vue的引入能夠很簡單，像極了jQuery，一個<script>標籤引入便可。web

<body>
   <div>Hello World</div> 
   <script src="vue.js"></script>
</body>

而後咱們再建一個<script>書寫vue代碼。ajax

<body>
   <div>Hello World</div> 
   <script src="vue.js"></script>
   <script>
   new Vue({
        el: 'body',     // 這裏遵循的是css的選擇器規則，這句的意思是，body標籤內都是Vue的控制範圍
        data: {     // 這裏是數據，須要Vue綁定的數據都放在這裏
            myData: 'Hello World'   
        }
   })
   </script>
</body>

好了，如今咱們只差一步了，Vue裏面已經有了數據，只欠綁定，將<div>內的內容改爲這樣既可：{{ myData }}，那麼最終的寫法是這樣：npm

<body>
   <div>{{ myData }}</div> 
   <script src="vue.js"></script>
   <script>
   new Vue({
        el: 'body',    
        data: {     
            myData: 'Hello World'   // 上面的el和data這兩個單詞都是不容許改的，可是這句裏的key能夠隨意命名
        }
   })
   </script>
</body>

如今Hello World已經寫出來了，那就須要敲打一下了。el: 'body'這個地方十分不建議寫成這樣，直接綁定body會有一些方法沒法使用，建議寫成這樣：json

<body>
    <section id="app">
        <div>{{ myData }}</div> 
    </section>
    <script src="vue.js"></script>
    <script>
    new Vue({
        el: '#app',    
        data: {     
            myData: 'Hello World'   // 上面的el和data這兩個單詞都是不容許改的，可是這句裏的key能夠隨意命名
        }
    })
   </script>
</body>

在body內部添加一層並賦一個id是比較好的作法。放心，這或許是你整個Vue項目惟一須要寫的ID屬性，它不須要像jQuery同樣命名一大堆ID。

添加事件

上面的Hello World其實就是一個數據綁定，那麼咱們深刻一點，來了解事件綁定：

如今，有一個需求，須要在<div>{{ myData }}</div>這個塊裏添加一個點擊事件，給你十秒鐘想想jQuery是怎麼作的，是否是挺複雜的？而Vue有很簡單的事件綁定寫法：

<div @click="myClick">{{ myData }}</div>
// 是否是很像onClick事件？
// 實際上是不同的，在最終生成的代碼裏，你不會看到@click，它最終會被轉換成DOM2級事件。

如今，咱們點擊這個<div>塊的時候，就會觸發myClick方法，咦，等等，myClick方法還沒定義呢！

那咱們回到js代碼裏，添加methods屬性：

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

好了，能夠運行了，若是myClick方法須要加參數的話，也很簡單：<div @click="myClick(myData)">{{ myData }}</div>，固然，下面的定義部分也須要配上形參：

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

相信你看出來了，data裏面是放數據的，methods裏面是放方法的。

添加屬性

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

例如，有個<img>標籤的圖片路徑是動態的，那麼咱們就須要用上屬性綁定了：

<img :src="srcUrl" />
...
new Vue({
    el: '#app',    
    data: {     
        srcUrl: '../images/logo.png'
    }
})

警告：<img :src="srcUrl" />若是這個標籤的src屬性值是動態的，那就不要添加原生的src屬性，經過屬性綁定的方式引入路徑是最佳實踐，其餘屬性綁定也是同理。

更強的數據綁定

若是咱們有這樣一段數據：

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

須要用<ul>和<li>標籤渲染，給你十秒鐘想一想jQuery是怎麼作的？無論怎麼作，作出來都是悲劇！

咱們看看Vue是怎麼作的？

data: {
    list: arr
}
...
<ul>
    <li v-for="item in list">{{ item }}</li>
</ul>

如此一來，數據就能夠漂亮地渲染到頁面上了。

咱們再來個複雜點的數據：

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

給你十秒鐘想一想……

算了，仍是直接上vue吧

data: {
    list: json
}
...
<ul>
    <li v-for="item in json">{{ item.city }} {{ item.Temperature }}</li>
</ul>

在這裏只顯示了城市和溫度兩樣東西。你願意的話，能夠顯示更多。儘管數據好像複雜了不少，可是Vue應付起來並無多吃力。

好了，我想咱們的頁面已經足夠動態了，可是還不夠智能，怎麼說呢？例如上面的數據裏有個Wind的字段，將這個字段渲染到頁面上的時候，我並不但願所有渲染，我只想渲染風力級別，那我須要將前面的風向給去掉，這時候就須要加過濾器。

<li v-for="item in json">{{ item.Wind | cutWind }}</div>

Vue提供了內置的過濾器，但切割天氣顯然不是它內置的過濾器，所以咱們如今須要本身定義一個：

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

原本還應該加一個去空格的處理，但如今爲了演示就暫且無視空格吧……

Ajax

如今數據均可以動態渲染了，咱們須要考慮的就是，應該怎麼從服務端獲取數據，ajax庫有不少，Vue本來也本身實現了一個，但後來棄用了，緣由是不想重複造輪子。如今官方推薦的Ajax庫叫axios，它確實也是一個小巧而輕量的庫，體積大約是11k，一樣能夠經過<script>標籤引入。

使用起來也簡單，通常的ajax的POST請求：

var _this = this;
axios.post('../url', string)
.then(function(res) {
    _this.init(res);
});

看！axios將本身暴露了，它是個類庫！

然而，初始化的數據須要一載入頁面就發請求去獲取，咱們能夠將它寫入鉤子函數：

鉤子函數，也就是從建立Vue實例到銷燬的過程當中，每個階段提供出來的一個擴展接口，咱們能夠經過這些接口在特定的生命週期時刻執行相應的動做。

new Vue({
    el: '#app',    
    data: {     
        myData: ''
    },
    mounted: function() {
        var _this = this;
        this.$nextTick(function() {
            axios.post('./url', arg).then(function(res) {
                _this.init(res.data);
            });
        })
    },
    methods: {      
        myClick: function() {
        }
    }
})

init()就是咱們的初始化方法了。

打包

上面的知識點已經足夠支撐咱們完成一個平常項目，但這些語法層面的知識點只是表面，使用MVVM框架開發，關鍵是習慣專一於操做數據的思想，才能將代碼量從根本上減少。

如今，咱們完成一個項目後，須要打包，由於在開發環境下，運行所依賴的包達到好幾百個，爲了將文件體積縮減到正常範圍，必須按需打包。打包工具咱們選用的是webpack，爲何選它呢？由於幾乎沒別的選！

webpack如何配置，這個交給前端工程師就行了！

一個Vue的項目，目錄樹大體是這樣：

clipboard.png

/src目錄是源碼文件夾，裏面的都是源碼，開發環境都只打開這個文件。
/dist目錄是發佈文件夾，取自「distribution（發佈）」這個單詞，裏面的代碼都是正式代碼，全部資源都通過壓縮，所以不是給人看的。

對/src裏的文件作了相應的修改後，能夠查看package.json這個文件，找到

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

不一樣的項目可能略有差異，但webpack命令就是咱們須要的，這條命令的key是build，所以咱們在項目的命令行運行npm run build，便可完成打包，若是沒有報錯信息，說明一切順利，只須要將dist目錄裏的東西部署到線上便可。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程