阿菜的Vue学习之旅（一）

kokunka

已于 2022-02-25 22:38:55 修改

阅读量759

点赞数

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

于 2022-01-27 21:47:14 首次发布

本文链接：https://blog.csdn.net/kokunka/article/details/122708368

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

阿菜的Vue学习之旅（一）

1.Vue的初步使用
- - - 2.关于MVVM架构的Vue设计

1.Vue的初步使用

刚刚开始接触Vue的时候，阿菜是这样写

html部分:

    <div id="me">
        <!--vue内部的data数据被放到了这里的myName、myCountry-->
        <p>大家好，我叫{{myName}},来自{{myCountry}}。</p>
    </div>

javascript部分:

new Vue({
    el: "#me", //操作在id值为me的div
    data: {
        myName: "阿菜",
        myCountry: "中国"
    }
})

运行结果：
在这里插入图片描述
== 总结 ==
Vue其实是一种声明式编程，new Vue的时候，

el: 用来指向自己想要控制的html标签（如，这里是id值为me的div标签）

data: 这里的变量将会显示在html页面上，前提是html页面的变量要用 {{}}来包围。（如，这里的{{myName}}、{{myCountry}}

2.关于MVVM架构的Vue设计

不久前，一位后端的同学问我，你们前端有架构么。当时我未学Vue，一脸懵逼。如今才知道，原来，前端也是有自己的架构滴——比如MVVM架构。

MVVM架构：
M即Model层，V即View层，VM即ViewModel层，用一句话解释该架构的逻辑就是：VM层(ViewModel)通过接口从后台M层(Model层)请求数据，然后和V层(View层)实现数据的双向绑定。

MVVM架构就是为前后端分离来使用的，前端仅需要通过调用接口来获取后端的数据或传输数据给后台即可，十分方便~

下面是一个使用了MVVM架构的计时器demo:
index.html文件：

<body>
    <!-- MVVC架构包括：view层、viewModule层（中间桥梁作用）、module层-->
    
    <!-- view层-->
    <div id="myCounter">
        <h4>当前总数：{{number}}</h4>
        <!--当点击+、-按钮的时候，当前总数的数值会变化-->
        <!-- 法一：使用语法糖-->
        <button @click="add">+</button>
        <button @click="sub">-</button>
        <!-- 法二：-->
<!--        <button v-on:click="add">+</button>-->
<!--        <button v-on:click="sub">-</button>-->
    </div>

    <script src="js/vue.js"></script>
    <script src="js/demo02.js"></script>
</body>

demo02.js文件：

//module层
let myCounter = {
    number: 0,
}

//viewModule层
new Vue({
    el: "#myCounter",
    data: myCounter, //注意这里指的是module层定义的myCounter对象
    methods: {
        add: function(){
            console.log("计数器总数+1");
            this.number ++;
        },
        sub: function(){
            console.log("计数器总数-1");
            this.number --;
        }
    }
})