官网：https://v2.cn.vuejs.org/v2/guide/components-slots.html
<template>
1.指令
v-if v-else 用 key 管理可复用的元素 注意我们不推荐在同一元素上使用 v-if 和 v-for
v-show css的dispaly:none;
v-for:遍历数组<li v-for="(item,index) in [1,2,3,4]" :key="index">{
{ item }}</li>
//也可以用 v-for 来遍历一个对象的 property 列如：<li v-for="(value, name, index) in object">{
{ index }}{
{ name }}{
{ value }}</li>
//为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute（不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。）
//数组更新检测push() pop() shift() unshift() splice() sort() reverse()
//当在组件上使用 v-for 时，key 现在是必须的。
v-once
v-html
v-bind：简写：动态参数<a v-bind:[attributeName]="url"> ... </a> 例如，如果你的 Vue 实例有一个 data property attributeName，其值为 "href",data(){return{attributeName:'href'}}那么这个绑定将等价于<a v-bind:href="url"> ... </a> 。
v-on: 事件处理 v-on:click='hanleClick' 简写 @click='hanleClick'
//事件修饰符.stop .prevent .capture .self .once .passive
//官方代码示例：
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
//Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
这个 .passive 修饰符尤其能够提升移动端的性能。不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
//按键修饰符
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<input v-on:keyup.page-down="onPageDown">
<input v-on:keyup.13="submit">
其他别名.enter .tab .delete (捕获“删除”和“退格”键) .esc.space.up.down.left.right
你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
//可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112
//系统修饰键 .ctrl.alt.shift.meta
//鼠标按钮修饰符.left .right .middle
v-model:表单输入绑定 v-bind 和 v-on 的结合使用<input v-model='a' /> ==> <a v-bind:value='a' @input='inputChange'>
//修饰符
.lazy在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转为在 （change或失去焦点或按回车时才更新）事件_之后_进行同步：
<input type="text" v-model.lazy="message">
.number: 将输入的值转换为Number类型
.trim: 过滤掉输入的首尾空格
//Class 与 Style 绑定 active:css样式表 可以接收一个对象或者数组
<li v-for='(item,index) in [1,2,3,4]' :class="{ active: selectIndex == index }"></li>
<li v-for='(item,index) in [1,2,3,4]' :class="[{ active: selectIndex == index }, {color:red;}]"></li>
v-slot
v-pre
v-cloak
//动态组件:
//有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里
<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>
<component @jump='addTab' :is="item.component"></component>//运维项目就用到了v-bind:is
//组件名大小写
使用 kebab-case：my-component-name
使用 PascalCase：MyComponentName，首字母大写命名
Prop 类型 单向数据流
['a','b']
a: {
type: Array,//[String,Number,Boolean,Array,Object,Date,Function,Symbol]中的一个或多个
default: [],//数组
require:true // 必填
},
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].includes(value)
}
}
}
//注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的。
//自定义事件
this.$emit('myEvent')
<my-component v-on:my-event="doSomething"></my-component>
将原生事件绑定到组件：你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符：
<base-input v-on:focus.native="onFocus"></base-input>
.sync 修饰符官方解释：在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。
this.$emit('update:title', newTitle)
<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event"</text-document>
为了方便这种写法，vue提供了.sync修饰符，说白了就是一种简写的方式，我们可以将其当作是一种语法糖，比如v-on: click可以简写为@click。而上边父组件的这种写法，换成sync的方式就像下边这样：
<text-document :title.sync="title"></text-document>
</template>
export default{
01.name：'',//只有作为组件选项时起作用
02.data(){
//一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
selectIndex: -1, //选中的状态
},
03.methods:{
reversedMessage: function () {// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
04.computed:{
//计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。
reversedMessage: function () {// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
//计算属性的 setter 计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
},
05.componets:{},
06.watch(){
//侦听器 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调
// 如果 `question` 发生改变，这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
//首次执行
},
07.beforeCreate(){},
08.created(){},
09.beforeMount(){},
10.mounted(){},
11.beforeUpdate(){},
12.updated(){},
13.active(){},
14.deactive(){},
15.beforedestory(){},
16.destoryed(){},
16.1.errorCaptured(){//在捕获一个来自后代组件的错误时被调用},
17.nextTick(){},
18.beforeRouteEnter（to, from, next）{}，
19.beforeRouteUpdate（to, from, next）{}，
20.beforeRouteLeave（to, from, next）{}，
21.mixins:[],
22.props:[] or {},
23.filters:{},
24.provide(){},
25.inject:[],
26.inheritAttrs: false,//如果你不希望组件的根元素继承特性，你可以在组件的选项中设置
27.directives{has: { inserted(el){ el.focus()} } }// 自定义指令
28.extends
29.delimiters://改变纯文本插入分隔符.
30.functional://使组件无状态 (没有 data) 和无实例 (没有 this 上下文)。他们用一个简单的 render 函数返回虚拟节点使它们渲染的代价更小。
31.inheritAttrs://默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上.注意：这个选项不影响 class 和 style 绑定。
32.comments:当设为 true 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。
33.render(h)=>{
//在options api中使用h函数
//jsx语法，h是crealElement方法.
/createElement（TagName，Option，Content）接受三个参数
/createElement(" 定义的元素 "，{ 元素的性质 }，" 元素的内容"/[元素的内容])
return h("div",{style:{color:red;}},"我是render渲染函数")
}
h函数接收三个参数。
第一个参数:，可以为一个html标签，一个组件，一个异步组件，或者是一个函数式组件。
第二个参数：{ Object } Props，与attributes和props,以及事件对应的对象，我们可以在模板中使用，如果没有需要传入的属性，可以设置为null。
第三个参数：{String | Object |Array}可以是字符串Text文本或者是h函数构建的对象再者可以是有插槽的对象。
//举个小栗子
render:(h) => {
return h('div',{
//给div绑定value属性
props: {
value:''
},
//给div绑定样式
style:{
width:'30px'
},
//给div绑定点击事件
on: {
click: () => {
console.log('点击事件')
}
},
})
}
}
}
<style scoped>
.active {
background: #f00;
color: #ff9;
}
</style>
If there are any deficiencies, bloggers can check and fill them in...