前言

隨着前端不斷的壯大，許多公司對於前端開發者的需求也越來越多了，作爲一名優秀的前端工程師，如果連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，進入官網之後我們找到安裝，安裝方法暫定三種

直接用

直接下載並用

CDN引入

1.對於製作原型或學習，你可以這樣使用最新版本：

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的生命週期和鉤子函數。本章內容到此結束。

一隻流浪的kk

發佈了22 篇原創文章 · 獲贊 17 · 訪問量 1782

私信關注

vue學習筆記(一)入門

前言