+++++{{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>
