首页手记 Vue自定义组件

Vue自定义组件

标签：

Vue.js

Vue.extend 创建组件 Vue.component注册组件使用组件.

例如：

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"> 
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/vue.js"></script>
</head>
<body>
    <div id="box1"> 
        <p>QQ:1697141690</p> 
        <ty></ty> <!--使用组件ty-->
    </div>  
<script>  
     var myty=Vue.extend({ //创建组件
         template:"<h1>写一段信息</h1>"  
     });  
     Vue.component("ty",myty);  //注册组件
         var vm=new Vue({    
         el:"#box1"  
     }); 
</script>
</body>
</html>