Vue——API 内置组件、指令，特殊Attrs(V2.x)

1，特殊Attrs：ref, is, key, slot和scope和slot-scope从2.6.0被废弃取而代之的是v-slot指令但是v-slot只能用在template元素上(以及组件本身，这时组件的内容只能分发给匹配(根据name)到的插槽，且组件内容不允许出现多个指定插槽如<my-comp v-slot><template>test</template></my-comp>(这是所谓的默认插槽缩写语法),其中的内容不允许再有v-slot的绑定，否则报错且无效，像这样无效<my-comp v-slot><template v-slot>test</template></my-comp>)

a:ref:String; ref attribute绑定的是个字符串；在一个元素上给定ref attribute，那么在挂载完成后，该元素会出现在组件实例(被引用的元素在该组件实例下或者说在该组件模板中)或根实例(元素在根实例作用域下)的$refs；如假设该元素<input ype="text" ref="myInput"> 是组件实例vm的模板的一部分，那么vm.$refs.myInput的值是该元素的DOM对象(HTMLInputElement对象实例);如果有需要的话，在挂载完成后可以对该元素做些处理；如果多个ref用的是相同的值，会出现覆盖，后检索到会覆盖前检索到的元素引用；如果引用的是子组件，那么值就是该子组件实例(VueComponent实例)；当v-for用于元素或组件时，引用信息是DOM节点或组件实例的数组，此时就不是单独的一个DOM节点或组件实例；个人用于觉得操作DOM元素会比较实在；

b:is:String|Object(当是String时，是个已经注册的组件的名字(先找拿本地组件)，Object是组件选项对象);但作为v-bind参数时，可以动态绑定组件；解析DOM模板，有些情况下有有些限制，如 在HTML模板中，table元素直接子元素只能是tbody、thead、tfoot或 tr 元素，若是其他元素就会无效且会被当作table的previous sibling 节点渲染在外部，那么组件元素也会遇到这种问题，那么用is attribute可以解决这个问题即<tr is="someComponent">(若模板来源这三种之一：字符串模板像template组件选项；单文件组件(.vue)；写在<script type="text/x-template"></script>，这种问题就不存在了)；动态组件之间的切换，不会保存组件离开时的状态，再次进入时都会重新渲染组件，可以用自定义组件keep-alive保存组件状态以及避免重新渲染组件即<keep-alive><component v-bind:is="someComp"></component></keep-alive>

c:key:String|Number|Boolean|Symbol;key 可用于组件也可用于普通标签；一般Vue会最大限度地减少动态元素并尽可能地就地修复/复用相同类型的算法，这种算法类型于局部更新修改的地方，比如<div>{{text}}</div> 改变了，就仅仅把text替换掉，而不是把整个div替换掉；key使用告诉Vue不使用这种算法，不是局部更新(触发update声明周期)而是替换(旧的组件destroyed和新建组件实例的生命周期)掉整个，如<div v-bind:key="text">{{text}}</div>;如果key非动态绑定，或保持不变时，则没有效果，仍然使用复用的算法；相同父元素下的子元素应该保证key的唯一，否则会造成渲染错误；

d:slot,scope,slot-scope: slot用于指定具名插槽(默认插槽可不用指出slot='default'，<slot name='default'>)，如<span slot="head">to slot which is heade</span> 那么在组件模板中的<slot name='header'></slot>就会接收(slot组件被替换)slot='heade'的子组件(组件子元素);scop和slot-scope用于接收组件传递过来的props，如<span slot="head" slot-scope='{item, person}'>to slot which is heade + {{item.a}}</span>，而组件模板有<slot name='header' v-bind:item="{a,b}" v-bind:person="person"></slot>,那么slot-scope='{item, person}'能接收到item和person两个props的值；scope(在2.5.0时被slot-scope替代)跟slot-scope一样的作用，只是scope只能用在template元素上；slot-scope既可以用在template上也可以用于其他普通元素上或Vue组件上；另外组件的子组件(子节点)用到property必须是父组件的property或slot-scope作用域的变量，不会是组件实例的property，所以才用slot-scope传递组件的property(通过v-bind动态绑定)或静态数据(不使用v-bind动态绑定的静态数据)；

