JavaScript中编写new Vue()实例的完整教程（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）。