當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

Mvvm、第一个Vue程序、Vue基本语法

發(fā)布時(shí)間：2025/3/12 vue 11 豆豆

生活随笔收集整理的這篇文章主要介紹了 Mvvm、第一个Vue程序、Vue基本语法小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一、MVVM概述

1.1、什么是MVVM

MVVM（Model-View-ViewModel）是一種軟件設(shè)計(jì)模式，由微軟WPF（用于替代WinForm，以前就是用這個(gè)技術(shù)開(kāi)發(fā)桌面應(yīng)用程序的）和Silverlight（類似于Java Applet，簡(jiǎn)單點(diǎn)說(shuō)就是在瀏覽器上運(yùn)行WPF）的架構(gòu)師Ken Cooper和Ted Peters開(kāi)發(fā)，是一種簡(jiǎn)化用戶界面的事件驅(qū)動(dòng)編程方式。由John Gossman（同樣也是WPF和Sliverlight的架構(gòu)師）與2005年在他的博客上發(fā)表。

MVVM源自于經(jīng)典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel層，負(fù)責(zé)轉(zhuǎn)換Model中的數(shù)據(jù)對(duì)象來(lái)讓數(shù)據(jù)變得更容易管理和使用。其作用如下：

該層向上與視圖層進(jìn)行雙向數(shù)據(jù)綁定
向下與Model層通過(guò)接口請(qǐng)求進(jìn)行數(shù)據(jù)交互

? MVVM已經(jīng)相當(dāng)成熟了，主要運(yùn)用但不僅僅在網(wǎng)絡(luò)應(yīng)用程序開(kāi)發(fā)中。當(dāng)下流行的MVVM框架有Vue.js，Anfular JS

1.2、為什么要使用MVVM

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

1、低耦合：視圖（View）可以獨(dú)立于Model變化和修改，一個(gè)ViewModel可以綁定到不同的View上，當(dāng)View變化的時(shí)候Model可以不變，當(dāng)Model變化的時(shí)候View也可以不變。
2、可復(fù)用：你可以把一些視圖邏輯放在一個(gè)ViewModel里面，讓很多View重用這段視圖邏輯。
3、獨(dú)立開(kāi)發(fā)：開(kāi)發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開(kāi)發(fā)（ViewMode），設(shè)計(jì)人員可以專注于頁(yè)面設(shè)計(jì)。
4、可測(cè)試：界面素來(lái)是比較難以測(cè)試的，而現(xiàn)在測(cè)試可以針對(duì)ViewModel來(lái)寫(xiě)。

View

View是視圖層，也就是用戶界面。前端主要由HTHL和csS來(lái)構(gòu)建， 為了更方便地展現(xiàn)viewmodel或者Hodel層的數(shù)據(jù)，已經(jīng)產(chǎn)生了各種各樣的前后端模板語(yǔ)言，比如FreeMarker，Thymeleaf等等，各大MVVM框架如Vue.js.Angular JS， EJS等也都有自己用來(lái)構(gòu)建用戶界面的內(nèi)置模板語(yǔ)言。

Model

Model是指數(shù)據(jù)模型，泛指后端進(jìn)行的各種業(yè)務(wù)邏輯處理和數(shù)據(jù)操控，主要圍繞數(shù)據(jù)庫(kù)系統(tǒng)展開(kāi)。這里的難點(diǎn)主要在于需要和前端約定統(tǒng)一的接口規(guī)則

ViewModel

ViewModel是由前端開(kāi)發(fā)人員組織生成和維護(hù)的視圖數(shù)據(jù)層。在這一層，前端開(kāi)發(fā)者對(duì)從后端獲取的Model數(shù)據(jù)進(jìn)行轉(zhuǎn)換處理，做二次封裝，以生成符合View層使用預(yù)期的視圖數(shù)據(jù)模型。
??需要注意的是View Model所封裝出來(lái)的數(shù)據(jù)模型包括視圖的狀態(tài)和行為兩部分，而Model層的數(shù)據(jù)模型是只包含狀態(tài)的

