<!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. centos 添加sudo 权限

    https://apple.stackexchange.com/a/82527 visudo user1    ALL=(user2) NOPASSWD: /bin/bash amy  ALL=(AL ...

  2. C++概述及知识点总结

    经过一段时间的学习,以前从没有接触过C++这个高逼格的语言的小白,逐渐对C++有了更深的了解和认识,C++是c语言的升级版,Bjarne Stroustrup在剑桥大学计算机中心工作.他使用过Simu ...

  3. Django笔记&教程 5-1 基础增删查改

    Django 自学笔记兼学习教程第5章第1节--基础增删查改 点击查看教程总目录 第四章介绍了模型类models.Model和创建模型,相当于介绍了数据库表和如何创建数据库表. 这一章将介绍如何使用模 ...

  4. 『学了就忘』Linux软件包管理 — 45、yum源文件详细说明

    目录 1.yum源文件解析 2.查看yum源文件 3.搭建本地光盘yum源 第一步: 第二步: 第三步: 提示:RPM包的在线安装就是yum安装,yum安装需要依据yum源文件内容配置来寻找软件.本文 ...

  5. 微信小程序中使用canvas

    微信小程序中使用canvas会存在的一些问题: 由于小程序在绘制canvas的时候不能加载网络图片 所以需要把网络图片保存到本地之后再进行绘制 downLoadImg: function (netUr ...

  6. Error filterStart

    一般原因为:1.xml配置失误filter应配置在servlet-mapping前面(应该都知道吧).看看class配的 别找不到.2.filter中某段代码未实例化(这个情况是出现最多的,要仔细检查 ...

  7. C#环境变量配置及csc命令详解(转自cy88310)

     C#环境变量设置步骤: 在桌面右击[我的电脑]->[属性]->[高级]->[环境变量] 在下面的系统变量栏点击"新建" 变量名输入"csc" ...

  8. [luogu3573]RAJ-Rally

    先建一个$S$和$T$,$\forall 1\le i\le n$连边$(S,i)$和$(i,T)$,则最长路即为$S到T的最长路-2$ 对于这张DAG,求出一个拓扑序,点$i$为第$i$个(特别的, ...

  9. [bzoj1042]硬币购物

    先预处理出没有上限的方案数,然后容斥,然后将所有东西的范围都变为[0,+oo),即可用预处理出的dp数组计算 1 #include<bits/stdc++.h> 2 using names ...

  10. Chrome 插件特性及实战场景案例分析

    一.前言 提起Chrome扩展插件(Chrome Extension),每个人的浏览器中或多或少都安装了几个插件,像一键翻译.广告屏蔽.录屏等等,通过使用这些插件,可以有效的提高我们的工作效率:但有时 ...