组件编译规则中一条规则：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

2，Vue内置指令：v-slot，v-if,v-else,v-if-else，v-show，v-bind,v-on，v-for，v-cloak，v-text，v-html，v-model，v-pre,v-once

a,v-slot(跟插槽有关，指定插槽名和插槽作用域),v-if(条件选择渲染), v-else,v-if-else,v-show(条件选择显示),v-bind(动态绑定attrs),v-on(监听事件，绑定事件回调),v-for(遍历列表，定义的变量在该元素以及子孙元素可用),v-cloak(防抖),v-text(给该元素绑定一段文本内容相当于直接用{{text}}),v-html(绑定的一段innerHTML，相当于el.innerHTML= htmlStr；注意绑定的内容是可信任的内容),v-model(用于绑定一个属性，该属性是个双向绑定，一般用在可编辑的表单元素中；v-model用在contenteditable=true的div上，Vue会警告，且没有效果),v-pre(),v-once()

v-slot:解构插槽prop({a, b}, {a: c, b}, {a={c: 'hello'}}) ;动态插槽名，v-slot的动态参数；v-slot有个缩写字符#，如#default等，只有在具名情况下用指令缩写才有效，如#='{}'无效

b, v-if, v-else,v-if-else: 渲染条件(有比较高的切换开销)，v-else 以及v-else-if一定要跟在v-if或 v-else-if之后，否则无效；条件为truthy渲染，为falsy不渲染或从DOM中删除；与v-for一起使用时，v-for的优先级更高；

c, v-show: 根据条件展示或隐藏元素或元素(有比较高的初始渲染开销)；不管绑定的值是falsy还是truthy都会渲染，只是falsy时，相当于隐藏display: none;truthy时display: inline-block|block|inline;v-show跟v-if各有优势;v-show不支持template元素；

d: v-bind;any(with argument) | Object(without argument)当带有参数时，可简写成:arg="value"(:value='4');简写字符':'；用于动态绑定标签的attributes;当绑定一个对象时v-bind="{id: test, value: val}",表示绑定整个对象中的属性作为attributes，相当v-bind:id="test", v-bind:value="val"; 如果子组件在props选项接收那些attributes，那么这些attributes将作为实例的props，没有被接收的将还是attributes，键值对会被放入子组件实例的$attrs对象中(除了特殊attributes如ref、key、is等)；当参数是class或style时，还可以绑定数组或对象，但是在没有参数的情况下即绑定的是一个Object(绑定对象中的所有键值对时)时style或class不支持数组和对象；有几个修饰符.prop(要与v-bind一起用才有效果，v-bind:my-key.prop='test', 被作用元素的property传给子组件根元素element.myKey，跟inheritAttrs没有关系；也可用于普通元素上),.sync,.camel(允许在使用DOM模板时，将property驼峰化, 如viewBox = '0 0 10 10', <svg v-bind:view-box.camel="viewBox " />，相当于<svg viewBox='0 0 10 10'/>；像viewBox是svg的合理attribute，但作为v-bind的参数时，它会被转化为小写viewbox，.camel修饰符的作用就是将段横杠命名转为小写驼峰的，但是貌似只有该驼峰式的attribute是合理的才能成功转换)；

//.sync修饰v-bind省略了v-on，是v-bind和v-on两者的缩写；类似v-model；
//子元素触发的事件一定是update:[prop]的这种形式；
//而组件上的是，v-bind:[prop].sync="variable"的这种形式；
//事件的触发改变父组件的数据状态，子组件动态接收父组件的数据状态，所以说类似于v-model
//使用.sync修饰符，v-bind不能绑定一个表达式，只能是要被绑定的property的名字如'hello'；
<my-comp v-bind:test.sync="hello"></my-comp>

var comp = {

    props: ['test'],
    template: `<div><input type='text' :value="test" @input="$emit('update:test',             
            $event.target.value)"/>  </div>`,
};
//相当于去掉.sync修饰符，但是要显式写出事件的监听；'update:test'就相当于要监听的事件类型；
<my-comp v-bind:test="hello" v-on:update:test="hello=$event"></my-comp>

