Vue入門教程（一）之基本使用

、MVVM簡介

如果你是第一次學前端，那么本節知識一定要了解，什么是MVVM。

MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。MVVM 就是將其中的View 的狀態和行為抽象化，讓我們將視圖 UI 和業務邏輯分開。當然這些事 ViewModel 已經幫我們做了，它可以取出 Model 的數據同時幫忙處理 View 中由于需要展示內容而涉及的業務邏輯。MVVM的核心是ViewModel層，負責轉換Model中的數據對象來讓數據變得更容易管理和使用。是一種簡化用戶界面的事件驅動編程方式。

下邊我們來畫張圖來大體了解下MVVM的工作原理圖：

該層向上與視圖層進行雙向數據綁定

向下與Model層通過接口請求進行數據交互

（1）View

View是視圖層，也就是用戶界面。前端主要由HTH L和csS來構建，為了更方便地展現vi eu to del或者Hodel層的數據，已經產生了各種各樣的前后端模板語言，比如FreeMarker，Thyme leaf等等，各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用來構建用戶界面的內置模板語言。

（2）Model

Model是指數據模型，泛指后端進行的各種業務邏輯處理和數據操控，主要圍繞數據庫系統展開。這里的難點主要在于需要和前端約定統一的接口規則

（3）ViewModel

ViewModel是由前端開發人員組織生成和維護的視圖數據層。在這一層，前端開發者對從后端獲取的Model數據進行轉換處理，做二次封裝，以生成符合View層使用預期的視圖數據模型。

View Model所封裝出來的數據模型包括視圖的狀態和行為兩部分，而Model層的數據模型是只包含狀態的

視圖狀態和行為都封裝在了View Model里。這樣的封裝使得View Model可以完整地去描述View層。由于實現了雙向綁定， View Model的內容會實時展現在View層，這是激動人心的，因為前端開發者再也不必低效又麻煩地通過操縱DOM去更新視圖。 MVVM框架已經把最臟最累的一塊做好了，我們開發者只需要處理和維護View Model，更新數據視圖就會自動得到相應更新，真正實現事件驅動編程。 View層展現的不是Model層的數據，而是ViewModel的數據，由ViewModel負責與Model層交互，這就完全解耦了View層和Model層，這個解耦是至關重要的，它是前后端分離方案實施的重要一環。

2、為什么要使用MVVM

MVVM模式和MVC模式一樣，主要目的是分離視圖（View）和模型（Model），有幾大優點

（1）低耦合。視圖（View）可以獨立于Model變化和修改，一個ViewModel可以綁定到不同的"View"上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。

（2）可重用性。你可以把一些視圖邏輯放在一個ViewModel里面，讓很多view重用這段視圖邏輯。

（3）獨立開發。開發人員可以專注于業務邏輯和數據的開發（ViewModel），設計人員可以專注于頁面設計，使用Expression Blend可以很容易設計界面并生成xaml代碼。

（4）可測試。界面素來是比較難于測試的，測試可以針對ViewModel來寫

3、VUE概述

（1）什么是vue?

Vue是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合

這是官網給出的介紹，可能不是那么容易理解。簡單來說，Vue是一個視圖層框架，幫助我們更好的構建應用。

使用Vue和原生JS一個最顯著的差別就是，Vue不再對DOM直接進行操作，而是通過對數據的操作，來改變頁面。使用Vue構建的頁面，是有一個個的組件組成的，當組件中定義的數據發生變化時，組件的顯示也會跟著變化，且此過程無需刷新頁面。

（2）MVVM模式的實現者

Model：模型層，在這里表示JavaScript對象 View：視圖層，在這里表示DOM(HTML操作的元素) ViewModel：連接視圖和數據的中間件， Vue.js就是MVVM中的View Model層的實現者在MVVM架構中，是不允許數據和視圖直接通信的，只能通過ViewModel來通信，而View Model就是定義了一個Observer觀察者

