vue.js入门代码
程序员文章站
2022-07-04 19:51:39
+++++{{msg}}----- ========== 百度一下,不跳转 百度一下,跳转 ......
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> [v-cloak]{/*网速比较慢可以用此命令隐藏msg*/ display: none; } </style> </head> <body> <div id="app"> <p v-cloak>+++++{{msg}}-----</p><!--接受消息--> <h4 v-text="msg">==========</h4><!--接受消息--> <input type="button" value="点我啊" @click="btnHandler"> <input type="button" value="传送门" @click="ch"> <a href="http://www.baidu.com" @click.prevent="onclick">百度一下,不跳转</a><!--阻止自动跳转--> <a href="http://www.baidu.com" @click="onclick1">百度一下,跳转</a> </div> <!--引入vue.js--> <script src="./WEB-INF/lib/vue.js"></script> <script> //创建Vue的实体 var vm=new Vue({ el:'#app', data:{ msg: 'Hello Vue.js!' }, //方法的合集,都写在此处 methods:{ onclick1(){ alert("直接跳了") }, onclick(){ alert("阻止baidu的跳转") }, ch(){ alert("传送出来了") }, btnHandler (){ alert("显示出来了") } } }) </script> </body> </html>
上一篇: 数组去重
下一篇: 这是我的第一个博客,我叫小白菜!