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

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>

    <body>
    <div id="demo" style="border: 1px solid #0000CC;">
    <p>{{name}}</p>
    <xheader></xheader>
    <xcontainer></xcontainer>
    <xfooter></xfooter>
    </div>
    <div id="demo2" style="border: 1px solid #0000CC;">
    <xheader></xheader>
    <xcontainer></xcontainer>
    <xfooter></xfooter>
    </div>
    </body>
    <!--<script type="text/template" id="child">
    <div>child12</div>
    </script>-->
    <template id="child">
    <div>child1234</div>
    <div>123</div>
    </template>
    <!--分治-->

    <script src="js/vue.js"></script>
    <script>
    // ng-app ng-controller
    /*app.direvtive('',function(){
    return {
    templateUrl:
    }
    })*/
    //先定义
    var xfooter = Vue.extend({
    template: '<div>footer</div>'
    })
    var child = Vue.extend({
    template: '#child'
    })
    //再注册
    //Vue.component('xfooter', xfooter)
    Vue.component('child', child)
    //注册和定义一起结合写
    Vue.component('xheader', {
    template: '<div style="color:red">header{{name}}<child></child></div>',
    data: function() {
    return {
    name: 'yao'
    }
    },
    methods: {
    test: function() {
    alert('test')
    }
    },
    ready: function() {
    //this.test()
    }
    })
    new Vue({
    el: '#demo',
    data: {
    name: 'yao'
    },
    method: {

    },
    //filters
    //directives
    components: {
    xcontainer: {
    template: '<div>container</div>',
    data:function(){
    return {

    }
    }
    },

    }
    })
    new Vue({
    el: '#demo2',
    data: {
    name: 'yao'
    },
    components: {
    xfooter: xfooter
    }
    })
    </script>

    </html>

  • 相关阅读:
    学习之路-前端-笔记-一、HTML笔记
    抄写例题作业1
    郭霖
    java遍历HashMap的高效方法
    Add Two Numbers II 两个数字相加之二
    基于socket的简单p2p聊天项目
    SimpleScalar Course Project
    Dijkstra Java
    PCA vs Linear Regression 可视化理解
    机器学习中的范数规则化之(一)L0、L1与L2范数
  • 原文地址:https://www.cnblogs.com/taozi123/p/6525150.html
Copyright © 2011-2022 走看看