vue簡介、特點、例項成員、插值表示式，過濾器
阿新 • • 發佈：2022-03-28
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>