<!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. Flink sql 之AsyncIO与LookupJoin的几个疑问 （源码分析）

    本文源码基于flink 1.14 被同事问到几个关于AsyncIO和lookUp维表的问题所以翻了下源码,从源码的角度解惑这几个问题 对于AsyncIO不了解的可以看看之前写的这篇  <Flin ...

  2. feignclient各种使用技巧说明

    FeignClient常见用法 常规的FeignClient的创建与使用我相信只要使用过spring cloud全家桶的套件的基本上都是非常熟悉了,我们只需定义一个interface,然后定义相关的远 ...

  3. CodeGuide 300+文档、100+代码库，一个指导程序员写代码的，Github 仓库开源啦！

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.路怎样走,让你们自己挑 B站 视频:https://www.bilibili.com/vi ...

  4. silky微服务的应用服务和服务条目

    目录 服务的定义 服务条目 根据服务条目生成WebAPI 服务条目的治理特性 缓存拦截 服务条目的例子 服务的实现 开源地址 在线文档 服务的定义 服务接口是微服务定义服务的基本单位,定义的应用服务接 ...

  5. 编译使用nginx

    nginx-1.18.0 ./configure --prefix=$HOME/nginx --with-http_ssl_module make -j32; make install [fangju ...

  6. 使用 kubeadm 部署

    上一章中,我们用 minikube 去搭建单机集群,并且创建 Deployment.Service(在三章中讲解),本篇将介绍利用 kubeadm 部署多节点集群,并学会 安装以及使用 kuberne ...

  7. C++构造函数写法

    笔记 class complex{ public: complex (double r = 0, double i = 0) : re(r), im(i) {} private: double re, ...

  8. WC2021 云划水记

    Day -38 - 2459208(2020.12.24) CCF 发公告了,线上举办 hopping. 刚看到还纠结了一会儿,但想想还是报了.虽说是去摸鱼,打打暴力分就走人.但毕竟有牌和没牌也是不一 ...

  9. 洛谷 P7156 - [USACO20DEC] Cowmistry P（分类讨论+trie 树上 dp）

    题面传送门 题意: 给出集合 \(S=[l_1,r_1]\cup[l_2,r_2]\cup[l_3,r_3]\cup\dots\cup[l_n,r_n]\) 和整数 \(k\),求有多少个三元组 \( ...

  10. NFLSOJ 1072 - 【2021 六校联合训练 NOIP #1】异或（FWT+插值）

    题面传送门 一道非常不错的 FWT+插值的题 %%%%%%%%%%%% 还是那句话,反正非六校的看不到题对吧((( 方便起见在下文中设 \(n=2^d\). 首先很明显的一点是这题涉及两个维度:异或和 ...