Vue的數(shù)據(jù)及事件綁定和filter過(guò)濾器的方法是什么

本篇內(nèi)容介紹了“Vue的數(shù)據(jù)及事件綁定和filter過(guò)濾器的方法是什么”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

Vue數(shù)據(jù)綁定

單向綁定

將Model綁定到View后，當(dāng)用JavaScript代碼更新Model時(shí)，View會(huì)自動(dòng)更新。（模型——>視圖）

單向綁定的實(shí)現(xiàn)過(guò)程是：

• 所有數(shù)據(jù)只保存一份。

• 一旦數(shù)據(jù)變化，就去更新頁(yè)面（只有data——>DOM，沒有DOM——>data）

• 若用戶在頁(yè)面上做了更新，就手動(dòng)收集（雙向綁定式自動(dòng)收集），合并到原有的數(shù)據(jù)中。

單向綁定的應(yīng)用：

（1）插值綁定：是數(shù)據(jù)綁定的基本形式，用{{}}實(shí)現(xiàn)。

（2）v-bind綁定：如果HTML的某些屬性可以支持單向綁定，那么只要在該屬性前面加上v-bind指令，這樣Vue在解析時(shí)會(huì)識(shí)別出該指令，將屬性值和Vue實(shí)例的Model進(jìn)行綁定。

然后就可以通過(guò)Model來(lái)動(dòng)態(tài)操作該屬性，從而實(shí)現(xiàn)DOM的聯(lián)動(dòng)更新。

例如：

<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的同時(shí)也將View綁定到Model上，這樣既可以通過(guò)更新Model來(lái)實(shí)現(xiàn)View的自動(dòng)更新，也可以通過(guò)更新View來(lái)實(shí)現(xiàn)Model數(shù)據(jù)的更新。

能夠?qū)崿F(xiàn)數(shù)據(jù)雙向綁定的元素——表單元素（input、textarea、select等），使用v-model指令綁定。

內(nèi)容復(fù)制方式：相當(dāng)于淺拷貝

例如：

<div id="app">
   <h3>{{message}}</h3>
   <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也改變，從而h3里面的內(nèi)容也改變 。

值綁定

v-model用來(lái)在View與Model之間同步數(shù)據(jù)。

但是有時(shí)候需要控制同步發(fā)生的時(shí)機(jī)，或者在數(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的長(zhǎng)度是：{{ val.length }}</p>  -->
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            num:''
        }
    })
</script>

事件綁定

通過(guò)v-on指令來(lái)綁定事件。

事件處理器

（1）方法處理器：可以用v-on指令監(jiān)聽DOM事件。（直接綁定到一個(gè)方法）

（2）內(nèi)聯(lián)語(yǔ)句處理器：除了直接綁定到一個(gè)方法，也可以用內(nèi)聯(lián) JavaScript 語(yǔ)句

<div id="example">
    <button v-on:click="say('hi')">Say Hi</button>       //內(nèi)聯(lián)語(yǔ)句處理器
    <button v-on:click="say('what')">Say What</button>
	<!-- <a href="https://www.baidu.com" v-on:click="say('hello',$event)">
去百度</a>  -->       //內(nèi)聯(lián)語(yǔ)句處理器中訪問(wèn)原生 DOM 事件
</div>
<script>
    new Vue({
        el: '#example',
        methods: {
            say: function (msg) {
                alert(msg)
            }
            //say: function (msg,event) {
                   // event.preventDefault()
               // }
        }
    })
</script>

注意：沒有括號(hào)的是函數(shù)名；有括號(hào)的實(shí)際是一條JS語(yǔ)句，稱為內(nèi)聯(lián)處理器。

事件修飾符 

• .stop - 阻止冒泡

• .prevent - 阻止默認(rèn)事件

• .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"><!-- 縮寫語(yǔ)法 --><input @keyup.enter="submit"><input v-on:keyup.enter="submit">
<!-- 縮寫語(yǔ)法 -->
<input @keyup.enter="submit">

class與style綁定

綁定class

可以給v-bind：class傳一個(gè)對(duì)象或數(shù)組，通過(guò)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傳一個(gè)對(duì)象或數(shù)組。

<div v-bind:>西柚
 data: {
    fontColor: 'white',
    mySize: '30px'
 }
 
<div v-bind:>西安郵電大學(xué)</div>
 data: {
     baseStyles:{ 'color': 'red'},
     vueStyles: { 'font-size':'35px'}
 }

filter過(guò)濾器

1、在Vue.js中，過(guò)濾器主要用于：

• 文本格式化

• 日期格式化

• 數(shù)組數(shù)據(jù)的過(guò)濾

2、使用的位置：

（1）插值表達(dá)式：（{表達(dá)式|過(guò)濾器}）

{{ message | filterA }}

（2）v-bind:屬性|過(guò)濾器

<div v-bind:id="rawId | formatId"></div>

3、使用方法：管道符（|）

4、本質(zhì)：本質(zhì)是一個(gè)函數(shù)

5、分類：

（1）全局過(guò)濾器

Vue.filter(‘過(guò)濾器名'，function(){
實(shí)現(xiàn)過(guò)濾功能
})

Vue.filter('filterA',function (value) {
    return value+'Hello'
})
new Vue({})

（2）局部過(guò)濾器：在Vue實(shí)例中通過(guò)filter選項(xiàng)來(lái)定義

new Vue({
	el:'#id',
	//filters{
		//過(guò)濾器名：function(參數(shù)){
		//過(guò)濾功能
		//}
	//}
	filters:{     //局部過(guò)濾器，只能在當(dāng)前vue實(shí)例綁定的div里面用
		filterA:function(value){
			return value+'Hello'
		}
	}
})

（3）過(guò)濾器的串聯(lián)

{{ message | filterA | filterB }}

message作為參數(shù)——>過(guò)濾器函數(shù)filterA——>過(guò)濾器filterB

或者：

{{ message | filterA('arg1', arg2) }}

filterA 被定義為接收三個(gè)參數(shù)的過(guò)濾器函數(shù)。其中 message 的值作為第一個(gè)參數(shù)， ‘arg1’ 作為第二個(gè)參數(shù)，arg2 的值作為第三個(gè)參數(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>

“Vue的數(shù)據(jù)及事件綁定和filter過(guò)濾器的方法是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！