Vue —— 组件的应用

  • 组件（Component,Portlet）
  • 组件就是页面上的一小块区域内容，完成一个小的页面功能
  • Vue.js的组件不仅可以单独声明注册使用，还可以在Vue实例中进行局部注册使用
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>use_component.html</title>
    <script src="../js/vue.js"></script>
    <link type='text/css' rel='styleSheet' href='../css/style.css' >
</head>

<body>
    <div id="example">
        <!-- 使用全局组件 -->
        <today-weather></today-weather>
        <!-- 使用局部组件 -->
        <tomorrow-weather></tomorrow-weather>
    </div>
</body>
<script>
    //全局组件，Vue.component
    Vue.component("today-weather", {
        template: "<div>今天下雨，不如在家里学Vue吧！</div>"
    });
    
    //定义局部组件的模板
    var tomorrow_weather = {
        template: "<div><ul><li>明天的天气可好了</li><li>27°C</li><li>晴</li></ul></div>"
    };

    //创建对象后，example中可以直接使用全局组件
    new Vue({
        el: "#example",
        //对象设置局部组件
        components: {
            //组件自定义命名 ：使用模板
            "tomorrow-weather": tomorrow_weather
        }
    });
</script>
</html>

 

posted @ 2020-10-24 09:53  a最简单  阅读(181)  评论(0)    收藏  举报