Vue01- 基本使用

最新推荐文章于 2024-05-04 11:45:43 发布

moc ^_^

最新推荐文章于 2024-05-04 11:45:43 发布

阅读量106

点赞数

分类专栏：前端文章标签： Vue

本文链接：https://blog.csdn.net/qq_35976650/article/details/102492194

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1、MVVM

MVVM是前端视图层的分层开发思想，主要把每个页面，分成了M、V和VM其中，VM是MVVM思想的核心；因为VM是M和V之间的调度者。在这里插入图片描述

Model：保存的是每个页面中单独的数据；
ViewModel：它是一个调度者，分割M和V，V想要获取数据都要由VM做中间的处理；
View：每个页面中的HTML结构。

2、Hello

Vue入门使用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1. 导入Vue -->
    <script src="lib/vue-2.4.0.js"></script>
</head>

<body>
<!-- new的Vue实例会控制这个元素中的所有内容 -->
<!-- Vue实例所控制的这个元素区域，就是mvvm中的v -->
<div id="app">
    <p>{{ msg }}</p>   <!-- 插值表达式 -->
</div>

<script>
    // 2. 创建vue实例
    // 当导入Vue包后，在浏览器内存中，就会有一个Vue构造函数
    // 注意：new出来的vm对象，就是mvvm中的vm
    var vm = new Vue({
        el: '#app', // 表示当前new的这个Vue实例要控制页面上的那个区域
        // 注意： 这里的data就是mvvm中的m
        data : {    // data属性中存放el中要用到的数据
            msg: '欢迎学习Vue'  // 通过Vue指令，可以很方便将数据渲染到页面，不再需要手动操作DOM元素
        }
    });
</script>
</body>
</html>