Vue.js学习笔记（一）

最新推荐文章于 2025-08-17 20:43:43 发布

weixin_34378767

最新推荐文章于 2025-08-17 20:43:43 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ui javascript ViewUI

原文链接：http://www.cnblogs.com/oygg/p/5435652.html

本文介绍了Vue.js的基本概念，强调其作为一个专注于UI层面的轻量级库的特点。通过实例展示了如何利用Vue.js实现DOM与数据之间的双向绑定，以及如何通过简单的指令进行数据的实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

来自于《前端乱炖》里尤老师的基础教程；

　　Vue.js 不是一个框架，它只是一个提供 MVVM 风格的双向数据绑定的库，专注于 UI 层面。Vue.js 提供的核心是 MVVM 中的 VM，也就是 ViewModel。ViewModel 负责连接 View 和 Model，保证视图和数据的一致性。

　　在 Vue.js 的定义中，View 就是用户实际看到的 DOM 元素，而 Model 就是原生的JavaScript 对象。作为开发者，真正需要关注的只有 ViewModel，也就是 Vue.js 所提供的 Vue 构建函数:

var vm = new Vue({
    // 选项...
})

　　1.ViewModel 连接 View 和 Model 。假设我们有这样的 HTML：

<div id="demo">
    <p>{{message}}</p>
    <input v-model="message">
</div>

　　然后有这样的数据：

var data = {
    message: 'Hello Vue.js!'
}

　　我们要做的就是这样：

var demo = new Vue({
    el: '#demo',
    data: data
})

　　效果如下：

　　看上去就像是渲染了个模板而已，但其实 Vue.js 已经建立了 DOM 和数据之间的连接，此时任何对 data.message 的改动，都会触发 DOM 的更新。而更神奇的是 v-model 这条 directive 是双向的数据绑定，当用户在输入栏里打字的时候，数据会被同步回 data.message 当中去。

　　另外方便的是，返回的 demo 这个 ViewModel 对象会自动代理 data 上的属性，所以你可以直接运行 demo.message = 'what!'，能够得到和直接操作数据一样的结果。这个特点在之后会常常用到。

　　除了直接绑定一个数据值之外，你还可以在绑定中使用表达式：

<div id="demo">
    <p>{{message.split('').reverse().join('')}}</p>
    <input v-model="message">
</div>

　　效果如下：

来自于《前端乱炖》里尤老师的基础教程；

转载于:https://www.cnblogs.com/oygg/p/5435652.html