Vue基本使用 物件提供的屬性功能

2022-01-14 14:03:46 字數 4589 閱讀 3637

過濾器就是vue允許開發者自定義的文字格式化函式，

可以使用在兩個地方：輸出內容和運算元據中。

1.1.1 使用vue.filter()進行全域性定義

vue.filter("rmb1", function(v)


return v+"元"


})
1.1.2 在vue物件中通過filters屬性類定義

var vm = new vue(,


filters:else}}


});
監聽屬性，可以幫助我們偵聽data中某個資料的變化，從而做相應的自定義操作。

監聽屬性時乙個物件，它的鍵時要監聽的物件或者變數，值是乙個函式，當監聽的data資料傳送變化時，會自定義執行對應的函式，這個函式在被呼叫時，vue會傳入兩個形參，第乙個是變化前的資料值，第二個是變化後的資料值。

<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>title


title


>


<


script 


src="js/vue.js"


>


script


>


head


>


<


body


>


<


div 


id>


<


p>}


p>


<


button 


@click


="num++"


>按鈕


button


>


div>


<


script


>


let vm 


=new


vue(,


watch: ,}})


script


>


body


>


html


>
每個vue 物件在建立時都要經過一系列的初始化過程。在這個過程中vue.js會自動執行一些叫做生命週期的鉤子函式，我們可以使用這些函式，在物件建立的不同階段加上我們需要的**，實現特定的功能。

<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>title


title


>


<


script 


src="js/vue.js"


>


script


>


head


>


<


body


>


<


div 


id>


<


p>}


p>


<


button 


@click


="num++"


> 按鈕


button


>


div>


<


script


>


let vm 


=new


vue(,


beforecreate: 


function


() ,


created: 


function


() ,


beforemount: 


function


() ,


mounted: 


function


() ,


beforeupdate: 


function


() ,


updated: 


function


() ,


})script


>


body


>


html


>
效果如下：

點選按鈕使資料更新後

在vue使用的過程中，如果要初始化操作，把初始化操作的**放在 mounted 中執行。

mounted階段就是在vm物件已經把data資料實現到頁面以後。

一般頁面初始化使用。例如，使用者訪問頁面載入成功以後，就要執行的ajax請求。

另乙個就是created，這個階段就是在 vue物件建立以後，把ajax請求後端資料的**放進 created

通過 設定@click.stop來阻止事件冒泡

3.2  阻止表單提交和頁面重新整理

通過設定 @click.prevent來阻止表單提交

<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>title


title


>


<


script 


src="js/vue.js"


>


script


>


head


>


<


body


>


<


div 


id>


<


form 


action


="">


<


input 


type


="text"


>


<


input 


type


="submit"


>


<


input 


type


="submit"


value


="提交02"


Vue購物車的基本功實現
頁面結構,通常我們會先將整體分為3個部分,頭部 header 內容區整體 tbody 尾部 footer 的結構來構造頁面,如下 class box class header class item title type checkbox click checkall checked checkedf...


VUE的基本使用
cn.vuejs.org src vue.js script 掛載點 data msg 資料 methods v text v html 插入文字兩者的區別和innertext innerhtml 區別一樣 v show css級別的顯示隱藏，display none v show true fal...


Vue的基本使用
1.例項引數分析 2.插值表示式用法 3.陣列相關api 3.1 變異方法 修改原有資料 3.2 替換陣列 生成新的陣列 3.3 修改響應式資料 前段渲染方式 2.指令 2.1 資料繫結指令 2.2 資料響應式 2.3自定義指令 3.事件繫結 3.1vue如何處理事件？3.2事件函式的呼叫方式 3....