一个简单的vue实例demo

- 写在前面：

<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl">
<!-- 缩写为 -->
<a :href="url">链接</a>
<img :src="imgUrl">

<button v-on:click="handleClose">点击隐藏</button>
<!-- 缩写为 -->
<button @click="handleClose">点击隐藏</button>

demo演示
demo源码：

/* html */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue.js</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>    
</head>
<body>
    <div id="vue-app">
        <!-- 图片 -->
        <div id="bag" :class="{burst: ended}"></div>

        <!-- 进度情况 -->
        <div id="bag-health">
            <div :style="{width: health + '%'}">{{health}}</div>
        </div>

        <!-- 控制按钮 -->
        <div id="controls">
            <button @click="punch" v-show="!ended">使劲敲</button>
            <button @click="restart">重新开始</button>            
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

/* css */

#bag {
    width: 200px;
    height: 500px;
    margin: 0 auto;
    background: url(./img/bag.png) center no-repeat;
    background-size: 80%;
}

#bag.burst {
    background: url(./img/bag-burst.png) center no-repeat;
}
#bag-health {
    width: 200px;
    border: 2px solid #000;
    margin: 0 auto 20px auto;
}

#bag-health div {
    height: 20px;
    background: crimson;
    text-align: center;
    color: #fff;
}

#controls {
    width: 200px;
    margin: 0 auto;
}

#controls button {
    margin-left: 20px;
}

// js

new Vue({
    el: "#vue-app",
    data: {
        health: 100,
        ended:false
    },
    methods: {
        punch: function() {
            this.health -=10;
            if(this.health <= 0) {
                this.ended = true;
            }
        },
        restart:function() {
            this.health = 100;
            this.ended = false;
        }
    }
})

一个简单的vue实例demo

猜你喜欢