Vue-概念及基本使用

最新推荐文章于 2024-07-18 11:48:33 发布

饺子泡牛奶

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量104

点赞数

分类专栏：前端基础文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_48776531/article/details/124207627

版权

前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

章节目录：

一、MVVM思想

M: Model 数据模型层 - 提供数据。

V: Views 视图层 - 渲染数据。

VM：ViewsModel 视图模型层 - 调用数据渲染视图。

简言之，就是通过数据来驱动视图，不需要过多考虑dom操作，把重心放在VM。

二、Vue简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，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
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-概念及基本使用

章节目录：一、MVVM思想二、Vue简介三、Vue基本使用3.1 创建Vue实例3.2 模板或元素3.3 数据3.4 方法四、结束语一、MVVM思想M: Model 数据模型层 - 提供数据。V: Views 视图层 - 渲染数据。VM：ViewsModel 视图模型层 - 调用数据渲染视图。简言之，就是通过数据来驱动视图，不需要过多考虑dom操作，把重心放在VM。二、Vue简介Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，
复制链接

扫一扫