zoukankan      html  css  js  c++  java
  • vue模板的几种写法及变化

    第一种: 2+版本支持,1+版本支持
    <script>
    <template id="aaa">
        <h1>我是组件2</h1>
    </template>
    
    Vue.component('my-aaa',{
        template:'#aaa'
    });
    window.onload=function(){
        var vm = new Vue({
            el:"#box",
            data:{
            msg:"welcome to 2.0"
            }
        })
    }
    </script> 

      

      

     
    第二种:2+版本支持,1+版本支持
    <script>
    Vue.component('my-aaa',{
        template:'<h1>我是组件2</h1>'
    });
    window.onload=function(){
        var vm = new Vue({
            el:"#box",
            data:{
            msg:"welcome to 2.0"
            }
        })
    }
    </script>  

      

     
    第三种:1+支持,2+不支持
    <script>
    var Aaa = Vue.extend('aaa',{
        template:'<h1>这是组件</h1>'
    });
    Vue.component('my-aaa',Aaa);
        Vue.component('my-aaa',{
        template:'#aaa'
    });
     
    window.onload=function(){
        var vm = new Vue({
            el:"#box",
            data:{
            msg:"welcome to 2.0"
            }
        })
    }
    </script>

      

     
    第四种:2.0特有
    <template id="aaa">
        <h1>我是组件2</h1>
    </template>
    <script>
    var temp = {
        template:'#aaa'
    }
    Vue.component('my-aaa',temp);
    window.onload=function(){
        var vm = new Vue({
            el:"#box",
            data:{
            msg:"welcome to 2.0"
            }
        })
    }
    </script>   

      

     
    第五种:
    局部组件就不比说了,都支持
     
     
    模板写法的变化
     
    2+版本模板必须有根元素
    1+版本: 这样写不报错
    Vue.component('my-aaa',{
        template:'<h1>我是组件2</h1><p>我是p标签</p>'
    });
    window.onload=function(){
        var vm = new Vue({
            el:"#box",
            data:{
            msg:"welcome to 2.0"
            }
        })
    }

      

    2+版本这样写报错,2+版本必须有根元素
    不报错只能这样写:
    template:'<div>
        <h1>我是组件2</h1>
        <p>我是p标签</p>
        </div>'

      

     
     
     
  • 相关阅读:
    9-29 函数嵌套及作用域链
    9-29 函数进阶_命名空间和作用域
    9-28 函数
    9-27 文件的”改”、删、重命名
    9-26 联合文件的登录注册
    9-26 文件操作一些功能详解
    9-26 文件操作
    9-26 复习数据类型
    9-25 集合
    python基础day7_购物车实例
  • 原文地址:https://www.cnblogs.com/blogcxz/p/7341982.html
Copyright © 2011-2022 走看看