Vue构造类的选项(一)

props属性

props可以是数组或者对象，用于接收来自父组件的数据
a. 作为数组 props:[‘name’,‘age’]
b. 作为对象 props:{}
选项：
type: String、Number、Boolean、Array、Object、Date、Function、Symbol
default: any
required: Boolean
validator: Function 自定义验证函数会将该prop的值作为唯一的参数代入，在非生产环境下，如果验证失败，控制台就抛出警告

注意：在父组件模板中传参时使用kebab-case命名，在子组件中使用camelCase接收
tips：
```
post: {
      
      
  id: 1,
  title: 'My Journey with Vue'
}
<blog-post v-bind="post"></blog-post>

//等价于
<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>
```
每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop
注意：在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。
Prop验证
prop 会在一个组件实例创建之前进行验证，所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的

非Prop的Attribute
定义：非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 prop 定义的 attribute。
tip：对于绝大多数 attribute 来说，从外部提供给组件的值会替换掉组件内部设置好的值,但是class 和 style attribute 会稍微智能一些，即两边的值会被合并起来，从而得到最终的值

<div id="app">
  <my-comp data-title="learn vue" class="mycls" style="color:red;"></my-comp>
</div>
<script>
  Vue.component('my-comp', {
      template: '<div>我是组件</div>'
  });
  new Vue({
      el: '#app'
  });
</script>

<!-- 运行结果 -->
<div id="app">
  <div data-title="learn vue" class="mycls" style="color:red">我是组件</div>
</div>

<!-- 说明：data-title，class，style就是非prop属性，无需定义相应的prop，这些属性都会被添加到自定义组件的根元素上。 -->

禁用Attribute继承
如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false
inheritAttrs: false的含义是不希望本组件的根元素继承父组件的attribute，同时父组件传过来的属性（没有被子组件的props接收的属性），也不会显示在子组件的dom元素上，但是在组件里可以通过其 $a t t r s 可以获取到没有使用的注册属性, ‘ ‘ i n h e r i t A t t r s : f a l s e ‘ 是不会影响 s t y l e 和 c l a s s 的绑定（结合$ attrs使用）

computed属性

计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。如果你不希望有缓存，请用方法来替代（当需要在数据变化时执行异步或开销较大的操作时，使用watch属性）

methods属性

在内联语句中访问原始的DOM，可以用特殊变量$event传入

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

事件修饰符

<!-- 阻止单继事件继续传播 stopPropagation -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 preventDefault -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

<!-- 点击事件将只会触发一次 -->
<!-- 不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

<!-- 
description:
passive主要用在移动端的scroll事件，来提高浏览器响应速度，提升用户体验。因为passive=true等于提前告诉了浏览器，touchstart和touchmove不会阻止默认事件，手刚开始触摸，浏览器就可以立刻给与响应；否则，手触摸屏幕了，但要等待touchstart和touchmove的结果，多了这一步，响应时间就长了，用户体验也就差了。 
-->

watch属性

watch:{
    
    
  'fullName.firstName'(){
    
    
    
  }
}

template

解析 DOM 模板时的注意事项
有些 HTML 元素，诸如 ul、ol、table 和 select，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 li、tr 和 option，只能出现在其它某些特定的元素内部。

<!-- 这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。 -->
<table>
  <blog-post-row></blog-post-row>
</table>

<!-- 可以通过is选项 -->
<table>
  <tr is="blog-post-row"></tr>
</table>

动态组件
有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里
```

<component v-bind:is="currentTabComponent"></component>
```