码迷,mamicode.com
首页 > 其他好文 > 详细

Vue_组件

时间:2020-07-15 23:22:29      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:set   today   地下城   The   round   方法   英雄   min   div   

1.定义方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.min.js"></script>
    <title>组件</title>
</head>
<body>
<div id="app01">
    <today-weather></today-weather>
    <my-weather></my-weather>
</div>

<script>
    // 全局组件定义方法
    Vue.component(today-weather, {
        template: <div><h1>今天下雨,出不去啦,全局组件</h1></div>
    })
    var vm = new Vue({
        el: #app01,
        data: {},
        // 局部组件定义方法
        components: {
            my-weather: {
                template: <div><h1>今天下雨,出不去啦,局部组件</h1></div>
            }
        }
    })
</script>
</body>
</html>

 2.表行组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.min.js"></script>
    <title>表行组件</title>
</head>
<body>
<div id="app01">
    <table border="1">
        <tr>
            <td>编号</td>
            <td>游戏名称</td>
        </tr>
<!--        表行组件的引用必须用is属性引入-->
        <tr is="my_row1"></tr>
        <tr is="my_row2"></tr>
        <tr is="my_row3"></tr>
    </table>
</div>

<script>
    Vue.component(my_row1, {
        template: <tr><td>(1)</td><td>英雄岛</td></tr>
    })
    Vue.component(my_row2, {
        template: <tr><td>(2)</td><td>地下城与勇士</td></tr>
    })
    Vue.component(my_row3, {
        template: <tr><td>(3)</td><td>英雄联盟</td></tr>
    })
    let vm = new Vue({
        el: #app01,
        data: {}
    })
</script>
</body>
</html>

 

Vue_组件

标签:set   today   地下城   The   round   方法   英雄   min   div   

原文地址:https://www.cnblogs.com/wangdianchao/p/13307141.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!