Vue.js 基础入门：环境搭建与核心概念解析
开发环境准备
在开始 Vue.js 开发之前，建议准备好以下工具和插件：
- VS Code：主流的代码编辑器。
- Live Server 插件：在 VS Code 中安装此插件，可以快速启动一个本地开发服务器，实现代码修改后的实时刷新。
- Vue Devtools：Chrome 浏览器的调试扩展程序，用于监控 Vue 实例的状态和数据流向。
编写第一个 Vue 应用
通过引入 CDN 或本地脚本文件即可开始使用 Vue 2.x。以下是一个简单的示例，展示如何将数据渲染到 DOM 中：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Vue 快速上手</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<!-- 宿主容器 -->
<div id="root">
<h1>欢迎来到 {{ appName }}</h1>
</div>
<script>
// 关闭生产环境提示
Vue.config.productionTip = false;
// 创建 Vue 实例
new Vue({
el: '#root', // 绑定容器
data: {
appName: 'Vue 的世界'
}
});
</script>
</body>
</html>核心模板语法
Vue 的模板语法主要分为两大类：插值语法和指令语法。
- 插值语法
{{ js_expression }}：主要用于解析标签体内的文本内容。 - 指令语法
v-???：用于解析标签属性、绑定事件等。例如v-bind可以动态绑定属性值。
<div id="app">
<!-- 插值语法 -->
<p>用户姓名：{{ userInfo.name }}</p>
<!-- 指令语法 (v-bind: 可简写为 :) -->
<a :href="userInfo.homePage">访问个人主页</a>
</div>
<script>
new Vue({
el: '#app',
data: {
userInfo: {
name: '极客开发者',
homePage: 'https://github.com'
}
}
});
</script>数据绑定模式
Vue 提供了两种主要的数据绑定方式：
- 单向绑定 (v-bind)：数据只能从
data流向页面。 - 双向绑定 (v-model)：数据在
data和页面（表单元素）之间双向同步。v-model默认收集的是元素的value值。
<div id="binding-demo">
单向：<input type="text" :value="val"> <br>
双向：<input type="text" v-model="val">
</div>
<script>
new Vue({
el: '#binding-demo',
data: {
val: '初始内容'
}
});
</script>Vue 实例的配置技巧
在实际开发中，el 和 data 有不同的写法：
- el 的挂载：除了直接在配置对象中写
el，还可以使用vm.$mount('#id')进行手动挂载。 - data 的定义：在组件化开发中，
data必须写成函数形式并返回一个对象，以防止多个组件实例共用同一份数据。
const vm = new Vue({
// 函数式 data
data() {
return {
status: 'Active'
};
}
});
vm.$mount('#app');理解 MVVM 模型
Vue 的设计参考了 MVVM 架构模式：
- M (Model)：模型，对应
data中的纯 JavaScript 对象。 - V (View)：视图，即 DOM 结构（模板代码）。
- VM (ViewModel)：视图模型，即 Vue 实例，它是连接 Model 和 View 的桥梁，负责数据监听与视图更新。
数据代理机制
Vue 实现数据响应式的核心是数据代理。它通过 Object.defineProperty() 方法，将 data 对象中的所有属性映射到 Vue 实例（vm）上。
底层原理示例：
let dataStore = { price: 100 };
let proxyObj = {};
// 通过 proxyObj 代理对 dataStore.price 的操作
Object.defineProperty(proxyObj, 'price', {
get() {
console.log('读取价格');
return dataStore.price;
},
set(newVal) {
console.log('修改价格');
dataStore.price = newVal;
}
});在 Vue 内部，当你访问 vm.prop 时，实际上是触发了 getter 去读取 _data 中的对应属性；当你修改属性时，setter 会同步更新 _data 并触发视图更新。