//v-on也可以绑定其他事件类型
<my-comp v-bind:test="hello" v-on:change="hello=$event"></my-comp>
var comp = {

    props: ['test'],
    template: `<div><input type='text' :value="test" @change="$emit('change',             
            $event.target.value)"/>  </div>`,
};
//还可以这样v-bind.sync="obj"
//但不能直接绑定一个字面量对象：v-bind.sync="{test: hello}",这样没有效果

e:v-on:Function(默认传入event对象)| inline statement| Object | none(可以没有表达式，即没有绑定监听器@submit.prevent);当带有参数时，可简写成@arg="fn"(@click="3+3");简写字符'@'；用于监听DOM事件或自定义事件并绑定事件回调；当绑定的值是个对象时v-on={click: fn, scroll: fn}，可以同时给元素绑定多个DOM事件；也可以用于监听子组件触发的自定义事件(只能用在自定义元素组件上，以此监听子组件的触发的自定义事件)；事件绑定上，可以使用$event变量，在DOM事件，它是event对象(当事件回调是行内语句时 @click="fnc($event)")，在自定义事件绑定上，它是触发发出的信息($emit('event-type', 'info'); <my-comp @event-type='info = $event'></my-comp>; $event就是‘info’; 如果能给监听器传递事件对象，可以这样$emit('event-type', ['info', $event])这里的$event就是事件对象;)；v-on有好多个修饰符：.stop,.prevent,.once,.self,.capture,.native等等；

//.native修饰符的使用：用来将事件监听器绑定到组件的根元素上；----------
//.native的作用不受inheritAttrs的影响,这也说明组件的事件绑定不会出现在$attrs中；
//用.native修饰的事件监听器不会出现实例的$listeners中；
//但若想把事件监听器绑定到指定元素上，可以不适用.async，而是在指定的组件子元素用v-on="$listeners"
//将组件的所有的事件监听器都绑定那个元素上；
//为了额外加入一些在组件里定义的事件监听器，可以使用计算属性返回组件的事件；
<my-comp @click.native="test">
</my-comp>
var comp = {

    inheritAttrs: false,
    template: '<div>click</div>',
};
//click事件会绑定到根元素div上，点击会触发回调函数；
//不使用.native，用v-on="listeners"代替，它还可以用在非根元素的子元素上；
<my-comp @click="test">
</my-comp>
var comp = {

    inheritAttrs: false,
    template: '<div v-on="$listeners">click</div>',
};
//有些情况下，如为配合绑定在组件上的v-model，需要添加额外的事件；
var comp = {
    
    inheritAttrs: false,
    props: ['value'],
    template: '<input v-on="$elementEvent" type="test" :value="value" />',
    computed:{
        elementEvent: function(){
            let vm = this;
            return Object.assign({}, this.$listeners, {
                input: function(event){
                    //当回调函数要使用this时，不同于methods已经绑定组件实例
                    vm.$emit('input', event.target.value); 
                }
            });
        }
    }
};
//当用行内语句作为事件监听器时，有一点需要注意的-----------
//$event是事件触发函数的参数，如原生DOM事件，$event就是event对象，自定义事件由$emit触发的，
//$event是任意数据，只不过要接收$emit的所有额外参数，就必须把那些参数作为一个数组的元素参入；
<my-comp @my-event="testFn($event, 'test')"></my-comp>

myComp.$emit('my-event', ['args1', 'args2']); //所有额外参数作为数组元素传入；

f:v-for:Number|String|Array|Object|Iterable; 用于循环渲染元素或组件；若是数字表示渲染该元素的个数，如<span v-for="i in 3">{{i}}</span>;渲染3个这样的元素；

g:v-cloak:none(不接受参数);在页面刷新时防抖；但它需要结合css规则使用，如[v-cloak]{display: none}(因为v-cloak是作为元素的attribute使用的，所以css规则是[attr]: {});<div v-cloak>{{hello}}</div>;这样在编译完成之前，在页面上就不会显示‘{{hello}}’,而是编译完成后直接显示hello的值；