比如頁(yè)面的這一塊展示什么，那一塊展示什么這些都屬于視圖狀態(tài)(展示)
頁(yè)面加載進(jìn)來(lái)時(shí)發(fā)生什么，點(diǎn)擊這一塊發(fā)生什么，這一塊滾動(dòng)時(shí)發(fā)生什么這些都屬于視圖行為(交互)

視圖狀態(tài)和行為都封裝在了View Model里。這樣的封裝使得View Model可以完整地去描述View層。由于實(shí)現(xiàn)了雙向綁定， View Model的內(nèi)容會(huì)實(shí)時(shí)展現(xiàn)在View層，這是激動(dòng)人心的，因?yàn)榍岸碎_(kāi)發(fā)者再也不必低效又麻煩地通過(guò)操縱DOM去更新視圖。
??MVVM框架已經(jīng)把最臟最累的一塊做好了，我們開(kāi)發(fā)者只需要處理和維護(hù)View Model，更新數(shù)據(jù)視圖就會(huì)自動(dòng)得到相應(yīng)更新，真正實(shí)現(xiàn)事件驅(qū)動(dòng)編程。
??View層展現(xiàn)的不是Model層的數(shù)據(jù)，而是ViewModel的數(shù)據(jù)，由ViewModel負(fù)責(zé)與Model層交互，這就完全解耦了View層和Model層，這個(gè)解耦是至關(guān)重要的，它是前后端分離方案實(shí)施的重要一環(huán)。

二、Vue

Vue(讀音/vju/，類似于view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，發(fā)布于2014年2月。與其它大型框架不同的是， Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)(如：vue-router，vue-resource，vue x) 或既有項(xiàng)目整合。

2.1、MVVM模式的實(shí)現(xiàn)者

Model：模型層，在這里表示JavaScript對(duì)象
View：視圖層，在這里表示DOM(HTML操作的元素)
ViewModel：連接視圖和數(shù)據(jù)的中間件， Vue.js就是MVVM中的View Model層的實(shí)現(xiàn)者

在MVVM架構(gòu)中，是不允許數(shù)據(jù)和視圖直接通信的，只能通過(guò)ViewModel來(lái)通信，而View Model就是定義了一個(gè)Observer觀察者

ViewModel能夠觀察到數(shù)據(jù)的變化，并對(duì)視圖對(duì)應(yīng)的內(nèi)容進(jìn)行更新
ViewModel能夠監(jiān)聽(tīng)到視圖的變化，并能夠通知數(shù)據(jù)發(fā)生改變

至此，我們就明白了， Vue.js就是一個(gè)MVVM的實(shí)現(xiàn)者， 他的核心就是實(shí)現(xiàn)了DOM監(jiān)聽(tīng)與數(shù)據(jù)綁定

2.2、為什么要使用Vue.js

輕量級(jí)，體積小是一個(gè)重要指標(biāo)。Vue.js壓縮后有只有20多kb(Angular壓縮后56kb+，React壓縮后44kb+)
移動(dòng)優(yōu)先。更適合移動(dòng)端，比如移動(dòng)端的Touch事件
易上手，學(xué)習(xí)曲線平穩(wěn)，文檔齊全
吸取了Angular(模塊化) 和React(虛擬DOＭ) 的長(zhǎng)處，并擁有自己獨(dú)特的功能，如：計(jì)算屬性
開(kāi)源，社區(qū)活躍度高
……

三、第一個(gè)Vue程序

【說(shuō)明】IDEA可以安裝Vue的插件!

注意：Vue不支持IE 8及以下版本，因?yàn)閂ue使用了IE 8無(wú)法模擬的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的瀏覽器。

3.1、下載地址

開(kāi)發(fā)版本
- 包含完整的警告和調(diào)試模式：https：//yuejs.org/js/vue.js
- 刪除了警告， 30.96KBmin+gzip：https：//vuejs.org/js/vue.min.js
CDN
- <script src=“https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js”></script>
- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> 這兩個(gè)已經(jīng)變了，用下邊這個(gè) min壓縮版

3.2、代碼編寫(xiě)

