欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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>