vue學習筆記(一)入門

阿新 • • 發佈：2019-11-07

前言

隨著前端不斷的壯大，許多公司對於前端開發者的需求也越來越多了，作為一名優秀的前端工程師，如果連vue和react都不會的話，那真是out了，為什麼那麼說呢？這是我在招聘網站上截的一張圖，十家公司有九家都是需要對vue或者react熟悉，當然僅僅熟悉肯定是不夠的，畢竟掌握住了才能保住自己的鐵飯碗，否則的話可能會被炒魷魚，精通vue或者react話就可能就需要很長時間了，反正我是不敢說精通，只能說了解。那麼一起來看看vue到底是什麼東西吧!

本章目標

瞭解vue是什麼
區別框架和庫
瞭解vue的優點
入門第一個vue例項

vue.js是什麼

首先我需要說的是vue.js是國人開發的，作者是尤玉溪，重要事情說三遍：作者是中國人，作者是中國人，作者是中國人！！！！

在這裡我就直接用官網的解釋了，畢竟官網的解釋是比較詳細的，Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。大家可能對於漸進式不太瞭解，這裡我給大家找了一張有關漸進式的圖片。

宣告式渲染：

常見的有v-if，v-for，v-html等，主要是vue的基本語法

元件系統：

元件系統的話，我們可以認為將可複用的程式碼作為一個模板，方便維護和管理，常見的有父子元件通訊。

客戶端路由：

路由的話可以理解為一個連結，通常可以用做SPA單頁應用。

大規模狀態管理：

狀態管理的話，博主暫時也不太瞭解，等以後瞭解之後再回來補充

構建工具：

構建工具的話主要將小模組進行整合，我們開發有些專案的時候可能的一個小模組小模組的開發，等待全部開發完成之後，我們就需要將這些模組進行整合，而vue-cli腳手架正好起到了這個作用，vue-cli我們以後會談到。

框架和庫的區別

一提到框架，很多人就會聯想到庫，畢竟在沒有接觸到框架之前我們都是使用庫的(jQuery)，那麼什麼是庫，什麼是框架呢？我總結如下

框架

框架是為了解決一類問題而開發出來的產品，基於自身的特點向用戶提供一套完整的解決方案，例如：vue，react,angular等前端三大主流框架

在這裡我們可能不太瞭解框架的意思，你可以這樣理解，框架的話，主動權在它手上，我們必須遵守它制定的一系列規則，如果我們不遵守的話，我們就使用不了框架或者框架會丟擲異常資訊，例如：在vue中資料必須寫在data中，方法必須寫在methods中，當然有些既可以當做方法也可以當做計算屬性。這個我們後面會提到，現在只是拋磚引玉。

庫

庫是將程式碼集合成一個產品，供開發者去使用，開發者去呼叫庫中的方法去實現自己的功能，例如：jQuey,zepto，

庫的話我們就是拿來即用，之前也沒有去想過或者弄懂庫是什麼東西，我自己總結是：庫的主動權在我們手上，例如：在jQuery中我們獲取某個節點是$('[類名/id]')這種操作，但是我們也可以使用javascript中的原生方法document.getElementById('id')或者document.getElementsByClassName('class'),主動權在我們自己的手上，我們想使用jQuey中的方法就使用jQuey中的方法，想使用原生的js方法就是用js原生的方法。

講到這裡，希望對大家瞭解框架和庫有所幫助，這裡主要是我個人的理解。

vue的優點

易用：

會html,css,js即可上手

靈活：

不斷繁榮的生態系統，可以在一個庫和一套完整框架之間自如伸縮

高效：

20kB min+gzip大小，超快虛擬DOM,最省心的優化

第一個vue例項

中文官網：https://cn.vuejs.org/

英文官網：https://vuejs.org

學習資料：https://www.bilibili.com/video/av62914998?from=search&seid=6339600099504545137

在進行第一個vue例項之前，我們需要先下載vue，進入官網之後我們找到安裝，安裝方法暫定三種

直接用 `<script>` 引入

直接下載並用 <script> 標籤引入，Vue 會被註冊為一個全域性變數

CDN引入

1.對於製作原型或學習，你可以這樣使用最新版本：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.對於生產環境，我們推薦連結到一個明確的版本號和構建檔案，以避免新版本造成的不可預期的破壞：<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

3.如果你使用原生 ES Modules，這裡也有一個相容 ES Module 的構建檔案：<script type="module"> import Vue from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js' </script>

NPM安裝

在用 Vue 構建大型應用時推薦使用 NPM 安裝。NPM 能很好地和諸如 webpack 或 Browserify 模組打包器配合使用。同時 Vue 也提供配套工具來開發單檔案元件。

命令：npm install vue

在這裡我提倡使用開發環境的vue.js而不是生產環境的vue.js，開發環境的vue.js對於我們來說除錯比較方便，哪裡出錯了需要修改也比較容易，一起來看看案例吧！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>入門第一個vue例項</title>
    </head>
    <body>
        <div id="app">
            {{msg}}
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vue=new Vue({
                el:'#app',
                data:{
                    msg:'你好'
                }
            })
        </script>
    </body>
</html>

注意：資料必須寫在data裡面

總結

本章我們主要從四個方面進行了講解，分別是瞭解vue，區別框架和庫，瞭解vue的優點，入門第一個vue例項，本章內容也相對簡單，主要是入門第一個vue例項，如果文章有理解錯誤的地方，或者你認為有更好的解釋的，請在下方留下您的評論，感謝支援！下一章我們學習vue的生命週期和鉤子函式。本章內容到此結