JavaScript （学习心得）Vue.js----一套用于构建用户界面的渐进式框架

Mcdowell160 · 2023/03/15

最近学习了Vue，写起来感觉还是很不错的一个框架，想与大家分享一下
可能半月后才会真正开始更新（要复试），先在这儿开个坑？（诶嘿

如题所示，Vue是一套用于构建用户界面的渐进式框架，它与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

——以上是Vue官方网站给出的定义和解释，但是我反正是有点看不太懂...

我对Vue的理解是，作为可以前后端分离开发模式的框架，Vue给前端开发者缓解了许多以前前后端打架（）的局面，使用了Vue后，前端开发者只需关注“网页框架”的搭建，这里所说的框架搭建就是把样式啊什么的都开发好，同时为即将所展现的数据留个位置，以供后端开发者填上，最终实现了前后端分离。

体验Vue
废话不多说，先上代码体验一下Vue的魅力
在html中，通过引入来使用Vue
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
引用完毕后，就可以在<body>中写下给Vue的DOM容器了
注意：为了便于理解，我们首先会直接在html中直接引入Vue，关于Vue-cli（脚手架）会在后续进一步说明

HTML：

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

然后我们再创建一个<script>，在其中创建Vue的实例

HTML：

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: "Hello Minebbs!"
        }
    })
</script>

其中，Vue实例中的el是指定Vue要注入的DOM容器，一般使用类似于CSS选择器中的id选择器（#）来选中；data是用于你想今后从后端传来并被应用到DOM容器上的数据。
注意，现在的DOM就是响应式的了，当你试图通过修改文件或在开发者控制台（F12）上输入命令
vm.msg="Hello YYT!"
时，Vue就会动态地更新数据。

在这个小例子中，我们仅仅是看到了网页上的数据作了更改，但是其实Vue在后台帮我们做了很多工作，这牵扯到数据代理、MVVM模型等一系列的东西，这些东西在后面会再展开介绍。

OK，先写到这儿吧，今天也是努力的一天呢（

phj233 · 2023/03/15

vue2语法

Mcdowell160 · 2023/03/15

phj233 说：
vue2语法

确实，vue3可以先不急，到后面从vue2过渡到vue3

JavaScript （学习心得）Vue.js----一套用于构建用户界面的渐进式框架

相似主题

主题

资源

回复

在线管理成员

在线会员

我们重视您的隐私