目錄
Vue
一. 什么是Vue
漸進式 javaScript框架
可以獨立完成前后端分離時 Web項目的JavaScript框架
漸進式：可以控制一個頁面的一個標簽，也可以控制一系列標簽，也可以控制整個頁面，甚至可以控制整個前台項目
二.為什么學Vue
為什么：為了前后端完全分離開發
前端三大主流框架：Angular React Vue
Vue結合了其他框架優點、輕量級、中文API、數據驅動、雙向綁定、MVVM設計模式、組件化開發、單頁面應用
# vue是js漸進式框架
# 根據開發需求，可以決定vue框架控制項目的具體方位：可以為一個標簽，也可以為一個頁面，甚至可以為整個項目
1)Vue框架：前台界面，頁面邏輯
1）指令:（分支結構，循環結構...），復用頁面結構等
2）實例成員:（過濾器，監聽），可以對渲染的數據做二次格式化
3）組件:（模塊的復用或組合），快速搭建頁面
4）項目開發
2)DRF框架：數據（接口）
1）基礎的模塊：請求、響應、解析、渲染
2）序列化、三大認證
3）過濾、搜索、排序、分頁
4）異常、第三方jwt、restful接口規范
3）為什么學習vue：
前台框架：Angular（龐大）、React（精通移動端）、Vue（吸取前兩者優勢，輕量級）
Vue一手文檔是中文
實現前后台分離開發，節約開發成本
三.如何使用Vue
- 開發版本：vue.js
- 生產版本：vue.min.js
vue的導入:
<!--方式一: 本地-->
<script src="js/vue.js"></script>
<!--方式二: cdn-->
<script src="https://cn.vuejs.org/js/vue.min.js"></script>
插值表達式:
<div id="app">
<!-- {{ }} 是插值表達式,中間的info是變量,可通過vue實例成員data賦值 -->
<!-- 注意:插值表達式中可以寫基礎類型的數據,只有寫變量時才能被data賦值 -->
{{ info }}
{{ 'info' }} 渲染到頁面是: info
</div>
下載安裝？
插值表達式
插值表達式
* 1）空插值表達式：{{ }}
* 2）中渲染的變量在data中可以初始化
* 3）插值表達式可以進行簡單運算與簡單邏輯
* 4）插值表達式符合沖突解決，用delimiters自定義（了解）
四、vue特點
虛擬DOM
數據的雙向應用
單頁面應用
數據驅動
1.虛擬DOM
就是改變屏幕卡頓（因為加載順序，改變DOM樹的結構），用斗篷指令v-cloak即可
原理：更深的原理就是改變DOM樹的結構，就改變了瀏覽器的加載順序。就避開了無畏的計算，提升了效率
用虛擬DOM瀏覽器（斗篷指令），內部原理：告訴瀏覽器當前不是最終加載的結果，瀏覽器就會全部加載完之后放到JS中，一次性加載完
上代碼案例：從上至下代碼加載的順序
<style type="text/css">
[v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
{{ msg }}
// 如果沒有斗篷指令隱藏屬性，代碼加載到這里num對應的值還沒有加載出來，而當下面的num加載出來的時候，屏幕就會出現閃一下
</div>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: "message"
}
})
</script>
<!-- 避免頁面閃爍-->
2.數據的雙向綁定
什么是數據的雙向應用？
大白話：兩個綁一個
需要用到表單指令，v-model，內部有一個監聽機制。v-bind屬性指令沒有監聽機制
代碼案例：
<!-- 兩個輸入框內容會同時變化 -->
<input name="n1" type="text" v-model="v1">
<input name="n2" type="text" v-model="v1">
<script>
new Vue({
el: '#app',
data: {
v1: ''
}
})
</script>
3.單頁面應用
什么是單頁面應用？
大白話：網站實際就是一個頁面，頁面的跳轉只是做了內容的局部替換。因為通過vue可以控制一個標簽，一個標簽下可以寫很多的內容，漸進式
4.數據驅動
什么是數據舉動？
大白話：根據數據做頁面布局
原理：利用循環命令，渲染生成標簽。就是說，如果沒有數據，就沒有標簽，有多少數據就自動渲染多少標簽。
上代碼案例：
<div class="box" v-for="obj in goods">
<img :src="obj.img" alt="">
<p>{{ obj.title }}</p>
</div>
//goods就是模擬的虛擬數據
let goods = [
{
"img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
"title": "純種拆家專家"
},
{
"img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
"title": "純種拆家專家"
},
{
"img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
"title": "純種拆家專家"
}
];
五、Vue實例
<script>
new Vue({
// 實例成員
})
</script>
<!--
實例與頁面掛載點(標簽)一一對應
一個頁面中可以出現多個實例對應多個掛載點
實例只操作掛載點內部內容
-->
六、實例成員
- 掛載點 | el
使vue與html頁面結構建立關聯
<body>
<div id="app">
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app' // 掛載點
})
</script>
注意:
# 1) html標簽與body標簽不能作為掛載點
# 2) 一個vue對象掛載點之后索引一個匹配結果，所以掛載點一般用id標識
- 自定義插值表達式括號| delimiters
// 控制vue插值表達式符合
delimiters: ['[{', '}]'],
<div id="app">
<p>{{ info }}</p>
<p>{{ msg }}</p>
<p>{{ }}</p>
<p>{{num}}</p>
<p>{{num + 10 * 2}}</p>
<p>{{ msg.length + num }}</p>
<p>{{ msg[4] }}</p>
<p>{{ msg.split('')[4] }}</p>
<p>[{ num }]</p>
</div>
<script>
new Vue({
el: '#app',
data: {
info: '信息',
msg: 'message',
num: 10,
},
// 控制vue插值表達式符合
delimiters: ['[{', '}]'],
})
</script>
- 數據 | data
<!--
1) data為vue環境(被掛載的標簽內部)提供數據，采用字典{變量名:值}形式
2) 在插值表達式{{}}中，直接書寫數據的key(變量名)來訪問數據(值)
3) 在外部通過接收實例的變量app，訪問實例成員(實例成員都用$開頭)，間接訪問到數據
app.$data.info
4) 在外部也可以通過實例變量app直接訪問數據
app.info
5) 在vue實例內部的方法methods中，使用變量，this.info (this其實就是等價於app)
-->
<body>
<div id="app">
{{ info }}
{{ 'info' }}
<p>{{ num }}</p>
<p>{{ result }}</p>
<p>{{ arr }}</p>
<p>{{ dic }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
info: 'message',
num:100,
result: true,
arr: [1, 2, 3, 4, 5],
dic: {
name: 'xionger',
age: 20
}
}
})
</script>
<script>
console.log(app); // vue對象
console.log(app.$data.info); // message
console.log(app.info); // message
</script>
- 過濾器 | filters
<!--
1) 過濾器本身就是處理數據的函數，可以將插值表達式中的數據作為參數傳入過濾器函數進行處理，得到的函數返回值就是處理后的結果
2) 過濾器使用語法 {{ ...變量 | 過濾器(...變量) }}
3) 過濾器在實例中用filters成員提供
4) 參數多傳不處理,少傳返回NaN
-->
<body>
<div id="app">
<!-- 插值表達式可以直接做簡單的運算 -->
<p>{{ num + 3.5 }}</p>
<!--<p>{{ msg.split('')[5] }}</p>-->
<p>{{ num | f1 }}</p>
<p>{{ 10, 20 | f2(50, 80) }}</p>
<p>{{ 10, 20,30 | f2(50, 80) }}</p>
<p>{{ 10 | f2(50, 80) }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
num: 100,
},
filters:{
f1:function (num) {
return num*2
},
f2:function (a,b,c,d) {
return a+b+c+d
}
}
})
</script>
- 方法 | methods
<!--
methods為事件提供實現體(函數)
與事件指令配合使用
-->
<style>
.box { background-color: orange }
</style>
<div id='app'>
<p class="box" v-on:click="pClick">測試</p>
<p class="box" v-on:mouseover="pOver">測試</p>
</div>
<script>
var app = new Vue({
el: '#app',
methods: {
pClick () {
// 點擊測試
},
pOver () {
// 懸浮測試
}
}
})
</script>
<!-- v-on:為事件綁定的指令 -->
<!-- methods為事件提供實現體-->
- js對象(即字典)補充
let b = 20;
let dic = {
a: 10, // 字典本身就是對象，key都是字符串形式可以省略引號
b // 值為變量時，且與key同名，可以簡寫
};
console.log(dic)
- 插值表達式轉義 | delimters
<!--
防止django的模板渲染語法與插值表達式沖突,前端通常會轉義插值表達式的{{ }}
-->
<div id="app">
{{ msg }}
{[ msg ]}
</div>
<script>
new Vue({
el: '#app',
data: {
msg: '12345'
},
// delimiters: ['{{', '}}'],
delimiters: ['{[', ']}'],
})
</script>
- 計算屬性 | computed
一個變量的值依賴多個變量(多變一)，且依賴的任意一個變量發生改變，該變量都會改變
<!--
1) computed是用來聲明 方法屬性(偽裝成變量的方法) 的
2) 聲明的方法屬性不能在data中出現
3) 方法屬性必須在頁面中渲染使用，才會對該方法內部出現的所有變量進行監聽
4) 計算屬性的值來源於監聽方法的返回值
-->
<div id="app">
姓：<input type="text" v-model="fName">
名：<input type="text" v-model="lName">
姓名：<b>{{ flName }}</b>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
fName: '',
lName: '',
},
computed: {
// flName 要在頁面渲染
flName(){
// this.fName和this.lName是被監聽的變量
// 變量flName的值由函數的返回值決定
return this.fName + this.lName;
}
}
})
</script>
- 監聽屬性 | watch
多個變量的值依賴一個變量(一變多)，該變量發生改變，所有依賴變量都會改變
<!--
1) watch是用來聲明 方法屬性 的
2) watch為data中已存在的屬性設置監聽事件
3) 監聽的屬性值發生改變，就會觸發監聽事件
4) 監聽事件的方法返回值沒有任何意義
-->
<body>
<div id="app">
姓名：<input type="text" v-model="fullName">
姓：<b>{{ firstName }}</b>
名：<b>{{ lastName }}</b>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
fullName:'',
firstName:'',
lastName:'',
},
watch:{
fullName(){
// 從data中拿到fullname進行操作
namearr = this.fullName.split('');
// 給data中的firstname和lastName賦值,渲染到插值表達式中
this.firstName = namearr[0];
this.lastName = namearr[1];
// return 的值沒有任何意義
}
}
})
</script>