詳解Vue的數(shù)據(jù)及事件綁定和filter過濾器
Vue數(shù)據(jù)綁定
單向綁定
將Model綁定到View后，當用JavaScript代碼更新Model時，View會自動更新。（模型——>視圖）
單向綁定的實現(xiàn)過程是：
- 所有數(shù)據(jù)只保存一份。
- 一旦數(shù)據(jù)變化，就去更新頁面（只有data——>DOM，沒有DOM——>data）
- 若用戶在頁面上做了更新，就手動收集（雙向綁定式自動收集），合并到原有的數(shù)據(jù)中。
單向綁定的應(yīng)用：
（1）插值綁定：是數(shù)據(jù)綁定的基本形式，用{{}}實現(xiàn)。
（2）v-bind綁定：如果HTML的某些屬性可以支持單向綁定，那么只要在該屬性前面加上v-bind指令，這樣Vue在解析時會識別出該指令，將屬性值和Vue實例的Model進行綁定。
然后就可以通過Model來動態(tài)操作該屬性，從而實現(xiàn)DOM的聯(lián)動更新。
例如：
<div id="app">
<img v-bind:src='src' :title="title">
</div>
<script>
new Vue({
el:'#app',
data:{
src:'../images/8.png.jpeg', //修改Model后，視圖也跟著改變
title:'蝴蝶'
}
})
</script>
雙向綁定
Vue框架的核心功能就是數(shù)據(jù)雙向綁定。
雙向綁定：把Model綁定到View的同時也將View綁定到Model上，這樣既可以通過更新Model來實現(xiàn)View的自動更新，也可以通過更新View來實現(xiàn)Model數(shù)據(jù)的更新。
能夠?qū)崿F(xiàn)數(shù)據(jù)雙向綁定的元素——表單元素（input、textarea、select等），使用v-model指令綁定。
內(nèi)容復制方式：相當于淺拷貝
例如：
<div id="app">
<h2>{{message}}</h2>
<input type="text" v-model="message">
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
message:'數(shù)據(jù)雙向綁定'
}
})
</script>
- 模型影響視圖：data數(shù)據(jù)message變了，div里面的內(nèi)容變了；
- 視圖影響模型：input輸入框的內(nèi)容改變，data里面的message也改變，從而h2里面的內(nèi)容也改變 。
值綁定
v-model用來在View與Model之間同步數(shù)據(jù)。
但是有時候需要控制同步發(fā)生的時機，或者在數(shù)據(jù)同步到Model前將數(shù)據(jù)轉(zhuǎn)換為Number類型——在v-model指令所在的form控件上添加相應(yīng)的修飾指令。
修飾符：
.lazy（懶加載）修飾符
<div id="app">
<input type="text" v-model.lazy='msg'>
<p>{{msg}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'懶加載'
}
})
</script>
.number修飾符.trim修飾符
例如：
<div id="app">
<input type="text" v-model.number='num'>
<p>num的類型：{{typeof(num)}}</p>
<!--<input type="text" v-model.trim="val"> -->
<!--<p>val的長度是：{{ val.length }}</p> -->
</div>
<script>
new Vue({
el:'#app',
data:{
num:''
}
})
</script>
事件綁定
通過v-on指令來綁定事件。
事件處理器
（1）方法處理器：可以用v-on指令監(jiān)聽DOM事件。（直接綁定到一個方法）
（2）內(nèi)聯(lián)語句處理器：除了直接綁定到一個方法，也可以用內(nèi)聯(lián) JavaScript 語句
<div id="example">
<button v-on:click="say('hi')">Say Hi</button> //內(nèi)聯(lián)語句處理器
<button v-on:click="say('what')">Say What</button>
<!-- <a v-on:click="say('hello',$event)">
去百度</a> --> //內(nèi)聯(lián)語句處理器中訪問原生 DOM 事件
</div>
<script>
new Vue({
el: '#example',
methods: {
say: function (msg) {
alert(msg)
}
//say: function (msg,event) {
// event.preventDefault()
// }
}
})
</script>
注意：沒有括號的是函數(shù)名；有括號的實際是一條JS語句，稱為內(nèi)聯(lián)處理器。
事件修飾符
.stop- 阻止冒泡.prevent- 阻止默認事件.capture- 使用capture模式添加事件監(jiān)聽器.self- 只監(jiān)聽觸發(fā)該元素的事件.once- 只觸發(fā)一次
例如：
<a v-on:click.stop="doThis"></a> <div v-on:click.capture="doThis">...</div>
鍵值修飾符
.enter- enter事件.left- 左鍵事件.right- 右鍵事件.middle- 中間滾輪事件
例如：
<input v-on:keyup.enter="submit"><!-- 縮寫語法 --><input @keyup.enter="submit"><input v-on:keyup.enter="submit"> <!-- 縮寫語法 --> <input @keyup.enter="submit">
class與style綁定
綁定class
可以給v-bind：class傳一個對象或數(shù)組，通過v-on綁定事件改變樣式。
<div id="example" v-bind:class="colorName" v-on:click="changeColor"> <div id="example" v-bind:class="[class1,class2]" v-on:click="changeColor"></div>
綁定內(nèi)聯(lián)樣式
給v-bind:style傳一個對象或數(shù)組。
<div v-bind:style="{color:fontColor,fontSize:mySize}">西柚
data: {
fontColor: 'white',
mySize: '30px'
}
<div v-bind:style="[baseStyles,vueStyles]">西安郵電大學</div>
data: {
baseStyles:{ 'color': 'red'},
vueStyles: { 'font-size':'35px'}
}
filter過濾器
1、在Vue.js中，過濾器主要用于：
- 文本格式化
- 日期格式化
- 數(shù)組數(shù)據(jù)的過濾
2、使用的位置：
（1）插值表達式：（{表達式|過濾器}）
{{ message | filterA }}（2）v-bind:屬性|過濾器
<div v-bind:id="rawId | formatId"></div>
3、使用方法：管道符（|）
4、本質(zhì)：本質(zhì)是一個函數(shù)
5、分類：
（1）全局過濾器
Vue.filter(‘過濾器名'，function(){
實現(xiàn)過濾功能
})
Vue.filter('filterA',function (value) {
return value+'Hello'
})
new Vue({})
（2）局部過濾器：在Vue實例中通過filter選項來定義
new Vue({
el:'#id',
//filters{
//過濾器名：function(參數(shù)){
//過濾功能
//}
//}
filters:{ //局部過濾器，只能在當前vue實例綁定的div里面用
filterA:function(value){
return value+'Hello'
}
}
})
（3）過濾器的串聯(lián)
{{ message | filterA | filterB }}
message作為參數(shù)——>過濾器函數(shù)filterA——>過濾器filterB
或者：
{{ message | filterA('arg1', arg2) }}filterA 被定義為接收三個參數(shù)的過濾器函數(shù)。其中 message 的值作為第一個參數(shù)， ‘arg1’ 作為第二個參數(shù)，arg2 的值作為第三個參數(shù)。
例如：
<div id="app">
<p>{{'2022'|filterA|filterB}}</p>
</div>
<script>
new Vue({
el:'#app',
filters:{
filterA:function(value){
return value+' is'
},
filterB:function(value){
return value+' coming!'
}
}
})
</script>
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要介紹了Vue nextTick的原理解析，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了基于iview的router常用控制方式,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
本文主要介紹了el-menu使用遞歸組件實現(xiàn)多級菜單組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要介紹了vue this.reload 方法 配置，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
這篇文章主要給大家介紹了關(guān)于vue3中如何使用codemirror6增加代碼提示功能的相關(guān)資料,Codemirror是一個不錯的Web代碼編輯庫,可以方便簡單的集成,需要的朋友可以參考下2023-08-08
本文介紹了Vue keep-alive組件的使用及如何清除緩存,給大家分享清除緩存的幾種方法,結(jié)合實例代碼給大家講解的非常詳細,需要的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了Electron + vue 打包桌面操作流程,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
這篇文章主要介紹了Vue中獲取this.$refs為undefined的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
本文通過實例代碼給大家介紹了vue實現(xiàn)底部菜單功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07