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