ViewModel能夠觀察到數據的變化，并對視圖對應的內容進行更新 ViewModel能夠監聽到視圖的變化，并能夠通知數據發生改變至此，我們就明白了， Vue.js就是一個MV VM的實現者，他的核心就是實現了DOM監聽與數據綁定

（3）為什么要使用Vue

易用：熟悉HTML、CSS、JavaScript之后，可快速度上手vue。學習曲線平穩。

輕量級：Vue.js壓縮后有只有20多kb，超快虛擬DOM

高效：吸取了Angular(模塊化) 和React(虛擬DOＭ) 的優勢，并擁有自己獨特的功能

開源：文檔齊全，社區活躍度高

4、VUE之Hello World!

步驟一：創建空文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

步驟二：引入vue.js (本人下載的開發版的vue.js，跟本html文件放在了同一目錄下，所以直接引用)

<script type="text/javascript" src="vue.js"></script>

步驟三：創建vue實例

<script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'Hello World'
            }
        });
</script>

步驟四：數據與頁面元素綁定

<div id="app">
        {{msg}}
</div>

完整的html

<!DOCTYPE html>
<html lang="en">
<body>
    <div id="app">
        {{msg}}
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'Hello World'
            }
        });
    </script>
</body>
</html>

瀏覽器打開：

參數分析：

el : '#app' -- 綁定元素的ID（元素的掛載位置，值可以是CSS選擇器或者是DOM元素）

data : { msg : 'Hello World' } -- 模型數據，屬性名：msg 值：Hello World

{{msg}} : 在綁定的元素中使用{{ }}將Vue創建的名為msg的屬性包起來，即可實現數據綁定功能，我們在調試狀態下手動修改下msg的值，在不刷新頁面的情況下就會展示我們修改后的值，這就是借助了Vue的數據綁定功能實現的。 MV VM模式中要求View Model層就是使用觀察者模式來實現數據的監聽與綁定，以做到數據與視圖的快速響應

下一篇：VUE入門教程（二）之模板語法（指令）

照規劃， Vue.js 框架的主迭代版本將在 2020 年第一季度發布，在 VueConf 多倫多會議上， Vue.js 的創始人兼項目領導者尤雨溪討論了 Vue 3 背后的設計理念以及新版本中添加的最新特性。

尤雨溪首先提到，與其他流行的框架不同，Vue 與任何公司都沒有關聯關系，因此 Vue 的開發是由 Vue 開發者社區以及如何更好地滿足他們的需求來驅動的。隨著 Vue 社區的發展，它也變得多樣化起來。尤雨溪將只具有基礎 HTML/CSS 知識的初學者、從 jQuery 轉移過來的專業人士、從其他框架遷移過來的老手、尋找前端解決方案的后端工程師以及處理大規模軟件的架構師進行了識別和區分。

開發社區中人群的多樣性其實對應了框架使用場景的多樣性。有些開發人員希望將交互性引入到遺留應用中，而有些人則只是想要處理一個一次性的項目，這樣的項目有快速的交付周期，但是在維護方面無需過多關注。針對這個話題，架構師想要處理的可能是一個要持續數年的大規模項目，而且在項目的生命周期之內，必然要面對開發人員的變動。

因此，Vue 在設計自身框架時需要面對受眾和使用場景多樣化的挑戰，這必然會導致一定的折衷。Vue 3 背后的一個核心驅動力在于，盡管開發人員都很欣賞 Vue 2 API 易于學習的特點，但是同樣的 API 在大規模使用時也出現了可維護性的問題。另一方面，為了滿足多樣化的需求，持續向框架添加特性會帶來 bundle 越來越重的風險。尤雨溪在四個維度對 Vue 3 發布版本的折衷和平衡進行了分組。

