MVC與vue2概要、模板、數據綁定與綜合示例（一）

時間 2019-11-12

標籤 mvc vue2 vue 概要模板數據綁定綜合示例简体版

原文原文鏈接

1、前端MVC概要

1.一、庫與框架的區別

框架是一個軟件的半成品，在全局範圍內給了大的約束。庫是工具，在單點上給咱們提供功能。框架是依賴庫的。Vue是框架而jQuery則是庫。javascript

1.二、AMD與CMD

在傳統的非模塊化JavaScript開發中有許多問題：命名衝突、文件依賴、跨環境共享模塊、性能優化、職責單1、模塊的版本管理、jQuery等前端庫層出不窮，前端代碼日益膨脹html

AMD規範及其表明：RequireJS
異步模塊定義（Asynchronous Module Definition），它是依賴前置 (由於依賴必須一開始就寫好)會先儘早地執行(依賴)模塊 , 至關於全部的require都被提早了前端

CMD規範及其表明：SeaJS
（Common Module Definition）模塊定義規範
一個模塊就是一個文件；它推崇依賴就近想何時require就何時加載，實現了懶加載，延遲執行 (as lazy as possible)vue

1.三、前端MVC概要

MVC的核心理念是：你應該把管理數據的代碼（Model）、業務邏輯的代碼（Controller）、以及向用戶展現數據的代碼（View）清晰的分離開java

模型：表明應用當前的狀態
視圖：用於展現數據，用於接口
控制器：用來管理模型和視圖之間的關係

經過MVC框架又衍生出了許多其它的架構，統稱MV*，最多見的是MVP與MVVMnode

MVVM（Model-View-ViewModel）框架的由來即是MVP（Model-View-Presenter）模式與WPF結合的應用方式時發展演變過來的一種新型架構框架。react

Vue與Angular就是一個MVVM框架，MVVM與MVC最大的區別是模型與視圖實現了雙向綁定。git

在Vue中用戶自定義的實例就是vm，功能與Controller相似angularjs

1.四、AngularJS簡介

AngularJS是一個前端MVVM框架。github

angular的英文字面意思是：有角的; 用角測量的

AngularJS是協助搭建單頁面工程（SPA）的開源前端框架。它經過MVC模式使得開發與測試變得更容易。

AngularJS試圖成爲WEB應用中的一種端對端的解決方案。它將指導開發整個應用。

AngularJS於2009年發佈第一個版本，由Google進行維護，壓縮版94k。

1.3版後再也不支持IE8
1.3版後不支持全局控制器
2.0版 alpha

git倉庫： https://github.com/angular/

官網： https://www.angularjs.org/

中文網: http://www.apjs.net/

1.五、React

React 起源於 Facebook 的內部項目，由於該公司對市場上全部 JavaScript MVC 框架，都不滿意，就決定本身寫一套，用來架設 Instagram 的網站。作出來之後，發現這套東西很好用，就在2013年5月開源了。因爲 React 的設計思想極其獨特，屬於革命性創新，性能出衆，代碼邏輯卻很是簡單。因此，愈來愈多的人開始關注和使用，認爲它多是未來 Web 開發的主流工具。支持虛擬DOM（Virtual DOM）和組件化的開發。

ReactJS官網地址： http://facebook.github.io/react/
Github地址： https://github.com/facebook/react

1.五、Vue.js

Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有很是容易上手的API，做者是尤雨溪是中國人。

官網： http://cn.vuejs.org/

倉庫： https://github.com/vuejs

易用
已經會了HTML,CSS,JavaScript？即刻閱讀指南開始構建應用！
靈活
簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用。
性能
17kb min+gzip 運行大小、超快虛擬 DOM 、最省心的優化

1.5.一、Vue2.JS簡介

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。

若是你已是有經驗的前端開發者，想知道 Vue 與其它庫/框架有哪些區別，請查看對比其它框架。

不適合SEO、交互頻繁的，如遊戲之類交互體驗網站

瀏覽器支持：

Vue.js 不支持 IE8 及其如下版本，由於 Vue.js 使用了 IE8 不能模擬的 ECMAScript 5 特性。Vue.js 支持全部兼容 ECMAScript 5 的瀏覽器。

