Vue.js简介

Vue.js 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue.js 核心特点

渐进式：可以从核心功能开始，逐步添加路由、状态管理等高级功能。

易学易用：基于标准HTML、CSS和JavaScript，具有简洁的API和详细的文档。

高性能：虚拟DOM和智能的更新策略，确保应用的性能表现。

Vue与其他框架对比

Vue在设计上借鉴了Angular的模板语法和React的组件化思想，同时提供了更简单的API和更好的性能。

Vue.js 代码示例

这是一个简单的Vue.js示例，展示了Vue的基本工作原理：

第一个Vue应用 
<!-- HTML模板 -->
<div id="app">
  <p>{{ message }}</p>
  <button @click="reverseMessage">反转消息</button>
</div>

<!-- JavaScript代码 -->
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>
Vue实例演示

{{ message }}

安装与起步

Vue.js提供了多种安装方式，可以根据项目需求选择合适的方式。

Vue.js安装方式 
// 1. 使用CDN直接引入（适合学习或简单项目）
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

// 2. 使用NPM安装（推荐用于实际项目）
npm install vue

// 3. 使用Vue CLI创建项目（现代项目标准方式）
npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve

// 4. 使用Vite创建Vue项目（更快的构建工具）
npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

推荐方式

对于初学者，建议先从CDN方式开始学习Vue核心概念。对于实际项目，推荐使用Vue CLI或Vite创建项目，它们提供了完整的项目脚手架和开发工具链。

第一个Vue应用

通过以下步骤创建你的第一个Vue应用：

动手实践

在下面的编辑器中尝试修改代码，实时查看Vue应用的变化：

HTML模板

JavaScript代码

实时预览

点击"更新Vue实例"按钮查看效果

Vue实例与生命周期

每个Vue应用都是通过创建Vue实例开始的。Vue实例是Vue应用的根，它包含了数据、方法、生命周期钩子等选项。

Vue实例与生命周期钩子 
// 创建Vue实例
var vm = new Vue({
  // 选项对象
  el: '#app', // 挂载元素
  data: { // 数据
    message: 'Hello Vue!',
    count: 0
  },
  methods: { // 方法
    greet: function() {
      alert(this.message);
    }
  },
  
  // 生命周期钩子
  beforeCreate: function() {
    console.log('beforeCreate: 实例初始化之后，数据观测之前');
  },
  created: function() {
    console.log('created: 实例创建完成，数据观测已建立');
  },
  beforeMount: function() {
    console.log('beforeMount: 挂载开始之前');
  },
  mounted: function() {
    console.log('mounted: 实例挂载到DOM后调用');
  },
  beforeUpdate: function() {
    console.log('beforeUpdate: 数据更新时，虚拟DOM重新渲染之前');
  },
  updated: function() {
    console.log('updated: 数据更新导致虚拟DOM重新渲染后');
  },
  beforeDestroy: function() {
    console.log('beforeDestroy: 实例销毁之前');
  },
  destroyed: function() {
    console.log('destroyed: 实例销毁后');
  }
});
Vue生命周期演示

下面的Vue实例展示了生命周期钩子的执行顺序。打开浏览器控制台查看日志输出。

生命周期演示

当前状态: {{ status }}

计数器: {{ counter }}

生命周期事件: