<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello2</title>

</head>
<body>
<div id="app">
   <counter :title="msg"></counter>
    <for-component :items="lessons"></for-component>
   <!-- <counter></counter>
    <counter></counter>-->
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    /*全局组件*/
   /* Vue.component("counter", {
        template: "<button @click='count++'>点击我试试,您点击了{{count}}次</button>",
        data(){
            return {
                count:0,
            }
        }
    });*/

    /*局部组件*/
    const counter = {
         template:"<h1>{{title}}</h1>",
         props:['title'],
        //template: "<button @click='count++'>点击我试试,您点击了{{count}}次</button>",
        /* data(){
             return {
                 count:0,
             }
         }*/
     };

    const forComponent ={
        template:"<ul><li v-for='item in items'>{{item}}</li></ul>",
       /* props:['items']*/
       props:{
           items:{
               type:Array,
               default:['java']
           }
       }
    }

    const app = new Vue({
        el:"#app",
        data:{
            msg: "hello,everyone,I am zmy",
            lessons:["tomcat","java","ios"]
        },
        components:{
         //counter:counter
           counter,forComponent
        }
    });
</script>
</body>
</html>

Vue局部组件和全局组件的更多相关文章

  1. Vue（2）- v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  2. Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  3. vue.js中的全局组件和局部组件

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...

  4. Vue组件之全局组件与局部组件

    1全局注册实例 <div id="app"> <com-btn></com-btn> <com-btn></com-btn&g ...

  5. Vue 局部组件和全局组件的使用

    <template> <div id="app"> <!--<img alt="Vue logo" src="./ ...

  6. 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  7. VueJS组件之全局组件与局部组件

    全局组件 所有实例都能用全局组件. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  8. vue 复习篇. 注册全局组件,和 组件库

    初篇 ============================================================== 1. 编写loading组件(components/Loading/ ...

  9. vue应用或者是项目其实就是 实例（完成基本逻辑） + 组件（单文件组件，全局组件，局部组件，内置组件）来完成 ;

    以上! 组件里面包含HTML,css, js,也就是一个完整的功能!

随机推荐

  1. 消息队列手动确认Ack

    以RabbitMQ为例,默认情况下 RabbitMQ 是自动ACK机制,就意味着 MQ 会在消息发送完毕后,自动帮我们去ACK,然后删除消息的信息.这样依赖就存在这样一个问题:如果消费者处理消息需要较 ...

  2. .NET Protobuf包装器库

    Wodsoft Protobuf Wrapper 内容 关于 需求 安装 用法 序列化 反序列化 字段定义 字段排序 非空构造函数对象 获取Protobuf包装器 高级 支持的属性类型与Protobu ...

  3. PowerDotNet平台化软件架构设计与实现系列（04）：服务治理平台

    系统和系统之间,少不了数据的互联互通.随着微服务的流行,一个系统内的不同应用进行互联互通也是常态. PowerDotNet的服务治理平台发源于早期的个人项目Power.Apix.这个项目借鉴了工作过的 ...

  4. [cf1495D]BFS Trees

    记$d_{G}(x,y)$表示无向图$G$中从$x$到$y$的最短路,设给定的图为$G=(V,E)$,$T$为其生成树,$E_{T}$为$T$的边集 下面,考虑计算$f(x,y)$-- 首先,对于一棵 ...

  5. [loj3342]制作菜品

    当$n-1\le m$,不妨令$d_{1}\le d_{2}\le...\le d_{n}$,则$(n-1)k\le mk=\sum_{i=1}^{n}d_{i}\le d_{1}+(n-1)d_{n ...

  6. WebRTC从摄像头获取图片传入canvas

    WebRTC从摄像头获取图片传入canvas 前面我们已经能够利用WebRTC的功能,通过浏览器打开摄像头,并把预览的图像显示在video元素中. 接下来我们尝试从视频中截取某一帧,显示在界面上. h ...

  7. 基于 Docker 安装 RocketMQ

    docker-compose.yml version: '3.5' services: rmqnamesrv: image: foxiswho/rocketmq:server container_na ...

  8. System.Web.Optimization

    项目中引用了 System.Web.Optimization 这个程序集,缺少程序集会报错: 命名空间"System.Web"中不存在类型或命名空间名"Optimizat ...

  9. ES2020新特性链操作符 '?.'和'??'

    ES2020新特性,js中的可选链操作符?. 概述 回想一下,我们是如何访问可能含有空值(null或undefined)属性的嵌套对象,比如访问web api 返回结果的user详情,可以使用嵌套的三 ...

  10. Codeforces 986F - Oppa Funcan Style Remastered（同余最短路）

    Codeforces 题面传送门 & 洛谷题面传送门 感谢此题教会我一个东西叫做同余最短路(大雾 首先这个不同 \(k\) 的个数 \(\le 50\) 这个条件显然是让我们对每个 \(k\) ...