Vue 学习笔记（二）简单应用实例，实例化多个Vue对象，Vue组件开发

最新推荐文章于 2023-04-09 07:09:59 发布

じоνё靁〃

最新推荐文章于 2023-04-09 07:09:59 发布

阅读量284

点赞数

分类专栏： Web前端开发相关

本文链接：https://blog.csdn.net/jingliuting/article/details/88093844

版权

Web前端开发相关专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简单应用实例，实例化多个Vue对象，Vue组件开发

<!DOCTYPE html>
<html>

<head>
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <style>
        body {
            text-align: center;
        }

        .bag {
            width: 200px;
            height: 50px;
            margin: 0 auto;
            /*设置父级边距，常用div水平居中 */
            background-color: green;
            text-align: center;
            font-size: 36px;
            border: 1px solid #000;
            line-height: 50px;
            /*设置行高，常用文本居中 */
        }

        .bag-health {
            width: 200px;
            border: 1px solid #000;
            margin: 0 auto 20px auto;
        }

        .bag-health div {
            height: 20px;
            background: crimson;
        }

        .controls {
            height:40px;
            width: 200px;
            margin: 0 auto;
        }

        .bag.burst {
            background-color: red;
        }
    </style>
</head>

<body>
    <h1>多个Vue实例对象</h1>
    <div id="vue-app-one">
        <!-- 绑定类：{类名：布尔变量名} -->
        <div class="bag" v-bind:class="{burst:ended}">one：{{health}}</div>
        <div class="bag-health">
            <!-- 绑定样式：字符类型，{同行间样式} -->
            <div v-bind:style="{width:health + '%'}"></div>
        </div>
        <div class="controls">
            <!-- 绑定是否显示：布尔值 -->
            <button v-show='!ended' @click='punch()'>减少生命值</button>
            <button @click='restart()'>重新开始</button>
        </div>
    </div>

    <div id="vue-app-two">
        <!-- 绑定类：{类名：布尔变量名} -->
        <div class="bag" v-bind:class="{burst:ended}">two：{{health}}</div>
        <div class="bag-health">
            <!-- 绑定样式：字符类型，{同行间样式} -->
            <div v-bind:style="{width:health + '%'}"></div>
        </div>
        <div class="controls">
            <!-- 绑定是否显示：布尔值 -->
            <button v-show='!ended' @click='punch()'>减少生命值</button>
            <button @click='restart()'>重新开始</button>
        </div>
    </div>



    <div id="vue-app-three">
            <play-bag></play-bag>
            <play-bag></play-bag>
        </div>

    <div>
        <button onclick='oneClick()'>增加one的值</button>
        <button onclick='twoClick()'>增加two的值</button>
        <button onclick='threeClick()'>增加three的值</button>
    </div>
</body>
<script>
    var one = new Vue({
        el: "#vue-app-one",
        data: {
            health: 100,
            ended: false
        },
        methods: {
            punch: function () {
                this.health -= 10;
                if (this.health <= 0) {
                    this.ended = true;
                }
                console.log(this.health, this.ended);
            },
            restart: function () {
                this.health = 100;
                this.ended = false;
            }
        },
        computed: {
        }
    });
    var two = new Vue({
        el: "#vue-app-two",
        data: {
            health: 100,
            ended: false
        },
        methods: {
            punch: function () {
                this.health -= 10;
                if (this.health <= 0) {
                    this.ended = true;
                }
                console.log(this.health, this.ended);
            },
            restart: function () {
                this.health = 100;
                this.ended = false;
            }
        },
        computed: {
        }
    });

    Vue.component('play-bag', {
        template: `
        <div>
            <!-- 绑定类：{类名：布尔变量名} -->
            <div class="bag" v-bind:class="{burst:ended}">three：{{health}}</div>
            <div class="bag-health">
                <!-- 绑定样式：字符类型，{同行间样式} -->
                <div v-bind:style="{width:health + '%'}"></div>
            </div>
            <div class="controls">
                <!-- 绑定是否显示：布尔值 -->
                <button v-show='!ended' @click='punch()'>减少生命值</button>
                <button @click='restart()'>重新开始</button>
            </div>
        </div>
        `,
        data: function () {
            return {
                ended: false,
                health: 100
            }
        },
        methods: {
            punch: function () {
                this.health -= 10;
            },
            restart: function () {
                this.health = 100;
            }
        }
    });




    var three = new Vue({ el: '#vue-app-three' });

    function oneClick() {
        one.health += 10;
        if (one.health > 100) {
            one.health = 100;
        }
    }
    function twoClick() {
        two.health += 10
        if (two.health > 100) {
            two.health = 100;
        }
    }
    function threeClick() {
        //访问不了内部属性
        console.log(three,three.health)
        three.health += 10
        if (three.health > 100) {
            three.health = 100;
        }
    }

</script>

</html>

じоνё靁〃

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue 学习笔记（二）简单应用实例，实例化多个Vue对象，Vue组件开发

简单应用实例，实例化多个Vue对象，Vue组件开发<!DOCTYPE html><html><head> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> ...
复制链接

扫一扫