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

一、引入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的部分。

相关推荐
绿皮的猪猪侠10 分钟前
算法笔记上机训练实战指南刷题
笔记·算法·pta·上机·浙大
沧海一笑-dj19 分钟前
【51单片机】51单片机学习笔记-课程简介
笔记·学习·51单片机·江科大·江科大学习笔记·江科大单片机·江科大51单片机
行云&流水25 分钟前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎062740 分钟前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台1 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
大苏打seven2 小时前
Docker学习笔记:Docker网络
笔记·学习·docker
盛夏绽放2 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
kikikidult5 小时前
(2025.07)解决——ubuntu20.04系统开机黑屏,左上角光标闪烁
笔记·ubuntu
markyankee1015 小时前
Vue 响应式系统全面解析:从基础到高级实践
vue.js
近津薪荼6 小时前
初学者关于数据在内存中的储存的笔记
笔记