实例的完整教程（Vue 2.x）)
一、环境搭建
引入Vue库
通过CDN或本地文件引入Vue 2.x：
<!-- 开发版本（包含警告） --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!-- 生产版本（优化后） --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
二、创建Vue实例
1. 基础实例化
// 创建Vue实例并挂载到DOM元素 const vm = new Vue({ el: '#app', // 挂载点（CSS选择器） data: { message: 'Hello Vue!', count: 0 }, methods: { increment() { this.count++; } } });el：指定挂载的DOM元素（如<div id="app"></div>）。data：响应式数据对象，需在实例创建前定义。methods：定义组件方法，通过this访问数据和方法。
三、数据绑定与模板
1. 插值表达式
<div id="app"> <p>{{ message }}</p> <!-- 显示data.message --> <p>计数：{{ count }}</p> </div>2. 双向绑定（v-model）
<div id="app"> <input v-model="message" placeholder="输入内容"> <p>输入内容：{{ message }}</p> </div>v-model：实现表单元素与数据的双向绑定。
四、生命周期钩子
Vue实例的生命周期钩子允许在特定阶段执行代码：
new Vue({ el: '#app', data: { message: 'Hello' }, beforeCreate() { console.log('实例初始化前'); // 无法访问data/methods }, created() { console.log('实例创建完成'); // 可访问data，但未挂载DOM }, mounted() { console.log('DOM已挂载'); // 可操作DOM }, beforeDestroy() { console.log('实例销毁前'); // 清理定时器/事件监听 } });常用钩子：
created（数据初始化）、mounted（DOM操作）、updated（数据更新后）。
五、组件化开发
1. 全局组件注册
// 定义组件 Vue.component('my-component', { template: '<div>这是一个组件</div>' }); // 使用组件 new Vue({ el: '#app', template: '<my-component></my-component>' });2. 局部组件注册
const MyComponent = { template: '<div>局部组件</div>' }; new Vue({ el: '#app', components: { 'my-component': MyComponent }, template: '<my-component></my-component>' });六、进阶用法
1. 计算属性（Computed）
new Vue({ data: { firstName: '张', lastName: '三' }, computed: { fullName() { return this.firstName + this.lastName; } } });特点：缓存计算结果，依赖数据变化时自动更新。
2. 监听器（Watch）
new Vue({ data: { searchQuery: '' }, watch: { searchQuery(newVal) { console.log('搜索词变化:', newVal); } } });用途：监听数据变化并执行异步操作（如API调用）。
七、完整示例
<!DOCTYPE html> <html> <head> <title>Vue实例教程</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="app"> <h1>{{ message }}</h1> <input v-model="message"> <button @click="increment">点击次数：{{ count }}</button> </div> <script> new Vue({ el: '#app', data: { message: '欢迎使用Vue!', count: 0 }, methods: { increment() { this.count++; } }, mounted() { console.log('DOM已挂载，开始交互'); } }); </script> </body> </html>八、调试与优化
Vue Devtools：浏览器插件，实时查看组件状态和数据流。
vm.$refs：访问子组件或DOM元素：// 在模板中添加ref <div ref="myDiv"></div> // 在JS中访问 this.$refs.myDiv.style.color = 'red';
九、Vue 3差异提示
响应式系统：Vue 3使用
Proxy替代Object.defineProperty，支持深层监听。Composition API：推荐使用
setup()函数替代new Vue()语法（需配合vue@3）。
