vue實(shí)例成員?插值表達(dá)式?過(guò)濾器基礎(chǔ)教程示例詳解
一. 什么是Vue
漸進(jìn)式 javaScript框架
可以獨(dú)立完成前后端分離時(shí) Web項(xiàng)目的JavaScript框架
漸進(jìn)式：可以控制一個(gè)頁(yè)面的一個(gè)標(biāo)簽，也可以控制一系列標(biāo)簽，也可以控制整個(gè)頁(yè)面，甚至可以控制整個(gè)前臺(tái)項(xiàng)目
二.為什么學(xué)Vue
為什么：為了前后端完全分離開(kāi)發(fā)
前端三大主流框架：Angular React Vue
Vue結(jié)合了其他框架優(yōu)點(diǎn)、輕量級(jí)、中文API、數(shù)據(jù)驅(qū)動(dòng)、雙向綁定、MVVM設(shè)計(jì)模式、組件化開(kāi)發(fā)、單頁(yè)面應(yīng)用
# vue是js漸進(jìn)式框架
# 根據(jù)開(kāi)發(fā)需求，可以決定vue框架控制項(xiàng)目的具體方位：可以為一個(gè)標(biāo)簽，也可以為一個(gè)頁(yè)面，甚至可以為整個(gè)項(xiàng)目
1)Vue框架：前臺(tái)界面，頁(yè)面邏輯
1）指令:（分支結(jié)構(gòu)，循環(huán)結(jié)構(gòu)...），復(fù)用頁(yè)面結(jié)構(gòu)等
2）實(shí)例成員:（過(guò)濾器，監(jiān)聽(tīng)），可以對(duì)渲染的數(shù)據(jù)做二次格式化
3）組件:（模塊的復(fù)用或組合），快速搭建頁(yè)面
4）項(xiàng)目開(kāi)發(fā)
2)DRF框架：數(shù)據(jù)（接口）
1）基礎(chǔ)的模塊：請(qǐng)求、響應(yīng)、解析、渲染
2）序列化、三大認(rèn)證
3）過(guò)濾、搜索、排序、分頁(yè)
4）異常、第三方j(luò)wt、restful接口規(guī)范
3）為什么學(xué)習(xí)vue：
前臺(tái)框架：Angular（龐大）、React（精通移動(dòng)端）、Vue（吸取前兩者優(yōu)勢(shì)，輕量級(jí)）
Vue一手文檔是中文
實(shí)現(xiàn)前后臺(tái)分離開(kāi)發(fā)，節(jié)約開(kāi)發(fā)成本
三.如何使用Vue
vue的導(dǎo)入: <!--方式一: 本地--> <script src="js/vue.js"></script> <!--方式二: cdn--> <script src="https://cn.vuejs.org/js/vue.min.js"></script>
插值表達(dá)式:
<div id="app">
<!-- {{ }} 是插值表達(dá)式,中間的info是變量,可通過(guò)vue實(shí)例成員data賦值 -->
<!-- 注意:插值表達(dá)式中可以寫(xiě)基礎(chǔ)類型的數(shù)據(jù),只有寫(xiě)變量時(shí)才能被data賦值 -->
{{ info }}
{{ 'info' }} 渲染到頁(yè)面是: info
</div>
下載安裝？
插值表達(dá)式
插值表達(dá)式
* 1）空插值表達(dá)式：{{ }}
* 2）中渲染的變量在data中可以初始化
* 3）插值表達(dá)式可以進(jìn)行簡(jiǎn)單運(yùn)算與簡(jiǎn)單邏輯
* 4）插值表達(dá)式符合沖突解決，用delimiters自定義（了解）
四、vue特點(diǎn)
虛擬DOM
數(shù)據(jù)的雙向應(yīng)用
單頁(yè)面應(yīng)用
數(shù)據(jù)驅(qū)動(dòng)
1.虛擬DOM
就是改變屏幕卡頓（因?yàn)榧虞d順序，改變DOM樹(shù)的結(jié)構(gòu)），用斗篷指令v-cloak即可
原理：更深的原理就是改變DOM樹(shù)的結(jié)構(gòu)，就改變了瀏覽器的加載順序。就避開(kāi)了無(wú)畏的計(jì)算，提升了效率
用虛擬DOM瀏覽器（斗篷指令），內(nèi)部原理：告訴瀏覽器當(dāng)前不是最終加載的結(jié)果，瀏覽器就會(huì)全部加載完之后放到JS中，一次性加載完
上代碼案例：從上至下代碼加載的順序
<style type="text/css">
[v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
{{ msg }}
// 如果沒(méi)有斗篷指令隱藏屬性，代碼加載到這里num對(duì)應(yīng)的值還沒(méi)有加載出來(lái)，而當(dāng)下面的num加載出來(lái)的時(shí)候，屏幕就會(huì)出現(xiàn)閃一下
</div>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: "message"
}
})
</script>
<!-- 避免頁(yè)面閃爍-->
2.數(shù)據(jù)的雙向綁定
什么是數(shù)據(jù)的雙向應(yīng)用？
大白話：兩個(gè)綁一個(gè)
需要用到表單指令，v-model，內(nèi)部有一個(gè)監(jiān)聽(tīng)機(jī)制。v-bind屬性指令沒(méi)有監(jiān)聽(tīng)機(jī)制
代碼案例：
<!-- 兩個(gè)輸入框內(nèi)容會(huì)同時(shí)變化 -->
<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.單頁(yè)面應(yīng)用
什么是單頁(yè)面應(yīng)用？
大白話：網(wǎng)站實(shí)際就是一個(gè)頁(yè)面，頁(yè)面的跳轉(zhuǎn)只是做了內(nèi)容的局部替換。因?yàn)橥ㄟ^(guò)vue可以控制一個(gè)標(biāo)簽，一個(gè)標(biāo)簽下可以寫(xiě)很多的內(nèi)容，漸進(jìn)式
4.數(shù)據(jù)驅(qū)動(dòng)
什么是數(shù)據(jù)舉動(dòng)？
大白話：根據(jù)數(shù)據(jù)做頁(yè)面布局
原理：利用循環(huán)命令，渲染生成標(biāo)簽。就是說(shuō)，如果沒(méi)有數(shù)據(jù)，就沒(méi)有標(biāo)簽，有多少數(shù)據(jù)就自動(dòng)渲染多少標(biāo)簽。
上代碼案例：
<div class="box" v-for="obj in goods">
<img :src="obj.img" alt="">
<p>{{ obj.title }}</p>
</div>
//goods就是模擬的虛擬數(shù)據(jù)
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實(shí)例
<script>
new Vue({
// 實(shí)例成員
})
</script>
<!--
實(shí)例與頁(yè)面掛載點(diǎn)(標(biāo)簽)一一對(duì)應(yīng)
一個(gè)頁(yè)面中可以出現(xiàn)多個(gè)實(shí)例對(duì)應(yīng)多個(gè)掛載點(diǎn)
實(shí)例只操作掛載點(diǎn)內(nèi)部?jī)?nèi)容
-->
六、實(shí)例成員
- 掛載點(diǎn) | el
使vue與html頁(yè)面結(jié)構(gòu)建立關(guān)聯(lián)
<body>
<div id="app">
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app' // 掛載點(diǎn)
})
</script>
注意:
# 1) html標(biāo)簽與body標(biāo)簽不能作為掛載點(diǎn)
# 2) 一個(gè)vue對(duì)象掛載點(diǎn)之后索引一個(gè)匹配結(jié)果，所以掛載點(diǎn)一般用id標(biāo)識(shí)
- 自定義插值表達(dá)式括號(hào)| delimiters
// 控制vue插值表達(dá)式符合
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插值表達(dá)式符合
delimiters: ['[{', '}]'],
})
</script>
- 數(shù)據(jù) | data
<!--
1) data為vue環(huán)境(被掛載的標(biāo)簽內(nèi)部)提供數(shù)據(jù)，采用字典{變量名:值}形式
2) 在插值表達(dá)式{{}}中，直接書(shū)寫(xiě)數(shù)據(jù)的key(變量名)來(lái)訪問(wèn)數(shù)據(jù)(值)
3) 在外部通過(guò)接收實(shí)例的變量app，訪問(wèn)實(shí)例成員(實(shí)例成員都用$開(kāi)頭)，間接訪問(wèn)到數(shù)據(jù)
app.$data.info
4) 在外部也可以通過(guò)實(shí)例變量app直接訪問(wèn)數(shù)據(jù)
app.info
5) 在vue實(shí)例內(nèi)部的方法methods中，使用變量，this.info (this其實(shí)就是等價(jià)于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對(duì)象
console.log(app.$data.info); // message
console.log(app.info); // message
</script>
- 過(guò)濾器 | filters
<!--
1) 過(guò)濾器本身就是處理數(shù)據(jù)的函數(shù)，可以將插值表達(dá)式中的數(shù)據(jù)作為參數(shù)傳入過(guò)濾器函數(shù)進(jìn)行處理，得到的函數(shù)返回值就是處理后的結(jié)果
2) 過(guò)濾器使用語(yǔ)法 {{ ...變量 | 過(guò)濾器(...變量) }}
3) 過(guò)濾器在實(shí)例中用filters成員提供
4) 參數(shù)多傳不處理,少傳返回NaN
-->
<body>
<div id="app">
<!-- 插值表達(dá)式可以直接做簡(jiǎn)單的運(yùn)算 -->
<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為事件提供實(shí)現(xiàn)體(函數(shù))
與事件指令配合使用
-->
<style>
.box { background-color: orange }
</style>
<div id='app'>
<p class="box" v-on:click="pClick">測(cè)試</p>
<p class="box" v-on:mouseover="pOver">測(cè)試</p>
</div>
<script>
var app = new Vue({
el: '#app',
methods: {
pClick () {
// 點(diǎn)擊測(cè)試
},
pOver () {
// 懸浮測(cè)試
}
}
})
</script>
<!-- v-on:為事件綁定的指令 -->
<!-- methods為事件提供實(shí)現(xiàn)體-->
- js對(duì)象(即字典)補(bǔ)充
let b = 20;
let dic = {
a: 10, // 字典本身就是對(duì)象，key都是字符串形式可以省略引號(hào)
b // 值為變量時(shí)，且與key同名，可以簡(jiǎn)寫(xiě)
};
console.log(dic)
- 插值表達(dá)式轉(zhuǎn)義 | delimters
<!--
防止django的模板渲染語(yǔ)法與插值表達(dá)式?jīng)_突,前端通常會(huì)轉(zhuǎn)義插值表達(dá)式的{{ }}
-->
<div id="app">
{{ msg }}
{[ msg ]}
</div>
<script>
new Vue({
el: '#app',
data: {
msg: '12345'
},
// delimiters: ['{{', '}}'],
delimiters: ['{[', ']}'],
})
</script>
- 計(jì)算屬性 | computed
一個(gè)變量的值依賴多個(gè)變量(多變一)，且依賴的任意一個(gè)變量發(fā)生改變，該變量都會(huì)改變
<!--
1) computed是用來(lái)聲明 方法屬性(偽裝成變量的方法) 的
2) 聲明的方法屬性不能在data中出現(xiàn)
3) 方法屬性必須在頁(yè)面中渲染使用，才會(huì)對(duì)該方法內(nèi)部出現(xiàn)的所有變量進(jìn)行監(jiān)聽(tīng)
4) 計(jì)算屬性的值來(lái)源于監(jiān)聽(tīng)方法的返回值
-->
<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 要在頁(yè)面渲染
flName(){
// this.fName和this.lName是被監(jiān)聽(tīng)的變量
// 變量flName的值由函數(shù)的返回值決定
return this.fName + this.lName;
}
}
})
</script>
- 監(jiān)聽(tīng)屬性 | watch
多個(gè)變量的值依賴一個(gè)變量(一變多)，該變量發(fā)生改變，所有依賴變量都會(huì)改變
<!--
1) watch是用來(lái)聲明 方法屬性 的
2) watch為data中已存在的屬性設(shè)置監(jiān)聽(tīng)事件
3) 監(jiān)聽(tīng)的屬性值發(fā)生改變，就會(huì)觸發(fā)監(jiān)聽(tīng)事件
4) 監(jiān)聽(tīng)事件的方法返回值沒(méi)有任何意義
-->
<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進(jìn)行操作
namearr = this.fullName.split('');
// 給data中的firstname和lastName賦值,渲染到插值表達(dá)式中
this.firstName = namearr[0];
this.lastName = namearr[1];
// return 的值沒(méi)有任何意義
}
}
})
</script>
以上就是vue實(shí)例成員 插值表達(dá)式 過(guò)濾器基礎(chǔ)教程示例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue實(shí)例成員 插值表達(dá)式 過(guò)濾器教程的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Ant Design Pro 菜單自定義 icon，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue組件全局注冊(cè)實(shí)現(xiàn)警告框的實(shí)例詳解
這篇文章主要介紹了Vue組件全局注冊(cè)實(shí)現(xiàn)警告框的實(shí)例,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯詳解
el-tree-select組件是el-tree和el-select的結(jié)合體,他們的原始屬性未被更改,下面這篇文章主要給大家介紹了關(guān)于Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue3組合式api創(chuàng)建單文件組件的寫(xiě)法
Vue3?中的?Composition?API?是一種新的編寫(xiě)組件邏輯的方式,它提供了更好的代碼組織、類型推導(dǎo)、測(cè)試支持和復(fù)用性,本文為大家介紹了vue3利用組合式api創(chuàng)建單文件組件的方法,感興趣的可以了解下2023-08-08
vue2.0項(xiàng)目實(shí)現(xiàn)路由跳轉(zhuǎn)的方法詳解
這篇文章主要介紹了vue2.0項(xiàng)目實(shí)現(xiàn)路由跳轉(zhuǎn)的詳細(xì)方法,非常不錯(cuò)，具有一定的參考借鑒借鑒價(jià)值，需要的朋友可以參考下2018-06-06
vue 添加和編輯用同一個(gè)表單,el-form表單提交后清空表單數(shù)據(jù)操作
這篇文章主要介紹了vue 添加和編輯用同一個(gè)表單,el-form表單提交后清空表單數(shù)據(jù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
解決Vue在封裝了Axios后手動(dòng)刷新頁(yè)面攔截器無(wú)效的問(wèn)題
這篇文章主要介紹了解決VUE在封裝了Axios后手動(dòng)刷新頁(yè)面攔截器無(wú)效的問(wèn)題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue請(qǐng)求數(shù)據(jù)的三種方式,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了Vue中computed和watch的區(qū)別，對(duì)Vue感興趣的同學(xué)，可以參考下2021-05-05