学习笔记（2）vue组件实例

1，实例代码

<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>

2，el

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

3，data

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

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

3.1，模板插值

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

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

4，methods

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

5，实例方法

• (1)$refs：获取模板的中dom节点（元素），
• (2)$route：获取路由传递的参数，
• (3)$emit：向父级组件触发一个事件，
• (4)$event：事件对象，
• (5)$set：在vue中，给对象添加属性,
• (6)$options：获取当前组件的属性（this.$options.name，获取当前组件的name）