Vue2.x 实例配置选项(全网最全)

官网：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>

如有不足，广大博友查漏补缺...