【Vue学习笔记 Day01】Vue基本代码和MVVM之间的对应关系

最新推荐文章于 2021-07-15 16:54:06 发布

共你山今

最新推荐文章于 2021-07-15 16:54:06 发布

阅读量168

点赞数

分类专栏： # 【前端】Vue 个人知识体系文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_45357284/article/details/108370939

版权

【前端】Vue 个人知识体系专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue基本代码和MVVM之间的对应关系

1、导入vue的包

    <script scr="lib/vue.js">

2、创建一个Vue实例，当我们导入包之后，在浏览器内存中就多了一个Vue的构造函数

var vm = new Vue({})

3、el:表示当前我们new的这个实例，要控制页面上的哪个区域

    var vm = new Vue({
        el:'#app',
    })

4、data属性中，存放的是el中要使用到的数据

    var vm = new Vue({
        el:'#app',
        data:{
            msg:'Hello Word',
        }
    })

5、**上面msg的是通过vue提供的指令，可以很方便的将数据渲染到页面上，程序员不再手动的操作DOM元素，而且前端的VUE等框架不提倡我我们去手动操作DOM了。

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>

    
    <script src="lib/vue.js"></script>
    <body>
    <!--将来new的vue的实例，会控制这个元素中的所有内容-->
    <div id="app">
        <p>{{msg}}</p>
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello Word',  
            }
        })
    </script>
    </html>

MVVM之间的关系

V层就是视图层，对应的关系是body里面的#app里面需要渲染显示的。

new Vue的实例就是VM调度者

而M在哪里呢？也就是data，保存每个页面的数据

共你山今

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Vue学习笔记 Day01】Vue基本代码和MVVM之间的对应关系

Vue基本代码和MVVM之间的对应关系1、导入vue的包<script scr="lib/vue.js">2、创建一个Vue实例，当我们导入包之后，在浏览器内存中就多了一个Vue的构造函数var vm = new Vue({})3、el:表示当前我们new的这个实例，要控制页面上的哪个区域var vm = new Vue({ el:'#app',})4、data属性中，存放的是el中要使用到的数据var vm = new Vue({ el:'#app',
复制链接

扫一扫

专栏目录