Vue中的特殊属性

• key：Vue采用的是就地复用的原则，如果不指定一个独一无二的key,会导致数据混乱。
• ref:由于Vue是数据驱动界面更新，无需操作DOM来更新界面，有时候在一些开发过程中实需要拿到DOM操作DOM，这时就需要通过ref来获取DOM元素。

1.ref使用:
 1.1 在需要获取的元素上添加ref属性. 例如: <p ref="mypp" >我是段落</>
 1.2 在使用的地方通过this. $refs.xxx获取，例如this.$ref.XXX

2. ref特点:
    2.1 ref添加到元素DOM上，拿到的就是元素DOM
    2.1 ref添加到组件上，拿到的就是组件

<div id="app">
    <button @click="myFn">切换</button>
    <p ref="myppp">我是原生DOM</p>
    <one id="myOne" ref="myOne"></one>
</div>

<template id="one">
    <div>
       <p>我是组件</p>
    </div>
</template>
<script>
    //注册全局组件
    Vue.component("one",{
        template:"#one",
        data:function () {
             return{
                 msg:"鱿小鱼"
             }
        },
        methods:{
            say(){
                console.log("say");
            }
        }
    });

    let vue = new Vue({
        el: '#app',
        //监听数据的变化，监听路由地址的变化，只要数据发生了变化，就会自动调用对应数据的回调方法
        watch:{},
        data: {},
        methods: {
           myFn(){
               /*
                注意点:如果是通过原生的语法来获取元素，无论是原生的元素还是自定义的组件，拿到的都是原生
                注意点:并且Vue官方并不推荐我们这样获取
                */
              // console.log(document.querySelector("p"));
              // console.log(document.querySelector("#myOne"));
               console.log(this.$refs);
               console.log(this.$refs.myppp);
               console.log(this.$refs.myOne);
               console.log(this.$refs.myOne.msg);
               console.log(this.$refs.myOne.say);
           }
        },
        computed: {},
        components: {}
    });
</script>

结果：

• is：Vue的动态切换组件<component>中通过v-bind:is="需要显示的组件名称"来切换组件。
• slot：用于标记往哪个具名插槽中插入子组件内容。目前已废弃，建议使用v-slot指令
• slot-scope：用于将元素或组件表示为作用域插槽。目前已废弃，建议使用v-slot指令
  作用域插槽：就是让父组件在填充子组件插槽内容时也能使用子组件的数据。
  通过slot-scope=" 作用域名称"方式来接收在<slot>标签中通过v-bind:数据名称='数据名称”方式暴露数据。
• scope：用于表示一个作为带作用域的插槽的 <template> 元素，它在 2.5.0+ 中被 slot-scope 替代。