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

一、引入vue

1.通过cdn引入:
 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
2.本地引入:
<script src="./lib/vue.js"></script>

二、创建Vue对象

代码参考如下:

<!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>

这里

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

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

        而创建的Vue对象vm就是

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

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

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

猜你喜欢

转载自blog.csdn.net/ttod/article/details/143155288