zoukankan      html  css  js  c++  java
  • 038——VUE中组件之WEB开发中组件使用场景与定义组件的方式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>组件之WEB开发中组件使用场景与定义组件的方式</title>
        <script src="vue.js"></script>
    </head>
    <body>
    <!--
        组件:可互用、维护省力
    -->
    <div id="lantian">
        <!--全局组件的调用-->
        <slide></slide>
        <slide></slide>
    
        <!--局部组件的调用:使用组件的名时,如果是驼峰式的写法,需要用 - 分开-->
        <hd-News></hd-News>
    </div>
    <script>
        //定义全局组件: component:组件。它是在根组件中使用的。必须在根组件声明之前使用。
        Vue.component('slide',{  //子组件:
            //定义模板:
            template:"<h1>wo shi zujian de moban</h1>"
        });
        //把局部组件的数据提取出来:
        var news={
            template:"<h2>你好,我是局部组件</h2>"
        };
        var app = new Vue({
            el:"#lantian", //根组件,其他的就是子组件
            //定义局部组件:
            components:{hdNews:news} //如果定义的变量名与数据的变量名一致,可以简写成一个:news 。这是es6的写法
        });
    </script>
    
    </body>
    </html>
    

      

  • 相关阅读:
    Go语言
    Go语言
    electron-builder vue3 用户自定义安装目录
    提取页面中的style标签内容
    px2rpx | px转rpx
    js EventBus
    select 下拉选择多个值
    keep-alive页面缓存
    js适配移动端页面
    vue日常问题记录
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/8192271.html
Copyright © 2011-2022 走看看