Vue学习笔记（二、Vue.js的引入与对象创建）

ttod_qzstudio2024-10-25 23:49

一、引入vue

1.通过cdn引入：

html 复制代码

 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

2.本地引入：

html 复制代码

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

二、创建Vue对象

代码参考如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>VueBaseCode</title>
    <script src="./lib/vue.js"></script>
</head>

<body>

    <div id="app">
        <p>{{msg}}</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Vue的基础代码学习'
            }
        });
    </script>
</body>

</html>

这里

html 复制代码

    <div id="app">
        <p>{{msg}}</p>
    </div>

是属于MVVM中的V，就是View的部分

而创建的Vue对象vm就是

html 复制代码

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Vue的基础代码学习'
            }
        });

是属于MVVM中VM调度者的部分。

这里创建Vue对象时，使用了一个对象作为参数，这个对象包含三个变量，el（element，要操作的元素）、data（元素中要操作的数据对象，里面包含了多个数据）、methods（方法对象，里面包含多个方法），本次课暂时不涉及methods对象。这里data对象属于MVVM中M，就是Model的部分。