超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

vue.js前端框架:Vue.js簡(jiǎn)介

2021-4-12    前端達(dá)人

1 Vue.js概述

  • Vue.js(讀音 /vju?/,類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是,它只關(guān)注視圖層(View層),采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。Vue.js的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的API實(shí)現(xiàn)相應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。它不僅容易上手,還非常容易與其他庫(kù)或已有項(xiàng)目進(jìn)行整合。另一方面,當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí),Vue .js也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。

1.1 什么是Vue.js

  • Vue.js實(shí)際上是一個(gè)用于開(kāi)發(fā)Web前端界面的庫(kù),其本身具有響應(yīng)式編程和組件化的特點(diǎn)。所謂響應(yīng)式編程,即保持狀態(tài)和視圖的同步。響應(yīng)式編程允許將相關(guān)模型的變化自動(dòng)反映到視圖上,反之亦然。Vue.js采用的是MVVM(Model-View-ViewModel)的開(kāi)發(fā)模式。與傳統(tǒng)的MVC開(kāi)發(fā)模式不同,MVVM將MVC中的Controller改成了ViewModel。在這種模式下,View的變化會(huì)自動(dòng)更新到ViewModel,而ViewModel的變化也會(huì)自動(dòng)同步到View上進(jìn)行顯示。
  • ViewModel模式的示意圖如下圖所示:
    在這里插入圖片描述
  • 與ReactJS一樣,Vue.js同樣擁有”一切都是組件“的理念。應(yīng)用組件化的特點(diǎn),可以將任意封裝好的代碼注冊(cè)成標(biāo)簽,這樣就在很大程度上減少了重復(fù)開(kāi)發(fā),提高了開(kāi)發(fā)效率和代碼復(fù)用性。如果配合Vue.js的周邊工具vue-loader,可以將一個(gè)組件的HTML、CSS、JavaScript代碼都寫在一個(gè)文件中,這樣可以實(shí)現(xiàn)模塊化的開(kāi)發(fā)。

1.2 Vue.js的特性

  • Vue.js的主要特性如下:
  •  輕量級(jí)
    相比較AngularJS和ReactJS而言,Vue.js是一個(gè)更輕量級(jí)的前端庫(kù)。不但容量非常小,而且沒(méi)有其它的依賴。
  •  數(shù)據(jù)綁定
    Vue.js最主要的特點(diǎn)就是雙向的數(shù)據(jù)綁定。在傳統(tǒng)的Web項(xiàng)目中,將數(shù)據(jù)在視圖層展示出來(lái)后,如果需要再次修改視圖,需要通過(guò)獲取DOM的方法進(jìn)行修改,這樣才能維持?jǐn)?shù)據(jù)和視圖的一致。而Vue.js是一個(gè)響應(yīng)式的數(shù)據(jù)綁定系統(tǒng),在建立綁定后,DOM將和Vue對(duì)象中的數(shù)據(jù)保持同步,這樣就無(wú)須手動(dòng)獲取DOM的值再同步到 js中。
  •  應(yīng)用指令
    同AngularJS一樣,Vue.js也提供了指令這一概念。指令用于在表達(dá)式的值發(fā)生變化時(shí),將某些行為應(yīng)用到綁定的DOM上,通過(guò)對(duì)應(yīng)表達(dá)式值的變化就可以修改對(duì)應(yīng)的DOM。
  •  插件化開(kāi)發(fā)
    與AngularJS類似,Vue,js也可以用來(lái)開(kāi)發(fā)一個(gè)完整的單頁(yè)應(yīng)用。在Vue.js的核心庫(kù)中并不包含路由、Ajax等功能,但是可以非常方便地加載對(duì)應(yīng)插件來(lái)實(shí)現(xiàn)這樣的功能。例如,vue-router插件提供了路由管理的功能,vue-resource插件提供了數(shù)據(jù)請(qǐng)求的功能。

2 Vue.js的安裝

