初步瞭解Vue

時間  2019-11-07
標籤 初步 瞭解 vue 简体版
原文   原文鏈接

Vue官網地址javascript

1. 網站交互及開發方式

1.1.經典的多頁面

例如：京東商城、惟品會php

  • 先後端糅合在一塊兒，開發維護效率低下
  • 用戶體驗通常，點擊刷新跳轉，等待時間過長
  • 每一個頁面都須要從新加載渲染，速度慢
  • 有利於SEO搜索引擎搜索（（Search Engine Optimization）：漢譯爲搜索引擎優化。）

1.2單頁面應用程序（SPA）

例如：網易雲音樂 單頁面應用程序的最主要目的是爲了讓你的先後端開發可以分離，用戶體驗反而是其次的html

  • 開發方式好，先後端分離，開發效率高，可維護性好（服務端不關心頁面只關心數據、客戶端不關心數據操做，只關心經過接口拿數據和服務端交互，處理頁面）
  • 用戶體驗好，就像一個原生的客戶端軟件同樣使用
  • 只須要加載渲染局部視圖便可，不須要整頁刷新
  • 單頁面應用開發技術複雜，因此誕生了一堆開發框架（Angularjs\Rrectjs、VueJS）
  • 單頁面技術已經很成熟了，可是都沒法兼顧低版本瀏覽器
  • 可是如今除了一些電商網站，其實已經不多有系統須要去兼容低版本瀏覽器
  • 大部分都是IE9以上
  • 單頁面因爲數據都是異步加載過來的，因此不會被搜索引擎搜索到，不利於SEO
  • 手機Web網頁
  • 管理系統

1.3 多頁面：以服務端爲主導，先後端混合

  • PHP案例，.php 文件

1.4 單頁面：先後端分離，各司其職

  • 服務端只處理數據
  • 前端只處理頁面（二者經過接口來交互）

1.5 模擬先後端分離開發模式

  • 項目立項
  • 需求分析
  • 服務端的工做
    • 需求分析
    • 設計數據庫
    • 接口設計（有時候也須要前端參與其中）
    • 接口（處理頁面）開發
  • 前端的工做
    • 需求分析
    • 寫頁面
    • 頁面寫好寫功能
    • 經過接口和服務端進行交互
  • 先後端分離：多頁
  • 先後端分離：單頁

什麼是Vue.js

  • Vue.js目前最火的一個前端框架，React是最流行的一個前端框架（React除了開發網站，還能夠開發手機App，Vue語法也是能夠用於進行手機App開發的，須要藉助於Weex）
  • Vue.js是前端的主流框架之一，和Angular.js、React.js一塊兒，並稱爲前端三大主流框架
  • Vue.js是一套構建用戶界面的——漸進式框架，只關注視圖層，它不只易於上手，還便於與第三方庫或既有項目整合。（Vue有配套的第三方類庫，能夠整合起來作大型項目的開發）
  • 前端的主要工做？主要負責MVC（Model View Controller 是模型(model)－視圖(view)－控制器(controller)的縮寫） 中的V這一層； 主要工做就是和界面打交道，來製做前端頁面效果；

提升開發效率的發展歷程：原生JS -> Jquery之類的類庫 -> 前端模板引擎 -> Angular.js/Vue.js （可以幫助咱們減小沒必要要的DOM操做；提升渲染效率；雙向數據綁定的概念【經過框架提供的指令，咱們前端程序員只需關心數據的業務邏輯，再也不關心DOM是如何渲染的了】）

在Vue中，一個核心的概念，就是讓用再也不操做DOM元素，解放用戶的雙手， 讓程序員能夠更多的時間去關注業務邏輯；

和JQ徹底操做dom不一樣，他是經過一些特殊的html語法，將dom和數據綁定，建立了這種綁定，DOM和數據保持同步，一更新數據，dom自動更新。

JQ：jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype以後又一個優秀的JavaScript代碼庫（或JavaScript框架）。
DOM：文檔對象模型(Document Object Model)，是W3C組織推薦的處理可擴展標誌語言的標準編程接口。前端

框架和庫的區別

  • 框架：是一套完整的解決方案；對項目的侵入性較大，項目若是須要更換框架，則須要從新架構整個項目。
  • 庫（插件）：提供某一個小功能，對項目的侵入性小，若是某個庫沒法完成某些需求，能夠很容易切換到其餘庫實現需求

Node（後端）中的MVC與前端中的MVVM之間的區別

  • MVC是後端的分層開發概念；
  • MVVM是前端視圖層的概念；

Vue.js基本代碼和MVVM之間的對應關係

  • vue.js是javascript MVVM庫（model-view-ViewModel）
  • ViewModel是vue.js核心，它是一個vue實例。vue實例做用在某個html元素上，能夠是body，也能夠是某個指定id的元素。

