zoukankan      html  css  js  c++  java
  • 使用组件的细节点

    1.is可解决h5页面的小bug。

    tr与tbody在页面显示变成同级

     错误代码如下:

    <body>
      <div id="root">
        <table>
          <tbody>
            <row></row>
            <row></row>
            <row></row>
          </tbody>
      </div>
      <script>
        Vue.component('row',{
          template:'<tr><td>This is row</td></tr>'
        })
        var vm=new Vue({
          el:'#root'
        })
      </script>
    
    </body>

    修改后的代码:

    <body>
      <div id="root">
        <table>
          <ul>
            <tr is="row"></tr>
            <tr is="row"></tr>
            <tr is="row"></tr>
          </ul>
      </div>
      <script>
        Vue.component('row',{
          template:'<tr><td>This is row</td></tr>'
        })
        var vm=new Vue({
          el:'#root'
        })
      </script>
    
    </body>

    结论:is可解决h5页面的小bug.同理,ul下,selection下的的li,option需要加is="",即可解决bug问题。

     2.在子组件里面,定义data,data必须是一个函数,不能是一个对象,是为每个子组件都能有一个独立的存储,不能互相影响。

    <body>
      <div id="root">
        <table>
          <ul>
            <tr is="row"></tr>
            <tr is="row"></tr>
            <tr is="row"></tr>
          </ul>
      </div>
      <script>
        Vue.component('row',{
          data:function(){
            return{
              content:'this is content'
            }
          },
          template:'<tr><td>{{ content}}</td></tr>'
        })
        var vm=new Vue({
          el:'#root'
        })
      </script>
    
    </body>

    3.通过rel获取dom节点.如果是用在组件上,则是组件上的引用,通过this.$reds.refName。

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

    实例:计数器的使用。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>计数器</title>
    <script src="./vue.js"></script>
    </head>
    <body>
      <div id="root">
       <counter ref="one" @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:{
            handleClick: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>
    
    </body>
    
    </html>
  • 相关阅读:
    Educational Codeforces Round 49 (Rated for Div. 2)
    Codeforces Round #506 (Div. 3)
    multiset
    C++中substr函数的用法
    7.30 背包问题
    7.29 dp动态规划
    7.27 图论 存图 前向星 最短路 dijstra算法 SPFA算法
    7.26 搜索进阶(状压搜索,迭代加深搜索)
    7.23 深搜广搜
    7.24 二分搜索
  • 原文地址:https://www.cnblogs.com/tengteng0520/p/12066721.html
Copyright © 2011-2022 走看看