2.1 直接下載并使用 script 標(biāo)簽引入

  • Vue.js官網(wǎng):https://cn.vuejs.org/v2/guide/
  • 在Vue.js的官方網(wǎng)站中可以直接下載vue.js文件并使用 script標(biāo)簽引入。
    1、下載Vue.js
    Vue.js是一個(gè)開(kāi)源的庫(kù),可以從它的官方網(wǎng)站中下載。下面介紹具體的下載步驟:
    (1)打開(kāi)Vue.js的官方網(wǎng)站,進(jìn)入到Vue.js的下載頁(yè)面,找到如下圖1.2所示的內(nèi)容。
    在這里插入圖片描述
    (2)根據(jù)開(kāi)發(fā)者的實(shí)際情況選擇不同的版本進(jìn)行下載。這里以下載開(kāi)發(fā)版本為例,在”開(kāi)發(fā)版本“按鈕上單擊鼠標(biāo)右鍵,如下圖1.3所示。
    在這里插入圖片描述
    (3)在彈出的快捷菜單中單擊“連接另存為”選項(xiàng),彈出下載對(duì)話框,如下圖1.4所示,單擊對(duì)話框中的“保存”按鈕,將Vue.js文件下載到本地計(jì)算機(jī)上。在這里插入圖片描述此時(shí)下載的文件為完整不壓縮的開(kāi)發(fā)版本。如果在開(kāi)發(fā)環(huán)境下,推薦使用該版本,因?yàn)樵摪姹局邪谐R?jiàn)錯(cuò)誤相關(guān)的警告。如果在生產(chǎn)環(huán)境下,推薦使用壓縮后的生產(chǎn)版本,因?yàn)槭褂蒙a(chǎn)版本可以帶來(lái)比開(kāi)發(fā)環(huán)境下更快的速度體驗(yàn)。
  • 引入Vue.js
    將Vue.js下載到本地計(jì)算機(jī)后,還需要在項(xiàng)目中引用Vue.js。即將下載后的vue.js文件放置到項(xiàng)目的指定文件夾中。通常文件放置在JS文件夾中,然后在需要應(yīng)用vue.js文件的頁(yè)面中使用下面的語(yǔ)句,將其引入到文件中。
<script type="text/javascript" src="JS/vue.js"></script> 
  • 1

注意:引入Vue.js的 script 標(biāo)簽,必須放在所有的自定義腳本文件的script 之前,否則在自定義的腳本代碼中應(yīng)用步到Vue.js。

2.2 使用CDN方法

  • 在項(xiàng)目中使用Vue.js,還可以采用引用外部CDN文件的方式。在項(xiàng)目中直接通過(guò) script 標(biāo)簽加載CDN文件,通過(guò)CDN文件引用Vue.js的代碼如下:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script> 
  • 1

注意:為了防止出現(xiàn)外部CDN文件不可用的情況,還是建議用戶將Vue.js下載到本地計(jì)算機(jī)中。

2.3 使用NPM方法

  • 在使用Vue.js構(gòu)建大型應(yīng)用時(shí),推薦使用NPM方法進(jìn)行安裝,執(zhí)行命令如下:
npm install vue 
  • 1

注意:使用NPM方法安裝Vue.js需要在計(jì)算機(jī)中安裝node.js。
node;js官網(wǎng):https://nodejs.org/en/,通過(guò)node.js官網(wǎng)下載之后,傻瓜式安裝即可。

3 前端框架開(kāi)發(fā)工具

  • 利用Vue.js進(jìn)行前端框架開(kāi)發(fā)的常用工具有如下幾個(gè):WebStorm、IDEA、Vscode

  • 前端框架開(kāi)發(fā)常用的工具下載:
    (1)WebStorm官網(wǎng):https://www.jetbrains.com/webstorm/
    (2)IDEA官網(wǎng):https://www.jetbrains.com/idea/
    (3)Vscode官網(wǎng):https://vscode.en.softonic.com/

  • 轉(zhuǎn)自:csdn 作者:小白_xm

分享本文至:

日歷

鏈接

個(gè)人資料

存檔