色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue使用語法

錢淋西2年前8瀏覽0評論

VUE使用語法大致分為三大類,分別是template模板語法、指令和計算屬性以及事件處理,下面舉幾個例子來分別說明。

一、template模板語法

<template>
<div>
<p>{{ message }}</p>
<ul>
<li v-for="item in list" :key="item">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
message: 'hello world',
list: ['item1', 'item2', 'item3']
}
}
}
</script>

在template標(biāo)簽中,使用{{ }}表示數(shù)據(jù)綁定,其中message是data中的屬性,所以在template中可以直接拿到。而在v-for指令中,會將list數(shù)組中的每個元素遍歷一次,渲染到模板中。

二、指令和計算屬性

<template>
<div>
<p>{{ count }}</p>
<button v-on:click="increment">+1</button>
</div>
</template>
<script>
export default {
data() {
return {
num: 0
}
},
methods: {
increment() {
this.num++
}
},
computed: {
count() {
return this.num * 2
}
}
}
</script>

在button標(biāo)簽中,v-on:click表示點擊事件,點擊按鈕的時候觸發(fā)increment方法,方法中將num加1;而在computed中,count是計算屬性,始終保持為num的兩倍。

三、事件處理

<template>
<div>
<input v-model="message">
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
},
watch: {
message(newValue, oldValue) {
console.log(newValue, oldValue)
}
}
}
</script>

在input標(biāo)簽中,v-model表示雙向綁定,將用戶輸入的值綁定到message屬性中。在watch中,監(jiān)聽message變化,將新值和舊值輸出在控制臺上。

以上僅是VUE使用語法的部分,還有路由、組件等更豐富的內(nèi)容需要進(jìn)一步學(xué)習(xí)。希望這篇文章能對初學(xué)者提供一些幫助。