一个简单的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演示
    一个简单的vue实例demo_第1张图片

  • demo源码:

/* 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.jstitle>
    <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;
        }
    }
})

你可能感兴趣的:(框架)