非单文件组件

1.基本使用

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>基本使用</title>

    <script type="text/javascript" src="../js/vue.js"></script>

  </head>

  <body>

    <!--

      Vue中使用组件的三大步骤:

          一、定义组件(创建组件)

          二、注册组件

          三、使用组件(写组件标签)

      一、如何定义一个组件?

            使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别;

            区别如下:

                1.el不要写,为什么? ——— 最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。

                2.data必须写成函数,为什么? ———— 避免组件被复用时,数据存在引用关系。

            备注:使用template可以配置组件结构。

      二、如何注册组件?

              1.局部注册:靠new Vue的时候传入components选项

              2.全局注册:靠Vue.component('组件名',组件)

      三、编写组件标签:

              <school></school>

    -->

    <!-- 准备好一个容器-->

    <div id="root">

      <hello></hello>

      <hr>

      <h1>{{msg}}</h1>

      <hr>

      <!-- 第三步:编写组件标签 -->

      <school></school>

      <hr>

      <!-- 第三步:编写组件标签 -->

      <student></student>

    </div>

    <div id="root2">

      <hello></hello>

    </div>

  </body>

  <script type="text/javascript">

    Vue.config.productionTip = false

    //第一步:创建school组件

    const school = Vue.extend({

      template:`

        <div class="demo">

          <h2>学校名称:{{schoolName}}</h2>

          <h2>学校地址:{{address}}</h2>

          <button @click="showName">点我提示学校名</button> 

        </div>

      `,

      // el:'#root', //组件定义时,一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm决定服务于哪个容器。

      data(){

        return {

          schoolName:'尚硅谷',

          address:'北京昌平'

        }

      },

      methods: {

        showName(){

          alert(this.schoolName)

        }

      },

    })

    //第一步:创建student组件

    const student = Vue.extend({

      template:`

        <div>

          <h2>学生姓名:{{studentName}}</h2>

          <h2>学生年龄:{{age}}</h2>

        </div>

      `,

      data(){

        return {

          studentName:'张三',

          age:18

        }

      }

    })


    //第一步:创建hello组件

    const hello = Vue.extend({

      template:`

        <div>

          <h2>你好啊!{{name}}</h2>

        </div>

      `,

      data(){

        return {

          name:'Tom'

        }

      }

    })

    //第二步:全局注册组件

    Vue.component('hello',hello)

    //创建vm

    new Vue({

      el:'#root',

      data:{

        msg:'你好啊!'

      },

      //第二步:注册组件(局部注册)

      components:{

        school,

        student

      }

    })

    new Vue({

      el:'#root2',

    })

  </script>

</html>

2.几个注意点

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>几个注意点</title>

    <script type="text/javascript" src="../js/vue.js"></script>

  </head>

  <body>

    <!--

      几个注意点:

          1.关于组件名:

                一个单词组成:

                      第一种写法(首字母小写):school

                      第二种写法(首字母大写):School

                多个单词组成:

                      第一种写法(kebab-case命名):my-school

                      第二种写法(CamelCase命名):MySchool (需要Vue脚手架支持)

                备注:

                    (1).组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行。

                    (2).可以使用name配置项指定组件在开发者工具中呈现的名字。

          2.关于组件标签:

                第一种写法:<school></school>

                第二种写法:<school/>

                备注:不用使用脚手架时,<school/>会导致后续组件不能渲染。

          3.一个简写方式:

                const school = Vue.extend(options) 可简写为:const school = options

    -->

    <!-- 准备好一个容器-->

    <div id="root">

      <h1>{{msg}}</h1>

      <school></school>

    </div>

  </body>

  <script type="text/javascript">

    Vue.config.productionTip = false

    //定义组件

    const s = Vue.extend({

      name:'atguigu',

      template:`

        <div>

          <h2>学校名称:{{name}}</h2> 

          <h2>学校地址:{{address}}</h2>

        </div>

      `,

      data(){

        return {

          name:'尚硅谷',

          address:'北京'

        }

      }

    })

    new Vue({

      el:'#root',

      data:{

        msg:'欢迎学习Vue!'

      },

      components:{

        school:s

      }

    })

  </script>

</html>

3.组件的嵌套

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>组件的嵌套</title>

    <!-- 引入Vue -->

    <script type="text/javascript" src="../js/vue.js"></script>

  </head>

  <body>

    <!-- 准备好一个容器-->

    <div id="root">


    </div>

  </body>

  <script type="text/javascript">

    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    //定义student组件

    const student = Vue.extend({

      name:'student',

      template:`

        <div>

          <h2>学生姓名:{{name}}</h2> 

          <h2>学生年龄:{{age}}</h2>

        </div>

      `,

      data(){

        return {

          name:'尚硅谷',

          age:18

        }

      }

    })


    //定义school组件

    const school = Vue.extend({

      name:'school',

      template:`

        <div>

          <h2>学校名称:{{name}}</h2> 

          <h2>学校地址:{{address}}</h2>

          <student></student>

        </div>

      `,

      data(){

        return {

          name:'尚硅谷',

          address:'北京'

        }

      },

      //注册组件(局部)

      components:{

        student

      }

    })

    //定义hello组件

    const hello = Vue.extend({

      template:`<h1>{{msg}}</h1>`,

      data(){

        return {

          msg:'欢迎来到尚硅谷学习!'

        }

      }

    })

    //定义app组件

    const app = Vue.extend({

      template:`

        <div>

          <hello></hello>

          <school></school>

        </div>

      `,

      components:{

        school,

        hello

      }

    })

    //创建vm

    new Vue({

      template:'<app></app>',

      el:'#root',

      //注册组件(局部)

      components:{app}

    })

  </script>

