vue----03

Posted my-rw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue----03相关的知识,希望对你有一定的参考价值。

1、组件使用中的细节点

  1.1 使用is解决某些情况下显示错误问题

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

<script>
    Vue.component(‘row‘,{
        template: ‘<tr><td>this is a row</td></tr>‘
    })

    var vm  = new Vue({
        el:"#root",
        data: {
            
        },
        methods: {
           
        }
    })
</script>

  2、 

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

<script>
    Vue.component(‘row‘,{
        data: function() {
            return{
                content: ‘this is a row‘
            }
        }
        template: ‘<tr><td>{{content}}</td></tr>‘
    })

    var vm  = new Vue({
        el:"#root",
        data: {
            
        },
        methods: { 
           
        }
    })
</script>

3、ref 的使用

<div id="root">
   <counter ref="ont" @change="handleChange"></counter>
   <counter ref="two" @change="handleChange"></counter>
   <div>{{total}}</div>
</div>

<script>
    Vue.component(‘counter‘,{
        template: ‘<div @click="handleClick">{{number}}</div>‘,
        data: function() {
            return{
                number: 0
            }
        },
        methods: {
            heandleClick:function() {
                this.number++
                this.$emit(‘change‘)
            }
        }
    })

    var vm  = new Vue({
        el:"#root",
        data: {
          total: 0  
        },
        methods: { 
           handleChange: function() {
                this.total = this.$refs.one.number + this.$refs.two.number;
                
           }
        }
    })
</script>

 

以上是关于vue----03的主要内容,如果未能解决你的问题,请参考以下文章

Vue 03

vue03

Vue-Day03

微信小程序代码片段

VSCode自定义代码片段——CSS选择器

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js