vue.js能夠實現雙向綁定。雙向綁定是什麼呢？兩個‘向’分別是UI界面和js裏的vue實例的data屬性，改變其中的一個，另外一個也隨着改變。好比，data裏有一個user對象，user對象有個name屬性。ui是一個input框。若是咱們給name屬性賦了一個新值，input框裏會自動顯示新的名字。相應的，若是咱們在Input框裏輸入了一個新名字，user對象的Name屬性值也會變成Input框裏的內容。

那麼建立了一個ViewModel，雙向綁定是怎麼達到的呢？vue

如圖ViewModel裏有DOM Listeners 和Data Bindings ,可看做是兩個工具。實現雙向綁定的利器。

從view這邊看，DOM Listeners 能夠監聽DOM元素的變化，一旦有變化，就更新Model。java

從Model這邊看， 當咱們更新了Model後，DOM Bindings就會幫咱們更新Dom元素。程序員

下面示範了一個簡單的（注意註釋）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--view層
{{}}表示文本插值，運行{{message}}會被數據對象的message屬性替換。
  -->
<div id="app">
{{message}}
</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">
</script>
<script >
/* Model層 */
var exampleData ={
message: 'hello World!'
}
/*     ViewModel層,鏈接view和model層
    vue實例須要傳入一個選項對象
&emsp;&emsp;    選項對象包括掛載對象，數據，方法，模生命週期鉤子（？）
    el屬性指向view,表示把vue實例綁定某個dom元素
 */
new Vue({
  el:'#app',
  data:exampleData
})
</script>
</html>
複製代碼

效果示例： hello World!ajax

雙向綁定舉例：

view層改爲這樣，其餘不變。數據庫

<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message" />
</div>
複製代碼

效果示例：編程

{{message}}

下面舉例子示範一下，雙向綁定在表單不一樣元素效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
table tr td{
    border:1px solid gray;
    padding:10px;
     
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;
}
tr.firstLine{
    background-color: lightGray;
}
</style>
<body>
<!--view層  -->
<div id="app">
   <table>
            <tbody>
                <tr> 
                   <td>單個複選框舉例,單行文本和多行文件框相似。</td>
                   <td><input type="checkbox" v-model="message" >
                   </td>
                   <td>{{message}}</td>
                </tr>
                 <tr >
                 <td>多個複選框舉例</td>
                 <td>
                 <label for="小魚">小魚</label>
                 <input type="checkbox" value="小魚" v-model="checked">
                  <label for="小花"> 小花</label>
                  <input type="checkbox" value="小花" v-model="checked">
                  <label for="小草">小草</label>
                  <input type="checkbox" value="小草" v-model="checked">
                 </td>
                 <td>{{checked}}</td>
                 </tr>
                  
                   <tr >
                 <td>單選按鈕舉例</td>
                 <td>
                  <label for="小魚">小魚</label>
                  <input type="radio" value="小魚" v-model="radio">
                  <label for="小花">小花 </label>
                  <input type="radio" value="小花" v-model="radio">
                  
                 </td>
                 <td>{{radio}}</td>
                 </tr>
                  <tr >
                 <td>單選選擇框舉例</td>
                 <td>
                     <select v-model="select" >
                       <option disabled="disabled" value="">---請選擇--</option>
                       <option value="小花">小花</option>
                       <option value="小草">小草</option>
                       <option value="小魚">小魚</option>
                     </select>
                 </td>
                 <td>{{select}}</td>
                 </tr>
                 <tr >
                 <td>多選選擇框舉例</td>
                 <td>
                            經過Ctrl或shift進行多選
                     <select v-model="multiple_select" multiple="multiple">
                       <option disabled="disabled" value="">---請選擇--</option>
                       <option value="小花">小花</option>
                       <option value="小草">小草</option>
                       <option value="小魚">小魚</option>
                     </select>
                 </td>
                 <td>{{multiple_select}}</td>
                 </tr>
                 <tr> 
                   <td>修改默認值的單個複選框舉例</td>
                   <td><input type="checkbox" true-value="yes" false-value="no" v-model="toggle" >
                   </td>
                   <td>{{toggle}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">
</script>
<script >
/* Model層 */
var exampleData ={
message: '',
checked:[],
radio:'',
select:'',
multiple_select:[],
toggle:''
}
/*     ViewModel層,鏈接view和model層
    vue實例須要傳入一個選項對象
&emsp;&emsp;    選項對象包括掛載對象，數據，方法，模生命週期鉤子（？）
    el屬性指向view,表示把vue實例綁定某個dom元素
 */
new Vue({
  el:'#app',
  data:exampleData
})
</script>
</html>
複製代碼

效果示例：

單個複選框舉例,單行文本和多行文件框相似。 {{message}}
多個複選框舉例 {{checked}}
單選按鈕舉例 {{radio}}
單選選擇框舉例 {{select}}
多選選擇框舉例 經過Ctrl或shift進行多選 {{multiple_select}}
修改默認值的單個複選框舉例 {{toggle}}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程