h:v-text:String; 用来更新元素的textContent；如<div v-text="msg"></div>,相当于<div>{{msg}}</div>;双花括号的插值比较灵活；

i:v-html;html字符串;用来更新元素的innerHTML；如<div v-html="str"></div>,相当于divElement.innerHTML = str;内容按普通html插入，不会作为Vue模板进行编译，也就是当内容含有Vue的语法，但也会被当作普通的字符，如'<span>{{3+4}}</span>',不会被Vue编译变成<span>7</span>;

v-model:随表单控件不同而不同;该指令有几个；表单控件input、select、textarea(会根据控件类型自动选取正确的更新方式)或组件可以直接使用v-model；当某些v-model绑定到；其他的情况下component是用v-bind和监听component触发的自定义事件实现v-model的效果的；修饰符：.number(将表达式转为数字，但是初始值不会自动转为数字),.trim(去掉字符串头尾空白，初始值不会自动去掉头尾空白),.lazy(取代input，监听change事件)；

//用在组件上的v-model默认使用名为'value'的prop和 'input'事件------------
//像type为text 的 input，v-model的双向绑定就跟value和input有关；
//input事件监听器自动加入组件实例的$listeners
<my-comp v-model="test"></my-comp>
var myComp = {

    props: ['value'], //需要显式写出prop 'value'
    template: `<div> <input type="text"  :value="value" 
                @input="$emit('input', $event.target.value)"/> </div>`,
    
};

//如果要用在其他的type如checkbox；----------------
//那么需要借助组件选项'model',显式标明prop的属性以及具体事件
<my-comp v-model="test"></my-comp>

var myComp = {
    model: {
        prop: 'checked',
        event: 'change'
    },
    props: ['checked'], //还要标明prop 'checked'
    template: `<div> <input type="checkbox"  :checked="checked" 
                @change="$emit('change', $event.target.checked)"/> </div>`,
    
};
//如果不使用model也可以------------------------
//只是这样跟平时的习惯不一样；
var myComp = {
    //model: {
     //   prop: 'checked',
      //  event: 'change'
    //},
    props: ['value'], //还是'value',接收默认的prop 'value'
    //触发的还是input事件
    template: `<div> <input type="checkbox"  :checked="value" 
                @change="$emit('input', $event.target.checked)"/> </div>`,
    
};

//v-model绑定在表单空间上：-------------------
//checkbox:   -----------
//v-model绑定的变量的变化方向：如果变量是bool类型(null,undefined被认为bool)，
//那它将与checked直接相关
//若是个数组类型，那它将与value相关，value存在变量中，那checked就是true，否则false
{
    data: {arr: [], bl: false}
}
<input type="checkbox" value="hi" v-model="bl" />
<input type="checkbox" value="ha" v-model="bl" />
//上面两个checkbox用v-model绑定了一个bool值，当bl是true，它们都选中,它们的checked状态总是同步
<input type="checkbox" value="hello" v-model="arr">
<input type="checkbox" value="test" v-model="arr">
//以上两个v-model的绑定到数组，跟控件的value有关，如果arr有元素'hi'和'ha'即['hello', 'test'],
//那么这两个checkbox都会选择中，反之亦然；当arr=['hello'], 那么只选中第一个input，
//要是取消选中，那么arr=[]；总而言之就是通过值的是否相等来控制checked的状态

//radio: -------------
//用在radio的v-model总是与控件的value相关；当v-model绑定的值与控件阿德value相等时，则选中
<input type='radio' value='xixi' v-model='rd'/>
<input type='radio' value='haole' v-model='rd'/>
//当rd='xixi',第一个redio选中；当选中第二radio时，rd==='haole'

//select: ------------
//用在radio的v-model与控件的value有关；
//原生select，通过option的selected标记默认选中的选项；
//使用Vue，通过v-model绑定的变量给个默认的值实现默认选中；
//选中的选项通过value来反映；
//selection === 'g'时，默认选中第二个；
//当选中第一个时，selection ==='y'; selection元素的value值等于selection的值；
<select v-model="selection">
    <option>y</option>
    <option value="g">h</option>
