Vue入門到關門之Vue介紹與使用

Xiao0101發表於2024-04-30
Vue

一、vue框架介紹

1、什麼是Vue？

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

2、Vue框架的構造

  • Vue採用了M-V-VM（Model-View-ViewModel）的思想，它是一種基於前端開發的架構模式，也是一種事件驅動的程式設計方式。
  • 除了M-V-VM，還有其他一些常見的架構模式
    • 例如
      • MTV（Model-Template-View）
      • MVC（Model-View-Controller）
      • MVP（Model-View-Presenter）。
  • 然而
    • 在前端開發中，MVVM和元件化開發、單頁面開發（SPA）結合使用的情況比較普遍。
  • 目前，Vue的最新版本是Vue4，但並沒有公司在使用
    • 主流的公司專案基本上會採用Vue3
    • 而老專案仍然繼續使用Vue2。

3、MVC和MVVM的區別

（1）MVC

MVC 是 Model View Controller 的縮寫

  • Model：模型層，是應用程式中用於處理應用程式資料邏輯的部分。通常模型物件負責在資料庫中存取資料。

  • View：檢視層，使用者介面渲染邏輯，通常檢視是依據模型資料建立的。

  • Controller：控制器，資料模型和檢視之間通訊的橋樑，通常控制器負責從事圖讀取資料，控制使用者輸入，並向模型傳送資料。

image

MVC的思想：Controller負責將Model的資料用View顯示出來，換句話說就是在Controller裡面把Model的資料賦值給View。

MVC的特點：實現關注點分離，即應用程式中的資料模型與業務和展示邏輯解耦。就是將模型和檢視之間實現程式碼分離，鬆散耦合，使之成為一個更容易開發、維護和測試的客戶端應用程式。

MVC的優點：

  • 耦合度低，檢視層和業務層分離

  • 重用度高

  • 生命週期成本低

  • 可維護性高

  • 部署快

MVC的缺點：

  • 不適合小型專案的開發

  • 檢視與控制器間的過於緊密的連線，檢視與控制器是相互分離，但卻是聯絡緊密的部件，妨礙了他們的獨立重用

  • 降低了檢視對模型資料的訪問，依據模型操作介面的不同，檢視可能需要多次呼叫才能獲得足夠的顯示資料。對未變化資料的不必要的頻繁訪問，也將損害操作效能。

MVC的應用：主要用於中大型專案的分層開發。

MVC的例子： 舉一個例子，頁面有一個 id 為 container 的 span，點選按鈕會讓其內容加 1：

  • view：
<div>
  <span id="container">0</span>
  <button id="btn">+</button>
</div>
  • controller：
const button = document.getElementById('btn');
// 響應檢視指令
button.addEventListener('click', () => {
  const container = document.getElementById('container');
  
  // 呼叫模型
  add(container);
}, false);
  • model：
function add (node) {
  // 業務邏輯處理
  const currentValue = parseInt(node.innerText);
  const newValue = currentValue + 1;
  
  // 更新檢視
  node.innerText = current + 1;
}

這樣就把資料更新分的比較明確了。

（2）MVVM

MVVM是Model-View-ViewModel的簡寫，即模型-檢視-檢視模型。

  • Modal：模型，指的是後端傳遞的資料。

  • View：檢視，指的是所看到的頁面。

  • ViewModal：檢視模型，mvvm模式的核心，它是連線view和model的橋樑。主要用來處理業務邏輯

image

它有兩個方向：

  • 一是將模型轉化成檢視，即將後端傳遞的資料轉化成所看到的頁面。實現的方式是：資料繫結。

  • 二是將檢視轉化成模型，即將所看到的頁面轉化成後端的資料。實現的方式是：DOM 事件監聽。

這兩個方向都實現的，就是資料的雙向繫結。

MVVM的特點： 在MVVM的框架下，檢視和模型是不能直接通訊的，它們透過ViewModal來通訊，ViewModel通常要實現一個observer觀察者，當資料發生變化，ViewModel能夠監聽到資料的這種變化，然後通知到對應的檢視做自動更新，而當使用者操作檢視，ViewModel也能監聽到檢視的變化，然後通知資料做改動，這實際上就實現了資料的雙向繫結。並且MVVM中的View 和 ViewModel可以互相通訊。

MVVM的優點：

MVVM模式的主要目的是分離檢視（View）和模型（Model），有幾大優點：

  • 低耦合，檢視（View）可以獨立於Model變化和修改，一個ViewModel可以繫結到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。

  • 可重用性，可以把一些檢視邏輯放在一個ViewModel裡面，讓很多view重用這段檢視邏輯。

  • 獨立開發，開發人員可以專注於業務邏輯和資料的開發（ViewModel），設計人員可以專注於頁面設計，使用Expression Blend可以很容易設計介面並生成xml程式碼。

  • 可測試，介面向來是比較難於測試的，而現在測試可以針對ViewModel來寫

  • 雙向資料繫結，它實現了View和Model的自動同步，當Model的屬性改變時，不需要手動操作Dom元素，來改變View的顯示，而是改變屬性後該屬性對應View層顯示會自動改變

