< ! 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命令)
)
