Vue2學習之旅三：基礎篇（什麼是Vue?何時使用？）

做者：心葉
時間：2018-04-26 15:56

本篇最終項目文件Github地址：github.com/paper520/vue.quick/tree/V3

Vue2學習之旅系列文章目錄

寫在前面

本文是對vue以及相關知識的理解，重點不在知識自己上，而是理解這些知識存在的意義。

爲何會有這篇文章，主要是考慮有的人可能會感受，說了這麼多vue，也會用了，可仍是昏昏的，我的也感受明明白白是很重要的，所以在正式開始以前先好好說清楚。

下面使用按部就班的問答方式進行。

什麼是vue?

大體說明

嚴格的說，vue就是一個JavaScript庫，你把他當作一個框架也無傷大雅，反正就是一個提供了不少便捷的前端開發的東西，相似Jquery，不過提供的東西更豐富了。

通過前面的學習你應該感覺出來了，使用他提供的接口或者說規範，反正就是在他規定的世界觀裏面開發，他會幫你實現你想要的功能，而他的世界裏面，彷彿一切都沒有原生那麼痛苦。

所以，歸結到本質仍是瀏覽器自己語言系列（HTML+CSS+JavaScript）和一些開發技巧，再加上vue的世界觀就是vue了。

舉例說明

通過上面的文字說明，你可能仍是不想理解我想說什麼，下面舉一個例子來簡單感覺一下：

【需求】頁面上有二個輸入框（一個用來輸入姓名，一個用來輸入國籍）和一塊用來顯示提示信息的地方，提示信息的內容爲：【編輯時間】姓名，來自+國籍。提示信息須要根據你的輸入隨時改變，咱們直接看看vue是如何實現的（本文所有例子都放在以前的【這是頁面一】那一頁裏面，也就是PageOne.vue，菜單更名爲：Vue基礎部分），看看修改後的PageOne.vue裏面的內容：

<template>
    <article>
        <section>
            <header>
                用例一
            </header>
                    姓名：<input type="text" name="name" v-model="name"><br />
                    國籍：<input type="text" name="country" v-model="country"><br />
                    提示信息：{{infoMessage}}
        </section>
    </article>
</template>

<script>
export default {
  data() {
    return {
      name: "心葉",
      country: "中國"
    };
  },
  computed: {
    infoMessage: function() {
      return (
        "【" + new Date() + "】" + this.name + ",來自" + this.country + "!"
      );
    }
  }
};
</script>

<style scoped>
article {
  font-size: 16px;
  padding: 10px;
}
header{
    color:red;
    font-size: 20px;
}
</style>

先看看效果：

在代碼裏面，主要是template模板裏面和script代碼須要說明一下：

1.template裏面有二個輸入框，須要注意的是他們都分別有一個v-model屬性，你能夠理解這個屬性的意思就是這個輸入框的值和vue對象裏面對應的屬性關聯起來了，好比姓名輸入框，若是vue對象的name屬性改變這個值也會跟着改變，反過來同樣；

2.template裏面的信息顯示方法是{{infoMessage}}，就是規定vue對象的infoMessage屬性改變，這個地方對應改變；

3.script標籤裏面，和template對應，先定義了name和country，而後定義infoMessage的時候比較奇怪，其實這個叫計算屬性，從代碼能夠看出來，他是在name或country改變的時候自動修改，固然，前面的日期也從新獲取了，所以時間會自動改變。

上面代碼的意思具體是什麼不是那麼重要，重要的是，很明顯在開發難度上，這樣要比不用vue實現起來容易多了。

vue會幫助咱們幹不少事情，上面就是一個例子，而咱們，僅僅須要遵循vue的世界觀就能夠了（不要想的太複雜）。

理解總結

所以，根據我的的體會，學習vue，或者說學習別的類庫或者框架，首先不要去排斥他，先從思想的高度去理解他，而後用幾個例子去體會他，接着看看官方文檔，最後用一個完整例子試一試就差很少了。

只要入門了，深刻的東西慢慢來，一步步來，你知道他有哪些東西，不會都沒事，須要的時候能夠想起來就能夠了，最重要的仍是核心的東西和經驗的積累。

vue的東西不少，也不是一個項目要所有用到，根據需求，搭建適合本身的目錄結構。

不管什麼時候，都不要忘記思考本質的東西，千萬別在各類類庫、框架和新技術中迷失方向（忽然想起來前幾天看霍金視頻裏面的一句話：不管生活如何艱苦，都不要忘記仰望星空！）。

何時使用？

何時使用這個問題真的太難了，由於我根本不知道你想幹什麼。

不過對於這些東西，我想說說本身的體會：

用框架或者類庫的好處很明顯，而壞處又未嘗不是顯而易見，你會發現你須要學習不少新的東西，而這些東西仍是一直變更的（好吧，前端本身原本就變的很快），若是出了錯誤（框架或者類庫本身的設計問題），解決起來比較不舒服（簡單使用應該遇不到）。

這固然不該該是做者的錯，舉個例子，若是你不用電腦，就永遠不會須要去思考電腦壞了怎麼辦，固然，你也沒法獲取電腦提供的服務。

不過，有些人是須要電腦的，有些人可能並不須要，一個簡單計算器可能更加方便，至少計算器可比電腦便宜多了，vue也是同樣，一個簡單項目可能沒有使用vue更好。

總結

原本想更系統的說說本身的理解，感受語言功底欠缺，寫的有錯誤的地方，還請幫忙糾正，若是能夠給你學習vue或者前端的路上提供思想上的幫助，這篇文件也就有了存在的價值！