<template>
<!--用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:
应该要么都用要么都不用。 -->
  <div
    is='定义(提供组件的选项)'
    v-for='渲染列表 (创建多个变化的相同元素)'
    v-if/v-else-if/v-else/v-show/v-cloak='条件渲染 (元素是否渲染/显示)'
    v-pre/v-once='渲染方式 (改变元素的渲染方式)'
    id='全局感知 (需要超越组件),少用id,id会创建全局变量，尽量使用ref等'
    ref/key/slot='唯一的特性 (需要唯一值的特性)'
    v-model='双向绑定 (把绑定和事件结合起来)'
    v-bind="$attr继承父级attr,其它特性 (所有普通的绑定或未绑定的特性)"
    v-on='事件 (组件事件监听器)'
    v-html/v-text='内容 (覆写元素的内容)'
  >
  <!--
    v-for和v-if不能写一个标签内props
    v-for/(v-if和v-else连用)必须加key
  -->
  </div>
</template>
<script>
export default {
  //挂载节点
  el:'#app',
  //name,vue-devtools显示的就是这个
  name:'ABCD',
  //指定父级
  parent:'',
  //无状态 (没有 data ) 和无实例 (没有 this 上下文)
  functional:true/false,
  //纯文本插入分隔符,可替换['${', '}']等等
  delimiters:["{{", "}}"],
  //当设为 true 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。
  comments:true/false,
  //组件
  compontents:{},
  //自定义指令
  directives:{
    //自动聚焦v-focus
    focus: {
      // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
      bind:function(){},
      //被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
      inserted: function (el) {
        el.focus()
      },
      /*
      *所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
      *指令的值可能发生了改变，也可能没有。
      *但是你可以通过比较更新前后的值来忽略不必要的模板更新
      */
      //el指令所绑定的元素，可以用来直接操作 DOM 。
      //bingding一个对象
      //vnode：Vue 编译生成的虚拟节点。
      //oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
      update (el, binding, vnode) {
        var s = JSON.stringify;
          el.innerHTML =
          //name:指令名，不包括 v- 前缀。
          'name: '       + s(binding.name) + '<br>' +
          //指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
          'value: '      + s(binding.value) + '<br>' +
          //oldValue：指令绑定的前一个值，
          //仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
          'oldValue: '      + s(binding.value) + '<br>' +
          //expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
          'expression: ' + s(binding.expression) + '<br>' +
          //arg：传给指令的参数，可选。
          //例如 v-my-directive:foo 中，参数为 "foo"。
          'argument: '   + s(binding.arg) + '<br>' +
          //modifiers：一个包含修饰符的对象。
          //例如：v-my-directive.foo.bar 中，
          //修饰符对象为 { foo: true, bar: true }。
          'modifiers: '  + s(binding.modifiers) + '<br>' +
          //Vue 编译生成的虚拟节点。
          'vnode keys: ' + Object.keys(vnode).join(', ');
      },
      //指令所在组件的 VNode 及其子 VNode 全部更新后调用。
      componentUpdated:function(){
      },
      //只调用一次，指令与元素解绑时调用。
      unbind(){
      },
    }
  },
  //过滤器
  filters:{
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  },
  /*
  *允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数)，
  *而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。
  *逻辑与mixins一样
  */
  extends:Object | Function,
  /*
  *混入,来分发 Vue 组件中的可复用功能
  *数据对象在内部会进行递归合并，并在发生冲突时以组件(引入端)数据优先。
  *同名钩子函数将合并为一个数组，因此都将被调用。
  *混入对象的钩子将在组件自身钩子之前调用。
  *值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。
  *两个对象键名冲突时，取组件对象的键值对。
  */
  mixins: [myMixin],
  /*
  *默认ture,显示不在props中的属性,
  *false隐藏不在props中的属性,但是依旧可以在$attr中使用,并向子孙组件传递
  *选项不会影响 style 和 class 的绑定。
  *2.4.0新增
  */
  inheritAttrs:true/false,
  model:'',
  //String,Number,Boolean,Array,Object,Date,Function,Symbol
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      /*
      *定义该 prop 是否是必填项。在非生产环境中，
      *如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。
      */
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      /*
      *自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，
      *如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。
      *
      */
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  },
  /*
  *只用于 new 创建的实例中。
  *创建实例时传递 props。主要作用是方便测试。
  */
  propsData: {
    msg: 'hello'
  }
  /*
  *一个组件的 data 选项必须是一个函数
  *这样你每用一次组件，就会有一个它的新实例被创建。
  *组件的定义只接受 function
  *注意，如果你为 data 属性使用了箭头函数，
  *则 this 不会指向这个组件的实例，
  *不过你仍然可以将其实例作为函数的第一个参数来访问。
  */
  data(){
    return {}
  },
  /*
  *对于任何复杂逻辑，你都应当使用计算属性。
  *计算属性是基于它们的响应式依赖进行缓存的。所以可替代多次调用的function
  *计算属性比watch更加精简,变动的中间态需要体现时才用watch
  *注意，如果你为 computed 属性使用了箭头函数，
  *则 this 不会指向这个组件的实例，
  *不过你仍然可以将其实例作为函数的第一个参数来访问。
  */
  computed:{
    // 仅读取
    aDouble () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get () {
        return this.a + 1
      },
      set (v) {
        this.a = v - 1
      }
    }
    /*
    *vm.aPlus   // => 2
    *vm.aPlus = 3
    *vm.a       // => 2
    *vm.aDouble // => 4
    *
    */
  },
  /*
  *观察 Vue 实例变化的一个表达式或计算属性函数。
  *回调函数得到的参数为新值和旧值。
  *表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。
  *注意：在变异 (不是替换) 对象或数组时，旧值将与新值相同，
  *因为它们的引用指向同一个对象/数组。
  *Vue 不会保留变异之前值的副本。
  *变异方法push(), pop(), shift(), unshift(), splice(), sort(), reverse()
  *非变异方法filter(), concat() 和 slice()
  *不应该使用箭头函数来定义 watcher 函数
  * (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。
  *箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，
  *this.updateAutocomplete 将是 undefined。
  */
  watch:{
    a (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 深度 watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f' (val, oldVal) { /* ... */ }
  },
  /*
  *在实例初始化之后，
  *数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  */
  beforeCreate(){},
  /*
  *在实例创建完成后被立即调用。
  *在这一步，实例已完成以下的配置：
  *数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
  *然而，挂载阶段还没开始，$el 属性目前不可见。
  */
  created(){},
  /*
  *在挂载开始之前被调用：相关的 render 函数首次被调用。
  *该钩子在服务器端渲染期间不被调用。
  */
  beforeMount(){},
  /*
  *el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
  *如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
  *注意 mounted 不会承诺所有的子组件也都一起被挂载。
  *如果你希望等到整个视图都渲染完毕，可以用vm.$nextTick替换掉 `mounted`：
  *该钩子在服务器端渲染期间不被调用。
  */
  mounted(){
    this.$nextTick(function () {})
  },
  /*
  *数据更新时调用，发生在虚拟 DOM 打补丁之前。
  *这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
  *该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
  */
  beforeUpdate(){}
  /*
  *由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
  *当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
  *然而在大多数情况下，你应该避免在此期间更改状态。
  *如果要相应状态改变，通常最好使用[计算属性]或 [watcher] 取而代之。
  *注意 updated 不会承诺所有的子组件也都一起被重绘。
  *如果你希望等到整个视图都渲染完毕，可以用vm.$nextTick替换掉 `updated`：
  *该钩子在服务器端渲染期间不被调用。
  */
  updated(){
    this.$nextTick(function () {})
  },
  /*
  *keep-alive 组件激活时调用。
  *该钩子在服务器端渲染期间不被调用。
  */
  activated(){},
  /*
  *keep-alive 组件停用时调用。
  *该钩子在服务器端渲染期间不被调用。
  */
  deactivated(){},
  /*
  *实例销毁之前调用。在这一步，实例仍然完全可用。
  *该钩子在服务器端渲染期间不被调用。
  */
  beforeDestroy(){},
  /*
  *Vue 实例销毁后调用。
  *调用后，Vue 实例指示的所有东西都会解绑定，
  *所有的事件监听器会被移除，所有的子实例也会被销毁。
  *该钩子在服务器端渲染期间不被调用。
  */
  destroyed(){},
  /*
  *methods 将被混入到 Vue 实例中。
  *可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
  *方法中的 this 自动绑定为 Vue 实例。
  */
  methods:{
    /*
    *注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。
    *理由是箭头函数绑定了父级作用域的上下文，
    *所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。
    *(例如 plus: () => this.a++)。
    *this.a 将是 undefined。
    */
    plus: function () {
      this.a++
    }
  },
}
</script>
<style>
/* ... */
</style>