在Vue里,我們可以使用類似HTML里面的屬性來設置標簽的各種屬性。這些屬性可以設置在Vue實例的data對象中,在refs里,或者在實例內定義的computed和methods等函數中使用。
new Vue({ data: { message: 'Hello Vue!' } })
在上面的代碼中,我們在Vue實例中定義了一個data對象,里面包含了一個屬性message,并且設置了它的值為'Hello Vue!'。當我們在頁面中使用這個值時,只需要在標簽里面使用message屬性即可。
{{ message }}
在上面的代碼中,我們使用了Vue的雙括號語法來顯示message的值。這個語法是Vue特有的,它會將我們定義的屬性和方法綁定到頁面上,當這些屬性或方法發生變化時,頁面也會隨之更新。
除了data對象外,我們還可以在實例內部使用computed計算屬性來定義一些動態的值。
new Vue({ data: { message: 'Hello Vue!', count: 0 }, computed: { reversedMessage: function () { return this.message.split('').reverse().join('') } } })
在上面的代碼中,我們定義了一個計算屬性reversedMessage,它會將我們定義在data中的message屬性進行翻轉并返回。當我們在頁面上使用這個屬性時,實際上是在調用computed里面的函數。
{{ reversedMessage }}
在一些特殊的情況下,我們需要直接訪問DOM元素。在Vue中,我們可以使用refs來獲取DOM元素的引用。這個功能只在Vue的模板渲染階段完成之后才可用。所以我們需要在mounted鉤子函數中來訪問這些元素。
new Vue({ mounted: function () { console.log(this.$refs.myInput.value) }, template: '' })
在上面的代碼中,我們使用了一個input元素,并給它設置了一個ref屬性。在mounted鉤子函數中,我們通過this.$refs來訪問input元素,并輸出它的value屬性。
除了以上介紹到的屬性填值方式外,Vue還有很多其他的屬性和方法,比如watch監聽屬性變化、computed屬性組合等。在實際的開發中,我們可以根據自己的需求來選擇使用哪種方式來填值。