Vue 框架核心语法与原理实战
1. Vue 简介与 MVVM 思想
Vue 是一个用于构建用户界面的渐进式 JavaScript 框架。它的核心设计理念是数据驱动视图,通过双向数据绑定减少 DOM 操作。
1.1 单向与双向数据绑定
- 单向数据绑定:当页面数据发生变化时,页面会自动重新渲染。
- 双向数据绑定:在填写表单时,自动把用户填写的内容同步到数据源中,无需手动操作 DOM。
1.2 MVVM 分层思想
MVVM 将 Model(模型/数据)、View(视图)和 ViewModel(视图模型)分离。VM 作为核心,负责处理 Model 与 View 之间的同步。当 Model 改变时,VM 自动更新 View;当 View 改动时,VM 自动更新 Model。这极大地提高了开发效率,开发者不再需要编写繁琐的 DOM 操作代码。
2. 第一个 Vue 程序
引入 Vue.js 后,它会被注册为全局变量。首先需要 new 一个 Vue 实例。
<script src="../js/vue.js"></script>
<body>
<div id="app"></div>
<script>
const myVue = new Vue({
template: '<h1>Hello World!</h1>'
})
myVue.$mount('#app') // 挂载实例
</script>
</body>
2.1 Vue 构造函数的参数 options
options 必须是一个纯粹的 JS 对象 {},包含各种配置项。
2.2 模板语句的数据来源 data
data 选项提供数据来源,可以是对象或函数。如果 data 是对象,必须是纯粹的对象。插值语法 {{}} 用于将 data 中的数据插入模板。
new Vue({
template: `<h1>{{ name }} 开始学 Vue!!</h1>`,
: {
:
}
}).$mount()


