Vue使用中的细节纪要

1.is属性的使用，用以解决h5编码规范违背的问题

<div id="app">

         <!-- 【1】is属性的使用h5编码规范的问题 ->
        <table>
            <tbody>
                <!--按道理来说，可以直接在tbody里面写<row></row>使用子组件row,但是会出现问题，
被引用的子组件呈现的tr出现与table同级的位置上 -->
                <!-- 对于上述问题，我们可以借助Vue提供给我们的is属性来解决 -->
                <tr is="row"></tr>
                 <!--  <tr is="row"></tr>将彻底被<tr><td>this is a row</td></tr>代替
   -->
                <tr is="row"></tr>
                <tr is="row"></tr>  <!-- 虽然写的是tr标签，但is属性指向row组件，所以其实使用
的row组件，这样既保证tr显示的是row组件，有能保证h5的编码规范（tbody里面只能写tr）-->

            </tbody>
        </table>
    </div>

<script>
    //定义全局子组件    
    Vue.component('row',{
        template:'<tr><td>this is a row</td></tr>'
    })
     var Vm=new Vue({
         el:'#app'
     })
</script>

 2.子组件的data的定义必须是函数的形式

<div id="app">

        <table>
            <tbody>
                <tr is="row"></tr>
                <tr is="row"></tr>
                <tr is="row"></tr> 
            </tbody>
        </table>
</div>
    

<script>
    //子组件的data的定义必须是函数的形式，父组件可以是对象形式 
    //1.子组件不像根组件只会被调用一次，可能会在不同的地方被调用多次，不希望子组件共享数据，希望子组件的数据独立存储
    Vue.component('row',{
        data:function(){
            return{
                content:'this is a row'
            }
        },
        template:'<tr><td>{{content}}</td></tr>'
    })
     var Vm=new Vue({
         el:'#app',
         data:{
         
         }
     })
</script>

3.ref的使用

【1】DOM使用ref引用

    <!-- Vue之中如何操作DOM-->
    <div id="app">
        <!-- 使用ref引用的方式来获取DOM引用，进行DOM操作 -->
        <!--给这个DOM声明一个引用，引用的名字叫hello  -->
        <div ref="hello" @click="handleClick" >hello world</div>
    </div>

    <script>
     var Vm=new Vue({
         el:'#app',
         methods:{
            handleClick:function(){
                //this.$refs指的是整个Vue实例里面所有的引用
                //this.$refs.hello 找到整个Vue实例的引用里面名为hello的这个引用，这个引用恰好对应的就是div的DOM
                alert(this.$refs.hello.innerHTML);//hello world
            }
         }
     })
    </script>

【2】在组件中使用ref引用

示例，做一个定时器

<div id="app">
        <!-- @change="handleChange" 表示父组件监听子组件的change,并触发一个handleChange()-->
        <counter ref="one" @change="handleChange"></counter>
        <counter ref="two" @change="handleChange"></counter>
        <div>{{total}}</div>
</div>

    <script>
    //子组件
     Vue.component('counter',{
        data:function(){
            return {
                number:0
            }
        },
        template:'<div @click="handleClick">{{number}}</div>',
        methods:{
            handleClick:function(){
                this.number++;
                this.$emit('change');
                //子组件向外触发事件名称为change
            }
        }
     })
     //父组件
     var Vm=new Vue({
         el:'#app',
         data:{
             total:0
         },
         methods:{
            handleChange:function(){
                //this.$refs.one 表示的组件的引用
                console.log(this.$refs.one.number);
                console.log(this.$refs.two.number);
                this.total=this.$refs.one.number+this.$refs.two.number
            }
         }
     })
    </script>