vue之methods和computed 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        #box1{
            width:300px;
            height: 300px;
            background: black;
        }
        #box2{
            width:200px;
            height: 200px;
            background: white;
        }
        #box3{
            width:100px;
            height: 100px;
            background: black;
        }
    </style>
</head>
<body>
<div id="app">
    {{message}}<br><br>
    {{message1}}<br><br>
    <!--message2加了括号-->
    {{message2()}}<br><br>
    <!--v-on-->
    <button v-on:click="fn">点击</button><br><br>
    <!--v-on缩写@-->
    <!--fn传入参数-->
    <button @click="fn(a)">点击</button><br><br>
    <!--event事件-->
    <button @click="fn($event,a)">点击</button><br><br>
    <!--.once为元素绑定一次性事件-->
    <button @click="fn1">点击</button><br><br>
    <!--阻止默认行为跳转百度-->
    <a href="http://www.baidu.com" @click.prevent="fn1">百度</a>
    <!--.stop阻止事件冒泡-->
    <a href="http://www.baidu.com" @click.stop="fn1">百度</a><br><br>


    <div id="box1"  @click.stop ='fn1'>
        <div id="box2"  @click.stop ='fn2'>
            <div id="box3" @click.stop ='fn3'>

            </div>
        </div>
    </div>


</div>
<script>
    new Vue({
        el:'#app',
        data: {
            a:12345,
            message: 'hello'
        },
        computed:{
            message1:function() {
                return this.message + ' world!!'
            }
        },
        methods:{
            message2:function () {
                return this.message + " 华五!!!"
            },
            fn:function (e) {
                console.log(e)
            },
            fn1:function () {
                console.log(1)
            },
            fn2:function () {
                console.log(2)
            },
            fn3:function () {
                console.log(3)
            },
        }
        }
    )
</script>
</body>
</html>

运行结果

posted @ 2020-04-16 23:21  faval  阅读(87)  评论(0)    收藏  举报