Vue-概念及基本使用-CFANZ编程社区

章节目录：

一、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>

效果演示：

章节目录：

一、MVVM思想

二、Vue简介

三、Vue基本使用

3.1 创建Vue实例

3.2 模板或元素

3.3 数据

3.4 方法

四、结束语