vue介紹

時間 2019-11-13

標籤 vue 介紹简体版

原文原文鏈接

什麼是vue
vue是一套用於構建用戶界面的漸進式框架。html

框架和庫的區別前端

庫是一種插件，是一種封裝好的特定方法的集合。提供給開發者使用，控制器在使用者手裏。vue

框架是一套架構，會基於自身特定向用戶提供一套至關完整的解決方案，控制權在框架自己，使用者須要按照框架所規定的某種特定規範進行開發。jquery

目前的流行前端框架sql

Angular Vue React
流行的一些庫jquery ，Zepto數據庫

vue做爲前端框架的特色npm

構建用戶界面，只須要關係view層
易學，輕量快速
漸進式框架

什麼是漸進式？
1.聲明式渲染
2.組件系統
3.客戶端路由
4.大規模狀態管理
5.構建工具後端

vue優勢：
響應式的數據綁定：
當數據發生改變，視圖能夠自動更新，能夠不用關心dom的操做，專心數據操做。前端框架

可組合的視圖組件：
把視圖按照功能切分紅若干基本單元。cookie

什麼是MVVM

什麼是MVC，MVC是後端的分層開發概念，M-modle數據層面，C-controller數據控制層，V-view前端人員的視圖層。

什麼是MVVM，其中M-保存每一個頁面中的數據，VM-是一座橋將M和V進行分割，M和V的數據交互都須要它來幫助，V-是每一個頁面的html。

前端

MVVM是前端視圖層的分層開發思想，主要把每一個頁面，分紅了M,V和VM,VM是MVVM的思想的核心，VM是M和V之間的調度者。

前端MVVM的思想是爲了讓咱們開發更加方便，由於MVVM提供了數據的雙向綁定，數據的雙向綁定時由MV提供的。

M
M保存的是每一個頁面中單獨的數據

VM
它是一個調度者，分割了M和V。

V
是每一個頁面中HTML結構

app.js
項目的入口模塊
一切的請求，都要先進入這裏進行chuli
app.js並無路由分發的功能，須要調用router.js模塊進行路由的分發處理

router.js
路由分發處理模塊，只負責分發路由

controller
這是業務邏輯的處理層
在這個模塊中，封裝了一些具體業務邏輯處理的邏輯代碼，可是，爲了保證職能單一，此模塊只負責處理業務，不負責處理數據的CRUD。

Model層
只負責操做數據庫，執行對應sql語句

建立VUE實例

安裝：
1.去官網下載指定頂vue版本包
2.使用cdn使用線上版本
3.使用npm進行安裝
4.使用CLI腳手架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入Vue cdn 的網址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        var vm = new Vue({
            // 也能夠綁定docuemnt.getElementById('#app')返回的app對象
            el:"#app",
            data:{
                msg:"第一個案例"
            }
        })
    </script>
</body>
</html>

v-text 能展現對應data中數據內容，也能在數據基礎上作運算

v-html -- html標籤渲染
容易產生xss攻擊
如何防止xss攻擊:
1.前端過濾
2.後臺轉義
3.給cookie 加上屬性 http

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入Vue cdn 的網址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-html="msg"></p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"<span style='color:red'>v-html渲染</span>"
            }
        })
    </script>
</body>
</html>

v-cloak

'v-text' 雖然沒有數據加載閃爍問題，可是會將標籤中間的數據覆蓋，也不能渲
染html格式數據。

'v-html' 謹慎使用會出現xss攻擊的風險

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。