vue全家桶进阶之路14：常用属性和方法

Vue2中常用的属性和方法：

属性

• el：用于指定Vue实例挂载的元素，可以是CSS选择器、HTML元素或Vue组件。
• data：用于存储Vue实例的响应式数据，也可以是一个函数，返回一个对象，用于提供数据的初始化值。
• computed：用于计算和返回基于Vue实例数据的派生属性，具有缓存功能。
• watch：用于监听Vue实例的数据变化，执行相应的操作。
• methods：用于定义Vue实例的方法，可以在模板中绑定事件使用。
• props：用于接收父组件传递的数据，用于实现组件之间的通信。
• components：用于定义全局或局部的Vue组件。
• filters：用于定义Vue实例的过滤器，用于格式化文本、数字等数据。

• template：用于指定 Vue 组件的模板，可以是一个字符串模板，也可以是一个 DOM 元素，甚至可以是一个 Vue 组件。

• computed：计算属性对象，可以根据已有的数据计算出新的数据属性，与 data 数据属性不同的是，computed 属性是只读的。

• directives：用于自定义指令，可以在 HTML 元素上添加自定义行为，如 v-focus 等。

• mounted：Vue 实例挂载到 DOM 后自动调用的钩子函数，可以在该函数中进行 DOM 操作。

• created：Vue 实例创建时自动调用的钩子函数，可以在该函数中进行一些初始化操作。

方法

• $mount：手动挂载Vue实例，通常在使用Vue时不需要手动调用，Vue会自动调用该方法。
• $watch：手动创建一个数据监听器，可以监听数据变化并执行相应的操作。
• $nextTick：在DOM更新队列为空时调用指定的回调函数，通常用于在DOM更新后执行某些操作。
• $emit：用于在Vue实例中触发自定义事件，并向父组件或子组件传递数据。
• $on：用于在Vue实例中监听自定义事件，并执行相应的操作。
• $set：用于给Vue实例动态添加响应式属性，通常用于在组件中动态添加数据。
• $delete：用于删除Vue实例的响应式属性，通常用于在组件中删除数据。

• $emit(event, [args])：触发当前组件的指定事件，并传递参数 args 给回调函数。

• $on(event, callback)：监听当前组件的指定事件，并注册回调函数 callback。

• $nextTick(callback)：在 DOM 更新后执行回调函数 callback。

• $refs：用于访问组件中的子组件或 DOM 元素。

• $set(object, key, value)：用于给 Vue 数据对象中的属性设置新值。

• $watch：监听数据变化并执行相应的回调函数。

• $mount(el)：手动挂载 Vue 组件到指定的 DOM 元素上。

• $destroy()：手动销毁 Vue 组件。

 

以下是一个简单的 Vue 示例，包括一些常用属性和方法，并做了注释：

<!-- index.html -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <input v-model="inputText" v-focus>
    <p>computed property: {{ computedProp }}</p>
    <button @click="incrementCounter">{{ counter }}</button>
    <child-component :child-message="message" @child-event="handleChildEvent"></child-component>
  </div>
</template>

<script>
  // 定义子组件
  Vue.component('child-component', {
    props: ['childMessage'],
    template: '<div>{{ childMessage }} <button @click="$emit(\'child-event\')">emit child event</button></div>'
  });

  export default {
    data() {
      return {
        message: 'Hello, Vue!',
        inputText: '',
        counter: 0
      }
    },
    computed: {
      computedProp() {
        return this.message.toUpperCase();
      }
    },
    directives: {
      focus: {
        inserted: function (el) {
          el.focus();
        }
      }
    },
    mounted() {
      console.log('mounted');
    },
    created() {
      console.log('created');
    },
    methods: {
      incrementCounter() {
        this.counter++;
      },
      handleChildEvent() {
        console.log('child event emitted');
      }
    }
  };
</script>

在这个示例中，我们使用了 <template> 标签来定义视图模板，使用了 <script> 标签来定义 Vue 实例的选项对象。其中：

• data 属性返回一个包含 message、inputText 和 counter 三个响应式数据属性的对象；
• computed 属性返回一个包含 computedProp 计算属性的对象，用于根据 message 计算出一个新的数据属性；
• directives 属性包含了一个自定义指令 v-focus，用于使输入框自动获取焦点；
• mounted 和 created 钩子函数，分别在 Vue 实例挂载到 DOM 后和创建时自动调用；
• methods 属性包含了 incrementCounter 和 handleChildEvent 两个方法，分别用于更新计数器和处理子组件的自定义事件；
• 子组件 child-component，包含了一个 childMessage 属性和一个自定义事件 child-event。

在模板中，我们使用了 {{ message }} 和 v-model 指令来绑定数据属性 message 和 inputText，使用了 v-focus 自定义指令来使输入框自动获取焦点，使用了 computedProp 来显示计算后的数据属性值，使用了 @click 和 @child-event 来监听按钮点击和子组件的自定义事件。