zoukankan      html  css  js  c++  java
  • vue-组件

    1

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="bower_components/vue/dist/vue.js"></script>
        <style>
        </style>
    </head>
    <body>
        <div id="box">
            <!-- <aaa></aaa> -->
        </div>
    
        <script>
            var Aaa=Vue.extend({
                template:'<h3>我是标题3</h3>'
            });
    
            var a=new Aaa();
            console.log(a);
    
    
            var vm=new Vue({
                el:'#box',
                data:{
                    bSign:true
                }
            });
    
        </script>
    </body>
    </html>

    2

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="bower_components/vue/dist/vue.js"></script>
        <style>
        </style>
    </head>
    <body>
        <div id="box">
            <aaa></aaa>
        </div>
    
        <script>
            var Aaa=Vue.extend({
                template:'<h3>我是标题3</h3>'
            });
    
            Vue.component('aaa',Aaa);
    
    
            var vm=new Vue({
                el:'#box',
                data:{
                    bSign:true
                }
            });
    
        </script>
    </body>
    </html>

    3

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="bower_components/vue/dist/vue.js"></script>
        <style>
        </style>
    </head>
    <body>
        <div id="box">
            <aaa></aaa>
        </div>
    
        <script>
            var Aaa=Vue.extend({
                template:'<h3>{{msg}}</h3>',
                data(){
                    return {
                        msg:'ddddd'
                    }
                }
            });
    
    
            var vm=new Vue({
                el:'#box',
                data:{
                    bSign:true
                },
                components:{ //局部组件
                    aaa:Aaa
                }
            });
    
        </script>
    </body>
    </html>

    4

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="bower_components/vue/dist/vue.js"></script>
        <style>
        </style>
    </head>
    <body>
        <div id="box">
            <my-aaa></my-aaa>
        </div>
    
        <script>
            var Aaa=Vue.extend({
                template:'<h3>{{msg}}</h3>',
                data(){
                    return {
                        msg:'ddddd'
                    }
                }
            });
    
    
            var vm=new Vue({
                el:'#box',
                data:{
                    bSign:true
                },
                components:{ //局部组件
                    'my-aaa':Aaa
                }
            });
    
        </script>
    </body>
    </html>
  • 相关阅读:
    MySQL Generic Binaries包和RPM包的区别?
    实体零售如何构建数据管理体系及未来方向
    python3 数据分析
    power designer 资料库表查询
    PowerDesigner 连接资料库
    电商数据分析的基本指标体系
    初中数学动点最值问题19大模型+例题详解
    初中数学全年级26个专题知识点精编汇总
    Python数据分析学习路径拆解及资源推荐
    十种常用的数据分析方法
  • 原文地址:https://www.cnblogs.com/lanlanJser/p/7420938.html
Copyright © 2011-2022 走看看