什麼是vue
vue是一套用於構建用戶界面的漸進式框架。
框架和庫的區別
庫是一種插件，是一種封裝好的特定方法的集合。提供給開發者使用，控制器在使用者手裏。
框架是一套架構，會基於自身特定向用戶提供一套相當完整的解決方案，控制權在框架本身，使用者需要按照框架所規定的某種特定規範進行開發。
目前的流行前端框架
Angular Vue React
流行的一些庫jquery ，Zepto
vue作爲前端框架的特點
- 構建用戶界面，只需要關係view層
- 易學，輕量快速
- 漸進式框架
什麼是漸進式？
1.聲明式渲染
2.組件系統
3.客戶端路由
4.大規模狀態管理
5.構建工具
vue優點：
響應式的數據綁定：
當數據發生改變，視圖可以自動更新，可以不用關心dom的操作，專心數據操作。
可組合的視圖組件：
把視圖按照功能切分成若干基本單元。
什麼是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/[email protected]/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/[email protected]/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攻擊的風險
若本號內容有做得不到位的地方（比如：涉及版權或其他問題），請及時聯繫我們進行整改即可，會在第一時間進行處理。
請點贊！因爲你們的贊同/鼓勵是我寫作的最大動力！
歡迎關注達達的簡書！
這是一個有質量，有態度的博客
