目錄

• 資料繫結
• 單向繫結
• 雙向繫結
• 值繫結
• 事件繫結
• 事件處理器
• 事件修飾符
• 鍵值修飾符
• class與style繫結
• 繫結class
• 繫結內聯樣式
• filter過濾器
• 總結

Vue資料繫結

單向繫結

將Model繫結到View後，當用程式碼更新Model時，View會自動更新。（模型——>檢視）

單向繫結的實現過程是：

• 所有資料只儲存一份。
• 一旦資料變化，就去更新頁面（只有data——>DOM，沒有DOM——>data）
• 若使用者在頁面上做了更新，就手動收集（雙向繫結式自動收集），合併到原有的資料中。

單向繫結的應用：

（1）插值繫結：是資料繫結的基本形式，用{{}}實現。

（2）v-bind繫結：如果HTML的某些屬性可以支援單向繫結，那麼只要在該屬性前面加上v-bind指令，這樣Vue在解析時會識別出該指令，將屬性值和Vue例項的Model進行繫結。

然後就可以通過Model來動態操作該屬性，從而實現DOM的聯動更新。

例如：

<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框架的核心功能就www.cppcns.com是資料雙向繫結。

雙向繫結：把Model繫結到View的同時也將View繫結到Model上，這樣既可以通過更新Model來實現View的自動更新，也可以通過更新View來實現Model資料的更新。

能夠實現資料雙向繫結的元素——表單元素（input、textarea、select等），使用v-model指令繫結。

內容複製方式：相當於淺拷貝

例如：

<div id="app">
   <h2>{{message}}</h2>
   <input type="text" v-model="message">
</div>
<script>
   var vm=new Vue({
       el:'#app',data:{
           message:'資料雙向繫結'
       }
   })
</script>

• 模型影響檢視：data資料message變了，diFUAfSihv裡面的內容變了；
• 檢視影響模型：input輸入框的內容改變，data裡面的message也改變，從而h2裡面的內容也改變 。

值繫結

v-model用來在View與Model之間同步資料。

但是有時候需要控制同步發生的時機，或者在資料同步到Model前將資料轉換為Number型別——在v-model指令所在的form控制元件上新增相應的修飾指令。

修飾符：

.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指令監聽DOM事件。（直接繫結到一個方法）

（2）內聯語句處理器：除了直接繫結到一個方法，也可以用內聯 Script 語句

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

注意：沒有括號的是函式名；有括號的實際是一條語句，稱為內聯處理器。

事件修飾符

• .stop- 阻止冒泡
• .prevent- 阻止預設事件
• .capture- 使用capture模式新增事件監聽器
• .self- 只監聽觸發該元素的事件
• .once- 只觸發一次

例如：

<a v-on:click.stop="doThis"></a>
<div v-on:click.capture="doThis">...</div>

鍵值修飾符

• .enter&FUAfSihnbsp;- 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傳一個物件或陣列，通過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>

繫結內聯樣式

給v-bind:style傳一個物件或陣列。

<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中，過濾器主要用於：

• 文字格式化
• 日期格式化
• 陣列資料的過濾

2、使用的位置：

（1）插值表示式：（{表示式|過濾器}）

{{ message | filterA }}

（2）v-bind:屬性|過濾器

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

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

4、本質：本質是一個函式

5、分類：

（1）全域性過濾器

Vue.filter(‘過濾器名'，function(){
實現過濾功能
})

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

（2）區域性過濾器：在Vue例項中通過filter選項來定義

new Vue({
	el:'#id',//filters{
		//過濾器名：function(引數){
		//過濾功能
		//}
	//}
	filters:{     //區域性過濾器，只能在當前vue例項繫結的div裡面用
		filterA:function(value){
			return value+'Hello'
		}
	}
})

（3）過濾器的串聯

{{ message | filterA | filterB }}

message作為引數——>過濾器函式filterA——>過濾器filterB

或者：

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

filterA 被定義為接收三個引數的過濾器函式。其中 message 的值作為第一個引數， &lsFUAfSihquo;arg1’ 作為第二個引數，arg2 的值作為第三個引數。

例如：

<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>

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!