<!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. redis 内存划分

    1.数据:作为数据库,数据是最主要的部分,这部分占用的内存会被统计在used_memory中 2.进程内存:redis主进程本身运行需要占用的内存,这部分内存会被统计在used_memory_rss中 ...

  2. RabbitMQ（六）消息幂等性处理

    一.springboot整合rabbitmq 我们需要新建两个工程,一个作为生产者,另一个作为消费者.在pom.xml中添加amqp依赖: <dependency> <groupId ...

  3. 【JAVA】笔记（5）--- final；抽象方法；抽象类；接口；解析继承，关联，与实现；

    final: 1.理解:凡是final修饰的东西都具有了不变的特性: 2.修饰对象: 1)final+类--->类无法被继承: 2)final+方法--->方法无法被覆盖: 3)final ...

  4. 1-Introduction（介绍）

    目录: 正文: (一)機器學習就是让机器自動找函式 语音/图像识别 (二)你想找什麼樣的函式? (2.1)Regression 找出的函数其输出是一个数值 (2.2)Classification (2 ...

  5. [cf1261E]Not Same

    问题可以这么理解-- 构造一个$n+1$行$n$列的01矩阵$A$,满足: 1.第$i$列$n+1$个数的和为$a_{i}$ 2.任意两行不完全相同 (对应关系:第$i$行第$j$列为1当且仅当第$i ...

  6. [Git专题] 环境搭建

    环境搭建 在正式使用 Git 之前,首先应当安装 Git 并完成一些基础配置,本章内容就教大家在 Ubuntu 和 CentOS 上安装 Git 的方法. 安装 Git 客户端 如果你使用的是基于 D ...

  7. es的rest风格的api文档

    rest风格的api put http://127.0.0.1:9200/索引名称/类型名称/文档id (创建文档,指定文档id) post http://127.0.0.1:9200/索引名称/类型 ...

  8. vue文件引入

    <template> <div class="hello"> <h1>{{ msg }}</h1> <!-- <h1&g ...

  9. [ Skill ] 图形化组件在注册 User Trigger 时需要注意的事情

    https://www.cnblogs.com/yeungchie/ 使用 deRegUserTriggers 可以用来配置:当打开一个新窗口时,自动集成自定义的菜单.工具栏等等. 使用格式如下: d ...

  10. FASTA/Q序列处理神器---seqkit

    该软件对于处理FASTA/Q十分方便,省去自己编写脚本 安装 1 conda install seqkit 使用 序列操作(seq) 1 ## 取方向序列 2 seqkit seq test.fa - ...