</select>

//textarea: ----------
//v-model绑定的值总与 控件的value相关；

v-pre:none;用于跳过元素及其子节点或子组件的编译过程，意味着所有Vue语法在该元素及其子元素或子组件都将无效；可以用来显示原始Mustache标签({{something}});用在子组件上，子组件会被当作一个普通的标签而不会被编译成一个组件；

v-once:none;表示只渲染元素或组件一次，之后的重新渲染，元素或组件以及其子节点将被视为静态内容并跳过；如<div v-once>{{msg}}</div>,当msg的值更改时，该元素不会重新渲染，保持第一次渲染时节点；与v-for指令一起用时<li v-for="i in arr" v-once>{{i}}</li>，当arr改变时，已跟据arr渲染的DOM不会改变(属性绑定也是)；可以用于优化更新性能；

指令允许绑定动态参数：动态参数用方括号以及括号里的JS表达式组成，如[name]，name是个变量；使用动态参数需要注意的几点：name的值为null时，表示移除该绑定；方括号中的表达式([expression])不同插值表达式({{expression}})，不允许出现空格、引号(单双引号)，不允许expression的结果是数字，若出现这些情况，会报错, 可以用+连接字符串[a+b],a 和b是变量; 注意变量名的大小写(在dom模板上使用时)，浏览器会把如[testName]testName转为全小写testname，若实例不存在testname property，则会报错，另外若testname的值含有大写也会被转为小写如 testName='testHere'; v-bind:[testName]='789, 动态参数testName会被解析为testname，用testname匹配实例的属性testname，解析之后是 testhere='789';

3，Vue内置组件

a,slot: 作为承载内容分发的出口，如果组件模板未给出slot，那么组件的子组件(子节点)会被抛弃忽略；slot可为组件提供后备内容，当没有子组件匹配到slot时，slot的内容会被渲染，如<my-comp><template v-slot:head>click</template></my-comp>(或者my-comp没有子节点的情况下)，在my-comp组件的模板<button><slot>submit</slot></button>(这是个name为default但可省略name attr的插槽)，slot没有匹配到子组件，'submit'会被渲染出现在DOM中；在有个多个插槽时，可以使用具名插槽，用name attribute标识不同拥有不同名字的插槽，默认插槽name=default或可省略name；<slot name='head'>,<slot name='default'>和<slot>同一个(但是同时出现也是合理的，且都会渲染)；若组件内容未被匹配，则不会被渲染(这意味着就算组件内容引用了存在的变量或者property，都不会报错)；

b,component:

is:String|ComponentConstructor|ComponentDefinition; <comonent :is="myComp"></component>相当于<my-comp></my-comp>,通过动态绑定is的值，动态渲染组件；典型用例，不同组件之间的切换，可以跟keep-alive一起使用；

inline-template:Boolean:当指出该attribute时，component必须有且只有一个子元素(type==1)，这个子元素会代替component的template，render；

c,transition: 用于单个子节点的过渡效果，支持CSS的过渡和动画；transition提供了挺多的props共用户配置，如name、duration、过渡声明周期事件、css类名等；

d,tarnsition-group:用于多个子节点的过渡效果，每个子节点都必须有独立唯一的key；

e: keep-alive:不能用于函数式组件;用于保留组件状态或避免重新选组；keep-alive包裹组件，可把组件实例缓存起来，而不是销毁，在下次切换到该组件时，直接拿缓存的这个实例而不会重新创建新的组件实例；切换时会触发activated(首次渲染时也会触发)和deactivated生命周期；keep-alive用在其一个直属的子元素上，所以在keep-alive若有多个子元素则只会渲染一个；像v-for不能正常工作，最多只能渲染一个元素；

keep-alive的prop: include,exlude：String(可以使用逗号隔开的字符串),正则表达示(/a|b/),数组(['a', 'b']);include表示包含其中的组件会被缓存，exclude表示包含其中的组件不会被缓存; max prop表示最多能缓存的组件实例个数；

4，参考文档：

Vue