vue特性 is ref

is属性

使用is标签解决页面中出现的小bug
例如下面的例子：

<div id="app">
      <table>
        <tbody>
          <temp></temp>
          <temp></temp>
          <temp></temp>
        </tbody>
      </table>
</div>
<script>
      var temp={
        template:'<tr><td>1111</td></tr>'
      }  
      var vm = new Vue({
        el: "#app",
        components:{temp}
      });
</script>

代码可以正常运行，页面也是正常出现，显示

但是查看元素，可以看见dom结构是错的

tr标签在table上面，在h5规定中，table里面要有tbody，tbody里面要有tr，tr里面要有td，但是现在tbody里面是row，那么浏览器解析的时候就会出现问题。
可以使用is属性解决这个bug，既然tbody里面只能写tr，那我们就写tr，然后给tr加上is属性，让它等于temp
这样既能保证tr里面是我们要的模版，又能通过h5规范

<div id="app">
      <table>
        <tbody>
          <tr is="temp"></tr>
          <tr is="temp"></tr>
          <tr is="temp"></tr>
        </tbody>
      </table>
    </div>

ref

在vue中操作dom，可以使用ref，通过它找到dom节点

<div id="app">
      <div ref="tip" @click="handleClick">hello world</div>
</div>
<script>      
      var vm = new Vue({
        el: "#app",
        methods:{
          handleClick(){
            alert(this.$refs.tip.innerText)
          }
        }
      })
</script>

我们给这个div取了个引用名字tip，通过this.$refs可以获取所有的引用，通过this.$refs.tip可以找到这个dom
通过给div加上ref可以获取这个div对应的dom元素

<div id="app">
      <counter ref="one" @change="handleChange"></counter>
      <counter ref="two" @change="handleChange"></counter>
      <p>总和：{{total}}</p>
</div>
<script>
      Vue.component('counter',{
        data(){
          return{
            number:0
          }
        },
        template:'<p @click="handleClick">{{number}}</p>',
        methods:{
          handleClick(){
            this.number++
            this.$emit('change')  //给父组件绑定change事件
          }
        }
      })
      var vm=new Vue({
        el:'#app',
        data:{
          total:0
        },
        methods:{
          handleChange(){
            //通过ref引用获取组件
            this.total=this.$refs.one.number+this.$refs.two.number
            
          }
        }
      })
</script>

通过组件的ref，获取的是对这个组件的引用