Vue_组件

<!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>

<!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>

<!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">
    <div>今天的天气是：<my_weather></my_weather></div>
</div>

<script>
    Vue.component(‘my_weather‘, {
        template: ‘<span>{{today_weather}}</span>‘,
        // 组件中的数据必须以函数的返回值方式返回
        data: function () {
            return {
                today_weather: ‘雨夹雪‘
            }
        }
    })
    let vm = new Vue({
        el: ‘#app01‘,
        data: {}
    })
</script>
</body>
</html>