第一個折衷就是易用性（approchability）與可擴展性（scalability）。Vue 較低的進入壁壘是采用它的重要因素。盡管 Vue 想要保持對開發人員的易用性，但是在構建大型或復雜組件時，它必須要解決當前基于對象的 API（叫做 Options API）所暴露的問題。InfoQ 之前已經介紹過它的新 API（叫做 Component API），該 API 有望更好地為復雜組件分離關注點和可重用性。為了保持 Vue 的易用性，Component API 完全是附加和可選的。

與之類似，按照設計決策，Vue 3 將會使用 TypeScript 編寫。除了增強 Vue 代碼庫的可維護性以及更易于開發者為其貢獻之外，該決策還有兩個積極的影響。首先，隨著 TypeScript 的流行程度不斷增加并且已經成為大型項目的常見選擇，在 Vue 3 內部使用 TypeScript 能夠讓開發人員從 Vue 的 TypeScript 定義中收益，同時還得到現代 IDE 的常見代碼支持，如 Visual Studio Code 或 WebStorm。其次，即便不用 TypeScript，普通的 JavaScript 用戶也能受益于現代 IDE 的代碼智能特性。另外，尤雨溪認為 TypeScript 的 Vue 代碼其實 90% 都是 JavaScript，因為 Vue 類型定義只允許開發人員在其代碼的很少一部分上添加標注。

第二個維度的關注點是視圖聲明。Vue 2 同時支持模板和基于 JSX 的渲染函數（render function）。Vue 社區中熟悉 HTML 和 CSS 的那部分人看重對模板的支持，而沒有接觸過這些技術的開發人員則更喜歡渲染函數（尤雨溪暗示 iOS 開發人員適合這種方式）。Vue 3 試圖利用這兩種方式的優點。

一方面，模板提供了性能優化，Vue 3 在將模板編譯為優化后的渲染函數時利用了這一點，渲染函數本身會使用一個優化的數據結構來實現 diff 的目的。模板會明確分離靜態節點(<p> Lorm ipsum </p>）和動態節點（<span>{{message}}</span>），Vue 3 的 diff 算法可能會在一個特定的數據結構中跟蹤動態部分及其依賴。

另一方面，JSX 渲染函數允許開發人員借助 JavaScript 語言完整的表達能力來表達復雜的特殊（ad-hoc）邏輯。雖然在某些情況下，JSX 渲染函數非常實用并且是完全必要的，但是以通用的方式優化它所面臨的困難是眾所周知的。尤雨溪指出，要實現這一點需要非常聰明的流分析， Prepack Facebook 項目就是為了實現這一目標的，但是該項目卻因為困難而停滯不前。因此，Vue 3 維持了其雙重視圖聲明機制，同時尋求優化視圖模板的 diff 和渲染。

另外一項折衷就是功能的強大與項目的大小。隨著每個新特性的加入，每位用戶的 bundle 大小都可能會增加。Vue 3 以兩種方式來解決這個問題。尤雨溪首先指出，大多數的全局 API 和內部 Vue 輔助程序都會以 ES 模塊導出的形式提供，因此能夠實現搖樹（tree-shakeable）優化（一種代碼導入的優化技術，能夠實現死代碼消除，避免引入根本不會執行的代碼，參見維基百科。——譯者注）。另外，Vue 3 編譯器也會為模板生成搖樹優化的代碼。尤雨溪給出了如下使用 v-model 的樣例：

它將會被編譯為：

尤雨溪提到，這樣的話，Vue 3 核心的大小將會從 20KB 降低到 10KB。開發人員只需要以這個核心為基礎，添加他們所需的 Vue 模塊即可。

尤雨溪設想的最后一個折衷是一致性與低層級的靈活性。Vue 3 將通過更新 Vue Router 、 Vuex 和 test-utils 來提供一致的體驗，使它們與新的愿景保持一致。Vue 3 還將為開發者提供定義自己的渲染器的能力。React 中已經提供了這種能力，并被廣泛用于為各種托管環境創建渲染器，如移動設備或終端設備。

Vue 3 還將為自定義模板編譯過程輸出提供低層級 API。尤雨溪提到，工具可以利用該 API 來提供更好的 DX 或 UX（例如在 UI 標記中強化可訪問性特征）。特別是，開發人員可以定義自定義轉換，將其用于已解析的模板。雖然 Vue 社區將會推出什么還有待觀察，但是如果 Babel 社區有這種跡象的話，那么可以推測增強的模板語言（例如，帶有宏功能）有可能會出現。這些低層級工具的第一個應用程序是 Vue 3 模板瀏覽器，尤雨溪說新的 API 能夠讓他在一個下午就將其構建出來。

Vue 3 計劃在 2020 年第一季度發布。當前的 Vue 2 版本除了服務器端渲染之外，還有一些性能的改善，包括更小的庫和更快速、更輕量級的虛擬 DOM 實現，后者 fork 自 Snabbdom 。

完整的演講可以通過該地址訪問，其中包括一些擴展信息和樣例。Vue 是一個用于構建用戶界面（包括單頁面應用程序) 的漸進式框架。Vue.js 遵循 MIT 開源協議。歡迎通過 Vue.js GitHub 包對其進行貢獻并請遵循 Vue.js 貢獻指南。

