<!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. requestAnimationFrame 执行机制探索

    1.什么是 requestAnimationFrame window.requestAnimationFrame() 告诉浏览器--你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更 ...

  2. vue + cesium开发(4) 绘制图形

    在官方例子中每个图形都是一个entity,官方例子提供了显示正方形.圆形.锥形.图片等多种案例! // 初始花 var viewer = new Cesium.Viewer("cesiumC ...

  3. [loj3247]Non-Decreasing Subsequences

    分治,考虑分治到[l,r]的区间(设$mid=(l+r)/2$),将询问分为两类:1.在左/右区间,直接递归下去:2.跨越中间,那么处理出两个数组:L[i][j]表示左区间在开头第i个位置,以数字j为 ...

  4. JAVA后端方面，如何快速达到能实习的程度

        概要地讲,是先广度再深度,面试开发两手抓. 首先说学习方法,因为很多初学者没继续下去,不是能力不行,而是方法不当.对比下错误和正确的方法. 1 光看视频光看资料不动手连,这样转眼就忘.正确的做 ...

  5. CentOS6.9 内核升级详解

    内核进行的是应用软件和计算机硬件的交互工作在计算机科学中,内核(英语:kernel)又称核心,是一个计算机程序,用来管理软件发出的数据I/O(输入与输出)要求,将这些要求转译为数据处理的指令,交由中央 ...

  6. centOS6和7单用户修改密码

    CentOS6 1.       进入启动系统倒计时的时候,按esc 之后进入一下界面: 2.       按a 键进入修改内核参数页面 3.       在quiet后面加入空格和1 ,如下:回车进 ...

  7. 完全用Deepin Linux娱乐、工作、学习（1）

    截至今天我已经用全Deepin Desktop Linux环境娱乐.工作.学习了100多天.当你看到这个桌面的时候,会不会觉得它是MacOS?错了,它是Deepin Desktop Linux,而且它 ...

  8. c#图标、显示图表、图形、json echarts实例 数据封装【c#】

    page: <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Viewxxx ...

  9. android studio 编译 Android dependency has different version

    找了一圈,终于在大佬的博客中找到了解决方法. 附链接:https://blog.csdn.net/u010725171/article/details/81232183 Android depende ...

  10. cvc-complex-type.2.3: Element 'servlet' cannot have character [children], because the type's content

    错误原因:粘贴代码 <servlet> <servlet-name>barServlet</servlet-name> <servlet-class>S ...