Vue.js的核心是實(shí)現(xiàn)了MVVM模式，她扮演的角色就是View Model層，那么所謂的第一個(gè)應(yīng)用程序就是展示她的數(shù)據(jù)綁定功能，操作流程如下：

創(chuàng)建一個(gè)HTML文件

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script></head> <body> <div id="app">{{message}} </div><script type="text/javascript">var vm=new Vue({el: "#app",// MOdel：數(shù)據(jù)data: {message: "hello vue!"}}); </script></body> </html>

引入Vue.js

<script src="https://unpkg.com/vue/dist/vue.js"></script>

創(chuàng)建一個(gè)Vue實(shí)例

說(shuō)明：

el: '#vue'：綁定元素的ID
data:{message:'Hello Vue!'}：數(shù)據(jù)對(duì)象中有一個(gè)名為message的屬性，并設(shè)置了初始值 Hello Vue！

將數(shù)據(jù)綁定到頁(yè)面元素

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

說(shuō)明：只需要在綁定的元素中使用雙花括號(hào)將Vue創(chuàng)建的名為message屬性包裹起來(lái)，即可實(shí)現(xiàn)數(shù)據(jù)綁定功能，也就實(shí)現(xiàn)了View Model層所需的效果，是不是和EL表達(dá)式非常像?

3.3、完整的HTML

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <div id="app">{{message}} </div><script type="text/javascript">var vm=new Vue({el: "#app",// MOdel：數(shù)據(jù)data: {message: "hello vue!"}}); </script></body> </html>

3.4、測(cè)試

為了能夠更直觀的體驗(yàn)Vue帶來(lái)的數(shù)據(jù)綁定功能，我們需要在瀏覽器測(cè)試一番，操作流程如下：

在瀏覽器上運(yùn)行第一個(gè)Vue應(yīng)用程序，進(jìn)入開(kāi)發(fā)者工具

在控制臺(tái)輸入vm.message=‘HelloWorld’，然后回車，你會(huì)發(fā)現(xiàn)瀏覽器中顯示的內(nèi)容會(huì)直接變成HelloWorld

此時(shí)就可以在控制臺(tái)直接輸入vm.message來(lái)修改值，中間是可以省略data的，在這個(gè)操作中，我并沒(méi)有主動(dòng)操作DOM，就讓頁(yè)面的內(nèi)容發(fā)生了變化， 這就是借助了Vue的數(shù)據(jù)綁定功能實(shí)現(xiàn)的； MV VM模式中要求View Model層就是使用觀察者模式來(lái)實(shí)現(xiàn)數(shù)據(jù)的監(jiān)聽(tīng)與綁定，以做到數(shù)據(jù)與視圖的快速響應(yīng)。

四、Vue基本語(yǔ)法

1、v-bind

我們已經(jīng)成功創(chuàng)建了第一個(gè)Vue應(yīng)用!看起來(lái)這跟渲染一個(gè)字符串模板非常類似，但是Vue在背后做了大量工作。現(xiàn)在數(shù)據(jù)和DOM已經(jīng)被建立了關(guān)聯(lián)，所有東西都是響應(yīng)式的。我們?cè)诳刂婆_(tái)操作對(duì)象屬性，界面可以實(shí)時(shí)更新!
我們還可以使用v-bind來(lái)綁定元素特性!

用于綁定數(shù)據(jù)和元素屬性 v-bind:屬性
例如：綁定a標(biāo)簽的href屬性
<div class="app"><a v-bind:href="url">click me</a> </div>
上代碼
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title></head> <body> <div id="app"><span v-bind:title="message">鼠標(biāo)懸停幾秒鐘查看此處動(dòng)態(tài)綁定的提示信息！</span> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app",/*Model：數(shù)據(jù)*/data:{message: '頁(yè)面加載于 ' + new Date().toLocaleString()}}); </script> </body> </html>
你看到的v-bind等被稱為指令。指令帶有前綴v以表示它們是Vue提供的特殊特性。可能你已經(jīng)猜到了，它們會(huì)在渲染的DOM上應(yīng)用特殊的響應(yīng)式行為在這里，該指令的意思是：“將這個(gè)元素節(jié)點(diǎn)的title特性和Vue實(shí)例的message屬性保持一致”。
如果你再次打開(kāi)瀏覽器的JavaScript控制臺(tái)，輸入app.message=‘新消息’，就會(huì)再一次看到這個(gè)綁定了title特性的HTML已經(jīng)進(jìn)行了更新。

2、v-if， v-else

什么是條件判斷語(yǔ)句，就不需要我說(shuō)明了吧，以下兩個(gè)屬性!

v-if
v-else
上代碼
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="app"><h1 v-if="ok">Yes</h1><h1 v-else>No</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app",/*Model：數(shù)據(jù)*/data:{ok: true}}); </script> </body> </html>

測(cè)試：
1.在瀏覽器上運(yùn)行，打開(kāi)控制臺(tái)!
2.在控制臺(tái)輸入vm.ok=false然后回車，你會(huì)發(fā)現(xiàn)瀏覽器中顯示的內(nèi)容會(huì)直接變成NO
??注：使用v-*屬性綁定數(shù)據(jù)是不需要雙花括號(hào)包裹的

v-else-if

v-if
v-else-if
v-else
注：===三個(gè)等號(hào)在JS中表示絕對(duì)等于(就是數(shù)據(jù)與類型都要相等)上代碼：
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title> </head> <body>  <div id="app"><h1 v-if="type==='A'">A</h1><h1 v-else-if="type==='B'">B</h1><h1 v-else-if="type==='D'">D</h1><h1 v-else>C</h1> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script><script type="text/javascript">var vm = new Vue({el:"#app",/*Model：數(shù)據(jù)*/data:{type: 'A'}});</script> </body> </html>

3、v-for

v-for

<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><li v-for="item in items"> {{item.message}} </li></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app",/*Model：數(shù)據(jù)*/data:{items: [{message:"張三"},{message:"李四"}]}});</script> </body> </html>

再加一個(gè)index屬性，index自帶的屬性索引的意思

<div id="app"><li v-for="(item,index) in items">{{item.message}}---{{index}}</li> </div>

注：items是數(shù)組，item是數(shù)組元素迭代的別名。我們之后學(xué)習(xí)的Thymeleaf模板引擎的語(yǔ)法和這個(gè)十分的相似！
上代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body>  <div id="app"><li v-for="(item,index) in items">{{item.message}}---{{index}}</li></div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app",/*Model：數(shù)據(jù)*/data:{items:[{message:'狂神說(shuō)Java'},{message:'狂神說(shuō)前端'},{message:'狂神說(shuō)運(yùn)維'}]}}); </script> </body> </html>
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-ZTBI0lLh-1621221640205)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\1621042533074.png)]
測(cè)試：在控制臺(tái)輸入vm.items.push({message：'狂神說(shuō)運(yùn)維'})，嘗試追加一條數(shù)據(jù)，你會(huì)發(fā)現(xiàn)瀏覽器中顯示的內(nèi)容會(huì)增加一條狂神說(shuō)運(yùn)維.

v-on監(jiān)聽(tīng)事件
emsp;事件有Vue的事件、和前端頁(yè)面本身的一些事件!我們這里的click是vue的事件，可以綁定到Vue中的methods中的方法事件!
上代碼：
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="app"><button v-on:click="sayHi">click me</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app",/*Model：數(shù)據(jù)*/data:{message: "你好！！"},methods: { //方法必須定義在vue的methods對(duì)象中，v-on：事件 event要寫(xiě)上sayHi: function (event) {//this在方法中指向vue實(shí)例alert(this.message);}}}); </script> </body> </html>
點(diǎn)擊測(cè)試
Vue還有一些基本的使用方式，大家有需要的可以再跟著官方文檔看看，因?yàn)檫@些基本的指令幾乎我們都見(jiàn)過(guò)了，一通百通!掌握學(xué)習(xí)的方式!

總結(jié)

以上是生活随笔為你收集整理的Mvvm、第一个Vue程序、Vue基本语法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。