原文鏈接：

New Features and Design Principles of Vue 3.0 - Evan You at VueConf Toronto

要

（OF作品展示）

OF之前介紹了用python實現數據可視化、數據分析及一些小項目，但基本都是后端的知識。想要做一個好看的可視化大屏，我們還要學一些前端的知識（vue），網上有很多比較復雜（需要執行各種各樣的命令）還不完整的教程，今天OF將完整地講解如何用vue做一張好看的可視化大屏。只要大家按照步驟操作下來，你也能實現自己的可視化項目。

主要內容：Vue編寫可視化大屏

適用人群：Python初學者，前端/Vue初學者

準備軟件：pycharm

安裝準備

在編寫大屏前，我們需要先安裝2個內容：vue插件和node.js。

在pycharm內安裝vue插件；（用pycharm安裝vue非常簡單，不需要一堆命令）

1.1 打開pycharm，點擊文件-設置-插件，在搜索欄中搜索“vue”，點擊install。等待安裝完成就可以了。

安裝node.js是為了使用npm指令的，下載地址：https://nodejs.org/en/

1.2 下載后按默認安裝即可（安裝路徑可自行修改）。

初識VUE

準備工作完成后，我們可以開始創建VUE項目。

2.1 點擊文件-新建項目，在彈出的窗口中選擇vue.js，然后在Location欄修改路徑地址，點擊右下角“creat”

2.2 我們可以看到剛創建好的vue項目，目錄是空白的，在pycharm的Terminal窗口下執行npm init，才能生成package.json文件，這步很重要。（注：若執行時報權限錯誤，我們就先刪除npmrc文件（C:\Users\{賬戶}\下的.npmrc文件））

2.3 初始化一個完整版的項目：在pycharm的Terminal窗口下執行vue init webpack myscreen命令，然后可以參考如下的一步步選擇和輸入，等待自動安裝。

2.4 安裝成功：出現以下內容，就是安裝成功了。

我們來說明下這個目錄各文件夾/文件的作用，我們主要用的是src文件夾下的內容。

Typescript

在vue中編寫代碼的方式和HTML比較類似，總體上就是3部分：

1）template：與HTML中的body一樣編寫需要展現的內容；

2）script：HTML常用javascript，；

3）style：與HTML中的style基本是一樣的。

編寫圖表前，為了便于初學者理解，我們用Typescript對script部分的屬性進行簡要說明。

TypeScript 程序由以下幾個部分組成：模塊（兩個模塊之間的關系是通過使用 import和export 建立的）、函數、變量、語句和表達式、注釋。

