< ! DOCTYPE html>
< html>
< head> < meta charset= "utf-8" > < title> vue入門< / title> < ! -- 使用Vue 3 官方CDN -- > < script src= "https://unpkg.com/vue@3/dist/vue.global.js" > < / script>
< / head>
< body>
< div id= "app" > < a : href= "URL" > 鏈接1 < / a> < ! -- 簡寫語法 -- > < a v- bind: href= "URL" > 鏈接2 < / a> < ! -- 簡寫語法 -- > < br>
< ! -- 使用v- model綁定到表單元素上面-- >
< ! -- 在表單中要是改變了url也會改變數據模型，導致另外兩個鏈接也會發生改變-- > < input type= "text" v- model= "URL" > < ! -- 下面測試的是v- on的點擊事件-- >
< ! -- value是給按鈕取一個名字-- >
< ! -- 通過v- on設置觸發的事件，后面要加上觸發的事件。如點擊等，= 后面接的是觸發后調用的函數，函數沒有參數可以不帶括號-- >
< ! -- 調用的函數需要在script中的methods中聲明-- > < br> < input type= "button" value= "點擊按鈕" v- on: click= "handal" >
< ! -- 當然可以簡寫為下面的形式-- > < input type= "button" value= "點擊按鈕" @click= "handal" > < br>
< ! -- 測試v- if ，v- else - if ，v- else 標簽-- > < input type= "text" value= "測試年齡輸入框" v- model= "age" > < p> 您輸入的年齡為：< / p> < span v- if = "age <= 35" > 青年< / span> < span v- else - if = "age > 35 && age < 60" > 中年< / span> < span v- if = "age >= 60" > 老年< / span> < br>
< ! -- 測試v- show-- > < span v- show= "age >= 60" > 經測試，您為老年人，老年人請優先< / span> < ! -- 使用v- for 標簽來進行遍歷-- > < div v- for = "addir in addirs" > { { addir} } < / div>
< ! -- 當要展示的是遍歷的索引時可以這樣來寫-- > < div v- for = "(addir,index) in addirs" > { { index+ 1 } } : { { addir} } < / div>
< / div> < script> const app = Vue. createApp ( { data ( ) { return { URL : "https://www.baidu.com" , age : 20 , addirs : [ "張三" , "李四" , "王五" , "趙六" ] } ; } , methods : { handal : function ( ) { alert ( "你點了我一下" ) ; } } } ) . mount ( '#app' ) ;
< / script>
< / body>
< / html>
 -- Java使用Redis命令)
)
