vue 的第一堂课 ➡➡➡ vue起步（hello world）

最新推荐文章于 2022-10-25 22:40:49 发布

web前端 zxp

最新推荐文章于 2022-10-25 22:40:49 发布

阅读量169

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_44163269/article/details/105718129

版权

vue 专栏收录该内容

44 篇文章 15 订阅

订阅专栏

初学者的第一堂课

在此之前，了解一下 vue 的基础概念会对学习 vue 有很大的帮助 ➡➡➡ vue基础概念

vue是一套用于构建用户界面的 渐进式 的 自底层向上增量开发 的 mvvm框架

mvvm框架

M:Model模型数据
V：View 视图用户可以看见的界面
VM：ViewModel 视图模型就是视图和模型之前的桥梁，负责监听v或者m的修改可以让我们更加关心业务不用对dom操作进行关心

在这里插入图片描述

初始使用 vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules/vue/dist/vue.min.js"></script>  <!-- 引入 vue 文件 -->
</head>
<body>

    <!-- 1. 创建视图 view-->   <!-- 在vue中视图也可以叫做视图容器  其实就是一个DOM元素 -->
    
   <div id="demoDiv">   <!-- vue管理的数据都要写在这个dom容器里面 -->
		{{msg}}         <!--模版语法 {{}} ➡➡➡ 插数据的时候使用 -->
    </div>

    <script>
        // 2.创建VM ➡➡➡ vue实例
         new Vue({        //单词大小写需要注意
            el:"#demoDiv",//绑定视图
            data:{        //M层 模型 ➡➡➡ 数据
                msg:"hello world"
            }
         })

    </script>
</body>
</html>

web前端 zxp

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 的第一堂课 ➡➡➡ vue起步（hello world）

初学者的第一堂课在此之前，了解一下 vue 的基础概念会对学习 vue 有很大的帮助 ➡➡➡ vue基础概念vue是一套用于构建用户界面的渐进式的自底层向上增量开发的 mvvm框架mvvm框架M:Model模型数据V：View 视图用户可以看见的界面VM：ViewModel 视图模型就是视图和模型之前的桥梁，负责监听v或者m的修改可以让我们更加关心业务不用对d...
复制链接

扫一扫