Vue 2 新手入门指南
1. Vue 2 简介
Vue.js 是一个渐进式 JavaScript 框架，适用于构建用户界面。它采用 数据驱动 和 组件化开发 方式，使前端开发更加高效。
2. Vue 2 安装
（1）通过 CDN 引入
适合简单项目或快速测试：
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
（2）使用 Vue CLI 安装
Vue CLI 提供了完整的项目架构，适合中大型项目：
# 全局安装 Vue CLI
npm install -g @vue/cli
# 创建新项目
vue create my-vue-app
# 进入项目目录
cd my-vue-app
# 启动开发服务器
npm run serve
3. Vue 2 常用命令
（1）开发相关命令
# 运行开发环境
npm run serve
# 运行生产环境构建
npm run build
# 运行 ESLint 代码检查
npm run lint
（2）依赖管理命令
# 安装依赖
npm install
# 添加新依赖
npm install axios --save # 例如安装 axios
# 移除依赖
npm uninstall axios
（3）Vue CLI 相关命令
# 查看 Vue CLI 版本
vue --version
# 添加 Vue 路由（需在 Vue CLI 项目中）
vue add router
# 添加 Vuex（状态管理）
vue add vuex
4. Vue 2 核心概念
（1）Vue 实例
new Vue({
el: '#app', // 绑定元素
data: { message: 'Hello Vue!' }, // 定义响应式数据
});
（2）模板语法
<div id="app">
<p>{{ message }}</p> <!-- 数据绑定 -->
<p v-if="isShow">条件渲染</p>
<p v-for="item in items" :key="item.id">{{ item.text }}</p>
<button @click="count++">点击增加: {{ count }}</button>
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
isShow: true,
count: 0,
items: [{ id: 1, text: 'Vue' }, { id: 2, text: 'React' }]
}
});
（3）Vue 指令
| 指令 | 作用 |
|---|---|
v-bind | 绑定属性，如 :src="imageUrl" |
v-model | 双向数据绑定 |
v-if/v-else/v-show | 条件渲染 |
v-for | 列表渲染 |
v-on（简写 @） | 事件绑定，如 @click="method" |
v-html | 渲染 HTML |
（4）计算属性与方法
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
}
methods: {
sayHello() {
alert('Hello Vue!');
}
}
5. 组件化开发
（1）创建全局组件
Vue.component('my-component', {
template: '<p>这是一个全局组件</p>'
});
（2）创建局部组件
Vue.component('child-component', {
props: ['message'], // 通过 props 接收父组件数据
template: '<p>子组件接收的数据: {{ message }}</p>'
});
new Vue({
el: '#app',
data: { parentMessage: 'Hello from parent' }
});
<div id="app">
<child-component :message="parentMessage"></child-component>
</div>
6. Vue 2 路由（Vue Router）
（1）安装 Vue Router
vue add router
（2）基本使用
const Home = { template: '<div>首页</div>' };
const About = { template: '<div>关于我们</div>' };
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
});
new Vue({
el: '#app',
router
});
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-view></router-view>
</div>
7. Vuex（状态管理）
（1）安装 Vuex
vue add vuex
（2）基本使用
const store = new Vuex.Store({
state: { count: 0 },
mutations: {
increment(state) { state.count++; }
}
});
new Vue({
el: '#app',
store,
computed: {
count() { return this.$store.state.count; }
},
methods: {
increment() { this.$store.commit('increment'); }
}
});
<div id="app">
<p>计数: {{ count }}</p>
<button @click="increment">增加</button>
</div>
8. Vue 2 生命周期
| 钩子函数 | 触发时机 |
|---|---|
beforeCreate | 实例初始化前 |
created | 实例创建后 |
beforeMount | 挂载前 |
mounted | 挂载后（最常用） |
beforeUpdate | 更新前 |
updated | 更新后 |
beforeDestroy | 销毁前 |
destroyed | 销毁后 |
new Vue({
el: '#app',
data: { message: 'Hello Vue!' },
mounted() {
console.log('组件已挂载');
}
});
9. Vue 2 项目部署
# 生产环境打包
npm run build
dist/目录下的文件可直接部署到服务器。
10. Vue 2 常见问题
（1）数据不响应怎么办？
- 确保数据是 响应式的，对象属性要提前定义：
data() {
return { user: { name: '' } }; // 必须先定义 name
}
- 若动态添加属性：
Vue.set(this.user, 'age', 25);
（2）如何监听数据变化？
watch: {
message(newVal, oldVal) {
console.log('message 变化:', newVal);
}
}
（3）Vue 2 和 Vue 3 的区别？
- Vue 3 采用 Composition API（组合式 API）
- Vue 3 语法更简洁，性能更好
总结
- Vue 2 适用于大多数前端开发场景
- 常用指令包括
v-model、v-bind、v-for、v-if - 组件化开发提升复用性
- Vue Router 处理页面跳转，Vuex 负责状态管理
- 了解生命周期，避免不必要的更新