美文网首页
浅谈Vue下的components模板

浅谈Vue下的components模板

作者: 追key | 来源:发表于2018-04-17 20:29 被阅读0次

    浅谈Vue下的components模板

    晴 微风 温度 12-24°C
    在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用

    我们先来简单的写一段components代码
    (局部方法创造模板)

    <div id="app">
      <haha></haha>
    </div>
    
    /*
    这是最简单常用的一种创造模板方法,局部方法创造模板
    要注意,局部模板 的作用范围 只在 相对的vue对象 范围内 
    比如 这个例子, <haha></haha>的范围 只在 <div id="app"> </div>内
    因为  haha 挂载在 vm的components下 而 vm挂载的 对应节点是 id=app的 div上
    */
    let vm = new Vue({
        el:"#app",
        data:{
      },
        components:{
        "haha":{
          template:"<div>哈哈哈<div>"
        }
      }
    });
    

    (共有模板/全局模板),全局模板 顾名思义 肯定是 放在哪里都能用

    <div id="app">
      <hehe></hehe>
    </div>
    
    
    //这里使用Vue.component原型方法来创造
      Vue.component(
      "hehe",template:"<div>呵呵呵<div>"
    );
    
    let vm = new Vue({
        el:"#app",
        data:{
      },
        components:{
       //这里则不需要添加,因为 互不影响
      }
    });
    

    其他方法

    <div id="app">
      <xixi></xixi>
    </div>
    
    let xixi={
      template:"<div>嘻嘻嘻<div>"
    }
    
    let vm = new Vue({
      el : "#app",
      data{
      },
      components:{
        xixi
      }
    
    });
    
    

    (模板的继承),全局模板 顾名思义 肯定是 放在哪里都能用

    /*
      我们来讲个最简单的 父亲,儿子 ,孙子的 例子
      要注意以下几点:
            1.先实例化对象vm
            2.造出parent模板,并挂载在 vm的 conponents 下
            3.造出 son 模板 并 挂载 在 父级 parent 的conponents下,并在 父级template属性中 包裹住自己的 模板名标签 ;同理 造出孙子标签
            4.在HTML节点中添加 目标 根节点
                  (节点的顺序一定要书写正确)
    */
    <div id="app">
      <parent></parent>
    </div>
    
    //创建 孙子 模板
      let grendson = { 
        template:"<div>孙子</div>"
     }
    
    //创建 儿子 模板
      let son= { 
        template:"<son>儿子<grendson >孙子</grendson ></son>"
        components:{
         grendson 
        }
     }
    
    //创建 父亲 模板
      let parent = { 
        template:"<div>父亲<son></son></div>"
        components:{
         son
        }
     }
    //实例化vm对象
      let vm = new Vue({
        el:"#app",
        data:{
        },
        components:{
          parent
        }
    });
    

    相关文章

      网友评论

          本文标题:浅谈Vue下的components模板

          本文链接:https://www.haomeiwen.com/subject/mvwpkftx.html