</html>

4.VueComponent

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>VueComponent</title>

    <script type="text/javascript" src="../js/vue.js"></script>

  </head>

  <body>

    <!--

      关于VueComponent:

            1.school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。

            2.我们只需要写<school/>或<school></school>,Vue解析时会帮我们创建school组件的实例对象,

              即Vue帮我们执行的:new VueComponent(options)。

            3.特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!!

            4.关于this指向:

                (1).组件配置中:

                      data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。

                (2).new Vue(options)配置中:

                      data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

            5.VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象)。

              Vue的实例对象,以后简称vm。

    -->

    <!-- 准备好一个容器-->

    <div id="root">

      <school></school>

      <hello></hello>

    </div>

  </body>

  <script type="text/javascript">

    Vue.config.productionTip = false

    //定义school组件

    const school = Vue.extend({

      name:'school',

      template:`

        <div>

          <h2>学校名称:{{name}}</h2> 

          <h2>学校地址:{{address}}</h2>

          <button @click="showName">点我提示学校名</button>

        </div>

      `,

      data(){

        return {

          name:'尚硅谷',

          address:'北京'

        }

      },

      methods: {

        showName(){

          console.log('showName',this)

        }

      },

    })

    const test = Vue.extend({

      template:`<span>atguigu</span>`

    })

    //定义hello组件

    const hello = Vue.extend({

      template:`

        <div>

          <h2>{{msg}}</h2>

          <test></test>

        </div>

      `,

      data(){

        return {

          msg:'你好啊!'

        }

      },

      components:{test}

    })

    // console.log('@',school)

    // console.log('#',hello)

    //创建vm

    const vm = new Vue({

      el:'#root',

      components:{school,hello}

    })

  </script>

</html>

5.一个重要的内置关系

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>一个重要的内置关系</title>

    <!-- 引入Vue -->

    <script type="text/javascript" src="../js/vue.js"></script>

  </head>

  <body>

    <!--

        1.一个重要的内置关系:VueComponent.prototype.__proto__ === Vue.prototype

        2.为什么要有这个关系:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。

    -->

    <!-- 准备好一个容器-->

    <div id="root">

      <school></school>

    </div>

  </body>

  <script type="text/javascript">

    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    Vue.prototype.x = 99

    //定义school组件

    const school = Vue.extend({

      name:'school',

      template:`

        <div>

          <h2>学校名称:{{name}}</h2> 

          <h2>学校地址:{{address}}</h2>

          <button @click="showX">点我输出x</button>

        </div>

      `,

      data(){

        return {

          name:'尚硅谷',

          address:'北京'

        }

      },

      methods: {

        showX(){

          console.log(this.x)

        }

      },

    })

    //创建一个vm

    const vm = new Vue({

      el:'#root',

      data:{

        msg:'你好'

      },

      components:{school}

    })

    //定义一个构造函数

    /* function Demo(){

      this.a = 1

      this.b = 2

    }

    //创建一个Demo的实例对象

    const d = new Demo()

    console.log(Demo.prototype) //显示原型属性

    console.log(d.__proto__) //隐式原型属性

    console.log(Demo.prototype === d.__proto__)

    //程序员通过显示原型属性操作原型对象,追加一个x属性,值为99

    Demo.prototype.x = 99

    console.log('@',d) */

  </script>

</html>

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 224,619评论 6 522
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 96,163评论 3 402
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 171,789评论 0 366
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 60,911评论 1 300
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 69,920评论 6 399
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 53,410评论 1 314
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,788评论 3 428
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 40,762评论 0 279
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 47,293评论 1 324
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 39,328评论 3 345
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 41,456评论 1 354
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 37,063评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,775评论 3 337
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 33,231评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,363评论 1 275
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 49,995评论 3 381
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 46,519评论 2 365

推荐阅读更多精彩内容

  • 基本使用 1.创建组件2.注册组件(全局组件、局部组件) 注意:1.关于组件名一个单词组成第一种写法(首字母小写)...
    冰点雨阅读 120评论 0 0
  • Vue中使用组件的三大步骤 一、定义组件(创建组件) 二、注册组件 三、使用组...
    卑微小李学前端阅读 381评论 0 2
  • 定义组件时: let home = Vue.extend(配置项)配置项和new VUe 基本类似 可以有 dat...
    大嘴巴tht阅读 131评论 0 0
  • 01 组件 1. 1 vue 中使用组件的三大步骤 定义组件(创建组件) 注册组件 使用组件(写组件标签) 1.2...
    荆承鹏阅读 428评论 0 0
  • Vue是一套用于 构建用户界面 的 渐进式 JavaScript框架。渐进式:vue可以自底向上逐层的应用(简单应...
    Spinach阅读 1,576评论 3 7