vue简单学习-组件

1、定义

    组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素标签< mycomponent >，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 vue.js 特性进行了扩展的原生 HTML 元素。
    简单来说： 组件是用来完成特定功能的一个自定义的HTML标签。

2、作用

    组件是对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码。
    封装重复利用。

3、分类

• 全局组件：在所有vue实例中(.在它所挂载元素下面有效)有效。
• 局部组件：在自己vue实例中(.在它所挂载元素下面有效)有效。

4、创建组件方式

3种
使用方式1定义组件，对于多行代码不方便，多使用方式2

5、方式1

全局组件

				 Vue,component("组件名",{
                    template:"htnml元素"
                 })

局部组件

var vue = new Vue({
        el:"#app",
        components:{
            mycomponents:{
                template:"<h1>局部组件</h1>",
            },
            innercomponent:outcomponent
        },
    })

使用，在dom中使用标签
然后挂载dom

<div id="app">
    <组件名></组件名>
</div>

 var vue = new Vue({
        el:"#app",
    })

6、方式2

使用< template >< /template >标签定义

<!--定义组件的模板-->
<template id="mytemplate">
    <form action="" method="">
        用户名：<input type="text" name="username"><br>
        用户名：<input type="text" name="username"><br>
        用户名：<input type="text" name="username"><br>
        用户名：<input type="text" name="username"><br>
        用户名：<input type="text" name="username"><br>
        用户名：<input type="text" name="username"><br>
        用户名：<input type="text" name="username"><br>
        用户名：<input type="text" name="username"><br>
        <input type="submit" value="提交">
    </form>
</template>

全局组件,局部与方式1同样

  Vue.component("mycomponent", {
        template: "#mytemplate",
    })

在dom中直接使用组件名引用
注意：把template放在dom中，也可以直接显示

<div id="app">
    <mycomponent></mycomponent>
    <!--把template放在dom中，也可以直接显示-->
    <template>
        <h1>ceshi </h1>
    </template>
</div>

7、方式3

方式3与方式2基本相同
唯一的区别就是
方式3，直接挂载在dom中不会直接显示

使用< script >标签，注意类型改为 type=“text/template”

<script  type="text/template" id="mytemplate">
    <form action="" method="">
        用户名：<input type="text" name="username"><br>
        用户名：<input type="text" name="username"><br>
        用户名：<input type="text" name="username"><br>
        <input type="submit" value="提交">
    </form>
</script>

8、组件动态获取元素

组件获取动态数据：
    数据必须在component中，不能是vue中的数据
    而且数据类型必须函数式，返回值为json格式

<script type="text/javascript">
    Vue.component("mycomponent", {
        template: "#mytemplate",
        data:function () {
          return {
              userInfo: "ergou",
              age:111
          }
        }
    })

<div id="app">
    <mycomponent></mycomponent>
</div>
<template id="mytemplate">
    <h1>huanying{{userInfo}}-------age:{{age}} </h1>
</template>