MVVM適用場景： 適合資料驅動的場景，資料操作比較多的場景

二、vue簡單使用

1、第一個Hello World

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    本地引入-->
<!--    <script src="./vue/vue.js"></script>-->
<!--    CDN引入-->
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="d1">
    <h1>{{s}}</h1>
</div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: '#d1',
        data: {
            s: 'Hello World'
        }
    })
</script>
</html>

2、Vue的響應式原理

響應式原理：資料變了--->頁面會變資料也會變

（1）理解代理物件

// 定義源物件obj1
let obj1 = {
    name:'張三',
    age:20
}
//定義代理物件obj2，代理源物件obj1
let obj2 = obj1
console.log('obj2:',obj2);
// 代理物件修改了源物件的資料
obj2.name = '李四'
obj2.age = 30
console.log(obj1);  // {name: "李四", age: 30}

（2）Vue的data和_data

// 定義源物件
let myData = {
    name: '張三',
    age: 20
}
let mx = new Vue({
    // 將源物件傳遞給Vue的data，背後做了兩件事
    // 1、設定Vue例項的_data屬性，作為當前源物件的代理物件。（響應式的核心）
    // 2、將_data裡面代理的所有資料，再新增到當前Vue例項身上，也就是vm身上。（方便直接呼叫資料）
})
// 透過改變vue例項的屬性可以改變源物件的屬性值
mx.name = '王五'
mx.age = 40
console.log(myData);  // {name: "王五", age: 40}

（3）給物件新增屬性的多種方式

  • 第一種方式：使用點 .
  • 第二種方式：使用中括號 [ ]
  • 第三種方式：使用Object.defineProperty方法
// 方式一
let obj3 = {}
obj3.name = '張三'
// 方式二
obj3['age'] = 20
//方式三
// 這種方式，給物件新增成員，儘管繁瑣，但是可以配置更多的功能。
// 預設新增的屬性是不允許刪除的，如果要允許刪除，就需要新增configurable配置。
// 預設新增的屬性是不允許列舉的，所謂列舉指的就是遍歷。
Object.defineProperty(obj3,'sex',{
    // 屬性值
    value:'男',
    // 允許被列舉（預設不允許）
    enumerable:true,
    // 允許被刪除（預設不允許）
    configurable:true
})
// 列舉出物件的所有屬性（其實就遍歷出物件的所有屬性名）
// 如果sex屬性沒有設定允許被列舉，就不能被列舉
for(let key in obj3){
    console.log(key);
}
// 透過delete關鍵，可以刪除物件身上的指定屬性
delete obj3.name
delete obj3.sex   // 如果sex屬性沒有設定允許被刪除，就不能被刪除

三、模版語法

1、介紹

  • 模版語法也可以叫做插值表示式，插值表示式使用者把vue中所定義的資料,顯示在頁面上.。插值表示式允許使用者輸入"JS程式碼片段"。

2、語法

  • 插值語法使用 {{}}-->必須是定義再data中的資料
  • 例如：{{ 變數名/物件.屬性名 }}
  • {{}}中可以放：字串，數字，物件，陣列，函式執行，修改變數值，三目運算子。
  • {{}}中不可以放：
    • 不能定義變數
    • 不能渲染標籤

3、案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>字串：{{name}}</h1>
    <h1>數字：{{age}}</h1>
    <h1>物件:{{userinfo}}-->取物件的值：{{userinfo.name}}</h1>
    <h1>陣列：{{hobby}}--->陣列取值：{{hobby[0]}}</h1>
    <h1>運算：{{11+11}}----》變數運算：{{age+userinfo.height}}</h1>
    <h1>三目運算子：{{11<10?'真':'假'}}--->變數形式：{{b?'為真':'為假'}}</h1>
    <h1>標籤：{{a}}</h1>
    <h1>可以放函式執行</h1>
    <h1>var a =100---不行</h1>
    <h1>修改變數值：{{age=99}}</h1>
    <h1>修改變數值：{{++age}}--》++age和age++的區別是，前一個先計算，再賦值，後一個先賦值再計算</h1>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'xiao',
            age: 19,
            userinfo: {name: '劉大板', height: 168},
            hobby: ['籃球', '足球', '乒乓球'],
            b: true,
            a: '<a href="http://www.baidu.com">點選有驚喜</a>'
        }
    })
</script>
</html>

相關文章