0
点赞
收藏
分享

微信扫一扫

Vue-概念及基本使用

想溜了的蜗牛 2022-04-16 阅读 64

章节目录:

一、MVVM思想

二、Vue简介

三、Vue基本使用

3.1 创建Vue实例


   <script>

        // 创建Vue实例。
        var app = new Vue({

        });

    </script>

3.2 模板或元素


    <!-- 模板或元素。 -->
    <div id="app">

    </div>

3.3 数据


<body>

    <div id="app">
        <h2> {{message}} </h2>
    </div>

    <script>

        var app = new Vue({
            el: "#app",
            // 实例被创建时,会获取data属性,进行视图渲染。
            data: {
                message: "hello vue"
            }
        });

    </script>

</body>

3.4 方法


<body>

    <div id="app">

        <!-- 调用方法。 -->
        <br />
        <button v-on:click="add"> 调用add()方法,实现点击后变量自增 </button>
        {{num}}

    </div>

    <script>

        var app = new Vue({
            el: "#app",
            data: {
                num: 0
            },
            // 可以再Vue实例中定义方法。
            methods: {
                add() {
                    this.num++;
                },
            },
        });

    </script>

</body>

  • 效果演示

四、结束语


举报

相关推荐

0 条评论