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