vue.js入门代码

2018-06-24 02:14:02来源：未知阅读 ()

<!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>