<script>
var [變量名] = 值    //變量
export default{    //模塊  
    name:'Percentage',
    props:{},      //props是子組件訪問父組件數據的唯一接口
    data(){    
      return {}
    },             //存儲數據的函數
    mounted(){},   //鉤子函數，html加載完成后執行,執行順序：子組件-父組件
    computed:{},   //計算屬性，也就是依賴其它的屬性計算所得出最后的值
    watch:{},      //監聽屬性，監聽一個值的變化，然后執行相對應的函數
    methods:{},    //事件方法執行
}
</script>

注：有引入sass樣式的，需要在terminal中執行以下命令（安裝低一些的版本），否則運行不會成功。

npm install sass-loader@7.3.1 --save-dev
npm install node-sass@4.14.1 --save-dev

可視化實現

通過以上3部分的準備工作，我們可以正式進入圖表內容的編寫，Vue強大的地方莫過于component組件應用的便利性。

4.1 OF以圓環圖為例，圖表要用的地方比較多，所以先新建了一個charts的文件夾，來存放各種圖表的vue文件，然后在charts文件夾中新建一個Vue Component文件，如下圖：

4.2 編寫圓環圖的初始化代碼，此次我們做3張圓環圖，那么我們的這個Percentage.vue就是父組件。

<template>
    <div class="percentage"> </div>
</template>
<script>
export default {
    name:'Percentage',
    props:{
        containerId:String,
        option:{}
    },
    data(){
        return {
            option1:{
                color:'#516c72',
                series: [{
                    type: 'gauge',
                    startAngle: 90,
                    endAngle: -270,
                    pointer: {
                        show: false
                    },
                    progress: {
                        show: true,
                        overlap: false,
                        roundCap: true,
                        clip: false,
                    },
                    axisLine: {
                        lineStyle: {
                           color: [[1, '#464646']],
                            width: 10,
                        }
                    },
                    splitLine: {
                        show: false,
                        distance: 0,
                        length: 10
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                        distance: 50,
                        backgroundColor:'red'
                    },
                    data: [{
                        value: 20,
                        detail: {
                            offsetCenter: ['0%', '0%']
                        }
                    },
                    ],
                    title: {
                        fontSize: 14
                    },
                    detail: {
                        width: 50,
                        height: 14,
                        fontSize: 14,
                        color: 'auto',
                        formatter: '{value}%'
                    }
                }]
            },
        }
    },
    methods:{
        initChart(newOption){
            if(newOption.series){
                this.option1.series[0].data[0].value = newOption.series[0].data[0].value ;
                this.option1.series[0].detail.formatter = newOption.series[0].detail.formatter;
                if(newOption.color){
                    this.option1.color = newOption.color
                }
            }
            let myChart = this.$echarts.init(
                document.getElementById(this.containerId)
            );
            //  console.log('this.option1',this.option1)
            myChart.setOption(this.option1);
        },
    }
}
</script>
<style scoped>
    .percentage{
        width: 100%;
        height: 100%;
    }
</style>

4.3 給3張圓環圖賦值，我們可以直接在Percentage.vue中寫，但是為了便于重復使用，我們再增加一個子組件：新建一個views文件夾，再在views文件夾下新建一個Man.vue的文件。(import Percentage from '../charts/Percentage')

<template>
  <div class="home">
   <div class="content_card">
       <div class="left_card">
            <div class="left_middle_card">
                <div class="left_middle_chart_card">
                        <div class="left_middle_left_chart_card">
                            <div class="safe_title_spec">人員信息總覽</div>
                            <div class="left_middle_left_chart_card_content">
                                <div class="tip">
                                    <h3 class="titletip">公司人數</h3>
                                    <div id="manchart" class="chart_card">
                                        <percentage ref="manpercentage" :containerId="'manchart'" :option="manoption"/>
                                    </div>
                                </div>
                                <div class="tip">
                                    <h3 class="titletip">出勤率</h3>
                                    <div id="man2chart" class="chart_card">
                                        <percentage ref="man2percentage" :containerId="'man2chart'" :option="man2option"/>
                                    </div>
                                </div>
                                <div class="tip">
                                    <h3 class="titletip">出差人數</h3>
                                    <div id="man3chart" class="chart_card">
                                        <percentage ref="man3percentage" :containerId="'man3chart'" :option="man3option"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
       </div>
   </div>
  </div>
