Vue组件笔记

全局组件

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<body>
<div id="app">
    <mycomponent></mycomponent>
</div>
<script>
    Vue.component('mycomponent',{
        template: `<div>这是一个全局定义组件</div>`,
        data(){
            return{
                message: 'hello world'
            }
        }
    })
    new Vue({
        el: '#app',
    })
</script>
</body>
</html>

渲染至页面的html结构:


image.png

局部组件

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<body>
<div id="app">
    <my-component></my-component>
</div>
<script>
   var Child = {
       template: `<div>我是自定义局部组件</div>`
   }
   new Vue({
       el:'#app',
       components:{
           'my-component': Child
       }
   })
</script>
</body>
</html>

渲染至页面的html结构:


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式....
    itclanCoder阅读 26,015评论 1 12
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,031评论 3 119
  • 这里所说的爱并不单指爱情,这里所说的陪伴也并不一定要在身旁。 不管是合群还是喜欢离群索居的人,其实都是需要陪伴的。...
    繁花落尽深眸阅读 1,801评论 18 16
  • 两个月前,我在公司内部做了一次杰克·韦尔奇《赢》的读书分享,结合自身的工作经验谈管理团队的理念,本篇文章是基于分享...
    范凯阅读 10,132评论 9 101
  • 2017年6月1日及之前 百度搜索资料,并梳理人物、事件、时间线。 2017年6月2日-6月14日 1.当当网购买...
    一声传语阅读 425评论 0 1