1.六、vue2入門示例和WebStorm開發vue設置

(1)安裝插件

(2)、消除未知指令的錯誤

未知指令會出現紅色提示

方法1是在標籤上使用alt+enter鍵，添加以下屬性：

<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

方法2是設置參數

(3)、添加指令智能提示

默認v-開始的標籤沒有智能提示

在標籤與屬性中同時加上以下智能提示：

v-text
v-html
v-once
v-if
v-show
v-else
v-for
v-on
v-bind
v-model
v-ref
v-el
v-pre
v-cloak
v-on:click
v-on:keyup.enter
v-on:keyup
@click
@change
number
debounce
transition
:is
v-bind:title

View Code

1.6.一、獲取vue2

若是要開發基於angularJS的項目，則先要添加對angularJS的引用，有以下幾個方法：

1)、去vue2官網或git下載，地址： https://github.com/vuejs/vue

2)、使用cdn

3)、安裝node.js，使用npm獲取

具體的安裝細節： http://www.javashuo.com/article/p-qqljxafx-dv.html

在本文的示例中已經包含了運行環境與幫助文件chm

4)、vue中文文檔：https://cn.vuejs.org/v2/guide/instance.html

1.6.二、聲明式渲染

Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統：

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2介紹</title>
</head>
<body>
  <div id="vuejs1">
    {{message}}
  </div>
  <div id="vuejs2">
    <span v-bind:title="message">
      把鼠標放到這裏試試
    </span>
  </div>
  <script src="src/js/vue.min.js"></script>
  <script type="text/javascript">
    //vue應用對象
    var vuejs1=new Vue({
      el:"#vuejs1",
      data:{
        message: "Hello Vue2!"
      }
    })
    //綁定屬性
    var vuejs2=new Vue({
      el:"#vuejs2",
      data:{
        message: "頁面加載時間是：" + new Date().toLocaleDateString()
      }
    })
  </script>
</body>
</html>

效果圖以下：

你看到的 v-bind 特性被稱爲指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊特性。可能你已經猜到了，它們會在渲染的 DOM 上應用特殊的響應式行爲。在這裏，該指令的意思是：「將這個元素節點的 title 特性和 Vue 實例的 message 屬性保持一致」。

若是你再次打開瀏覽器的 JavaScript 控制檯，輸入 app2.message = '新消息'，就會再一次看到這個綁定了 title 特性的 HTML 已經進行了更新。

1.6.三、條件與循環

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2介紹</title>
</head>
<body>
  <div id="div1">
    <span v-if="isShow">
      isShow爲true時候就顯示內容
    </span>
  </div>
  <div id="div2">
    <div v-if="isShow">
      <table border="1" width="50%" style="text-align: center">
        <tr>
          <th>序號</th>
          <th>品牌</th>
          <th>價格</th>
          <th>顏色</th>
          <th>尺寸</th>
        </tr>
        <tr v-for="(item,index) in phone">
          <td>{{index+1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.price}}元</td>
          <td>{{item.colour}}</td>
          <td>{{item.size}}英寸</td>
        </tr>
      </table>
    </div>
  </div>
  <script src="src/js/vue.min.js"></script>
  <script type="text/javascript">
    //isShow爲true時候就顯示當isShow爲false時候不顯示
    var div1=new Vue({
      el:"#div1",
      data:{
        isShow:true
      }
    })
    //v-for循環指令
    var div2=new Vue({
      el:"#div2",
      data:{
        isShow:true,
        phone:[{
          name:"小米8",
          price:1999,
          colour:"黑色",
          size:5.5
        },{
          name:"小米9",
          price:2999,
          colour:"幻藍色",
          size:5.5
        },{
          name:"華爲",
          price:1999,
          colour:"銀白色",
          size:5.5
        },{
          name:"iphone 6s plus",
          price:1999,
          colour:"土豪金",
          size:5.5
        },{
          name:"iphone 7s plus",
          price:2999,
          colour:"白色",
          size:5.5
        },{
          name:"iphone 8s plus",
          price:4999,
          colour:"黑色",
          size:5.5
        }]
      }
    })
  </script>
</body>
</html>

效果圖以下：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。