element-ui使用心得之三：怎么看element官方文档

直接先说最常用的

一、使用组件

	以el-input为例

1. Attributes：

	attributes属性直接在组件上引用，前面的checkbox表示引用的标签,比如：

<template>
	<el-input type="number"></el-input>
	// type为字符串的话可以直接写
	<el-input :type="inputType"></el-input>
	<el-input v-bind:type="inputType"></el-input>
	// 如果是变量可以用v-bind:或者简写:, 在script的data中注册inputType: 'number'
	<el-input clearable></el-checkbox>
	<el-input :clearable="true"></el-input>
	// 像clearable这样值为true和false的属性可以写:clearable="true"或:clearable="false"(这里要加:,
	// 否则程序会将true识别为字符串)或者直接写border（程序会默认它为true）
	<el-input v-model="inputValue"></el-input>
	// v-model为vue提供的指令，不加:或者v-bind:
</template>
<script>
export default {
	data () {
		inputType: 'number',
		inpuValue: ''
	}
}
</script>

2. Events

events事件是可以在组件上监听的事件

<template>
	<el-input @change="inputChange"></el-input>
</template>
<script>
export default {
	methods: inputChange (newVal) {
		// 这里的形参newVal是input改变后的新值
		console.log(newVal)
	}
}
</script>

3. Methods

methods是用来调用的方法

<template>
	<el-input ref="inputRef">
	</el-input>
</template>
<script>
export default {
	methods: handleInputFocus () {
		// 这里需要先用vue提供的ref方法选中该el-input元素，再调用focus方法
		// 官方文档中的回调参数是--表示无形参，传了也没用
		this.$refs.inpuRef.focus()
	}
}
</script>

4. autocomplete

autocomplete是组件名，也就是el-autocomplete,autocomplete也是elput的一种，由于它拥有自己独特的属性、方法，所以把它单独做成了一个组件。
后面的Autocomplete Attributes，Autocomplete Slots，Autocomplete Scoped Slot，Autocomplete Events，Autocomplete Methods都是autocomplete的属性和方法

5. Slots

大家都知道，slot是vue提供的插槽

<template>
	<div class="demo-input-suffix">
	// 如果我们想自定义前置或者后置图标的话，可以用slot
	// 官方提供了4种：prefix框内前置，suffix框内后置，prepend框外前置，append框外后置
	  <el-input
	    placeholder="请选择日期"
	    v-model="input3">
	    <i slot="suffix" class="el-input__icon el-icon-date"></i>
	  </el-input>
	  <el-input
	    placeholder="请输入内容"
	    v-model="input4">
	    <i slot="prefix" class="el-input__icon el-icon-search"></i>
	  </el-input>
	</div>
</template>

官方还提供了另外一种自定义前置后置图标的方法：配置属性

<template>
	<div class="demo-input-suffix">
	  属性方式：
	  <el-input
	    suffix-icon="el-icon-date">
	   // element提供的所有icon这里都可以使用
	  </el-input>
	</div>
</template>

6. Scoped Slots

给el-autocomplete内部自定义内容传参，用如下的方式就可以在输入建议中渲染出来 “我的 ￥”

<template>
	<el-autocomplete
	  popper-class="my-autocomplete"
	  v-model="state"
	  :fetch-suggestions="querySearch"
	  placeholder="请输入内容"
	  @select="handleSelect">
	  <i
	    class="el-icon-edit el-input__icon"
	    slot="suffix"
	    @click="handleIconClick">
	  </i>
	  <template slot-scope="{ item }">
	    <div class="name">{{ item.value }}</div>
	    <span class="addr">{{ item.address }}</span>
	  </template>
	</el-autocomplete>
</template>
<script>
export default {
	return data () {
		item: {
			value: '我的',
			address: '￥'
		}
}
</script>

7. 辨别是哪个组件的属性

如上，Checkbox Events表示下面的event时间都是el-checkbox组件的
checkboxs-group表示下面的attributes属性都是el-checkbox-group组件的

<template>
	<el-checkbox-group size="small">
		// checkboxChange函数应在script中注册
		<el-checkbox @change="checkboxChange">
		</el-checkbox>
	</el-checkbox-group>
</template>

题外话，根据最新的代码规范，vue的自定义组件名都建议用kebab-case短横线连接，并且为双标签，所以
element-ui中的自定义组件均为<el-checkbox></el-checkbox>这种写法

如有错误，请不吝赐教！