</template>


<script>
// @ is an alias to /src
import Percentage from '../charts/Percentage'


export default {
  name: 'staff',
  components: {
    Percentage,
  },
  data(){
    return {
        manoption:{
            color:'#45e2f5',
            series: [{
                data: [
                    { name: 'itemA', value: 94}
                ],
                detail: {
                    formatter: '35人'
                }
            }]
        },
        man2option:{
            color:'#b7e8e4',
            series: [{
                data: [
                    { name: 'itemA', value: 50}
                ],
                detail: {
                    formatter: '{value}%'
                }
            }]
        },
        man3option:{
            color:'#7a9ae7',
            series: [{
                data: [
                    { name: 'itemA', value: 17 }
                ],
                detail: {
                    formatter: '17人'
                }
            }]
        },


    }
  },
  mounted(){
      this.chartInit()


  },
  methods:{
    chartInit(){
        this.$refs.manpercentage.initChart(this.manoption)
        this.$refs.man2percentage.initChart(this.man2option)
        this.$refs.man3percentage.initChart(this.man3option)


    },


  }
}
</script>
<style lang="scss" scoped>
.home{
    height: 100%;
    background-color: #111;
    padding: 1%;
    .content_card{
        width: 100%;
        height: 95%;
        display: flex;
        justify-content: flex-start;
        // margin-top: 2%;
        .safe_title_spec{
            height: 50%;
            background: url(data:image/png) no-repeat;
            background-size: contain;
            color: #fff;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            text-indent: 2rem;
        }


        div{
            width: 100%;
            //height: 100%;
            // border: 1px solid white;
        }
        >div.left_card{
            width: 60%;
            height: 100%;


            .left_middle_card{
                width: 100%;
                height:90%;


                .left_middle_chart_card{
                    height: 80%;
                    display: flex;


                    .tip{


                        .titletip{
                            font-size: 1.5rem;
                            color: #fff;
                        }
                    }


                    .left_middle_left_chart_card{
                        height: 100%;
                        width: 50%;
                        margin-top: 1%;


                        .left_middle_left_chart_card_content{
                            height: 100%;
                            display: flex;
                            .chart_card{
                                height: 150px;
                                width: 180px;
                            }
                        }
                    }


                }


            }
        }


    }
}
</style>

4.4 配置路由，點擊router文件夾-進入index.js，將代碼修改成如下：

4.5 運行vue，有兩種方式：

1）點擊pycharm下方的terminal，執行運行命令npm run dev

2）在右上角設置npm運行配置，好處是設置后，以后我們就可以直接點擊運行，如下圖

運行結果：

點擊鏈接，會自動打開瀏覽器

我們可以看到有個V的標志，我們可以去App.vue文件中，刪掉以下的圖片內容就可以了

刪掉這段代碼后，不需要重新點擊運行，剛打開的瀏覽器會自動更新結果

這個呢要感謝在Man.vue中的以下這段代碼，：

mounted(){
    this.chartInit()
},  //mounted(){}鉤子函數，html加載完成后執行,執行順序：子組件-父組件

總結

同學們有沒有看暈啊，來回的各文件里一頓操作，其實挺簡單的，OF總結下需要編寫代碼的文件結構。

快新的一年了，提前祝大家新年快樂，總結下自己，看今年有沒有學到新技能，完成自己的目標！

在線咨詢

上一篇：深度學習自動前端開發：從草圖到HTML只需5秒
下一篇：網頁在線視頻播放代碼大全

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Vue入門教程（一）之基本使用

要

初識VUE

Typescript

可視化實現

總結

您的項目需求