vue技术点（2）—组件实例

目录 1，vue组件实例代码1，el2，data模板插值 3，methods4，computed(计算属性)5，Vue全局属性

1，vue组件实例代码

<template>
  <div id="app"> 
		<p>{{txt}}p>
		 <el-button @click="handleToPage">执行 *** 作el-button>
	div>
template>

<script>
	new Vue({
		el:"#app",
		data:{
			txt:"hello world",
		},
		methods:{
			handleToPage(pathName) {
		      //方法逻辑
		    },
		},
		created：{
		}
	});
</script>

1，el

组件的挂载点。在Vue中，el通过id="app"的特征钩住了中的所有内容，这样我们就可以在Vue中实现对DOM中的 *** 作。

2，data

实例的data（数据），值是一个对象，在对象中通过键值对的形式为组件添加数据。
data在vue框架中位置不一样，用法也不一样。简单地说， 在 实 例 中 d a t a 是 一 个 对 象 ， 在 组 件 中 的 d a t a 就 是 函 数 返 回 对 象 \color{#FF0000}{在实例中data是一个对象，在组件中的data就是函数返回对象} 在实例中data是一个对象，在组件中的data就是函数返回对象。

//在组件中的data
export default {
        name:'memberAssetList',
        data() {
            return {
                activeName: 'first',
            };
        },
}

模板插值

在组件的模板中，可以使用{{}}进行模板插值，将组件数据绑定到页面中。 {{}}中除了可以绑定组件数据，还可以绑定表达式 。

<p>{{2+3}}p> 

3，methods

组件的方法，包含的是我们对这个组件的整个逻辑以及组件中的触发事件，其中的内容相当于JavaScript中的function内容。

4，computed(计算属性)

computed：是一个对象。对象中添加方法，用于对组件的数据进行计算，返回值就是这个计算结果的值。

computed中：可以通过this使用组件对象；也可以使用其他计算结果，不需要加()。computed也会添加到组件对象中，不能和data以及methods中的名字重复。在模板中使用computed时不需要加()。computed依赖于data中的数据，只有在它的相关依赖数据发生改变时才会重新计算。 5，Vue全局属性 (1)$refs：获取模板的中dom节点（元素），(2)$route：获取路由传递的参数，(3)$emit：向父级组件触发一个事件，(4)$event：事件对象，(5)$set：在vue中，给对象添加属性,(6)$options：获取当前组件的属性（this.$options.name，获取当前组件的name）