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é)者提供一些幫助。