vue2简易实现

Vue2 简易实现

Vue2 是一个渐进式 JavaScript 框架，用于构建用户界面。以下是一个简易的 Vue2 实现示例，涵盖核心功能如数据绑定、指令和组件化。

安装 Vue2

通过 CDN 引入 Vue2：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

或通过 npm 安装：

npm install vue@2.6.14

基础示例

创建一个简单的 Vue 实例，实现数据绑定和事件处理：

<div id="app">
  <p>{{ message }}</p>
  <button @click="reverseMessage">反转消息</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    methods: {
      reverseMessage() {
        this.message = this.message.split('').reverse().join('');
      }
    }
  });
</script>

指令使用

Vue2 提供多种指令（如 v-if、v-for）实现动态逻辑：

<div id="app">
  <p v-if="show">这段文字会根据条件显示</p>
  <ul>
    <li v-for="item in items">{{ item.text }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      show: true,
      items: [
        { text: '项目 1' },
        { text: '项目 2' }
      ]
    }
  });
</script>

组件化开发

通过 Vue.component 定义全局组件：

<div id="app">
  <my-component></my-component>
</div>

<script>
  Vue.component('my-component', {
    template: '<div>这是一个自定义组件</div>'
  });

  new Vue({
    el: '#app'
  });
</script>

计算属性与侦听器

使用 computed 和 watch 处理复杂逻辑：

<div id="app">
  <p>原始数据: {{ firstName }} {{ lastName }}</p>
  <p>计算属性: {{ fullName }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      firstName: '张',
      lastName: '三'
    },
    computed: {
      fullName() {
        return this.firstName + ' ' + this.lastName;
      }
    },
    watch: {
      firstName(val) {
        console.log('firstName 变为: ' + val);
      }
    }
  });
</script>

生命周期钩子

Vue2 提供生命周期钩子（如 created、mounted）：

<script>
  new Vue({
    el: '#app',
    data: { count: 0 },
    created() {
      console.log('实例已创建');
    },
    mounted() {
      console.log('DOM 已挂载');
    }
  });
</script>

注意事项

• 使用 v-bind 绑定属性（缩写 :），如 :class、:style。
• 使用 v-on 绑定事件（缩写 @），如 @click、@input。
• 通过 this.$emit 实现子组件向父组件通信。

以上示例展示了 Vue2 的核心功能，可根据需求进一步扩展。