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的部分。

相关推荐
陈洪奇1 小时前
注册中心学习笔记整理
笔记·学习
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD3 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding3 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空3 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
兴趣使然_4 小时前
【笔记】使用 html 创建网址快捷方式
笔记·html·js
01传说4 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
aramae6 小时前
C++ -- STL -- vector
开发语言·c++·笔记·后端·visual studio