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 来监听按钮点击和子组件的自定义事件。

vue全家桶进阶之路14：常用属性和方法的相关教程结束。