vue 第十天 （组件的基本使用）

vue 第十天 （组件的基本使用）

1、组件的创建，注册 与 调用

1.1、创建方式 全局创建

全局组件，意味着可以在多个vue实例中使用

<!-- my-cpn1 组件的调用 -->
<div id="vue_one">
    <my-cpn1></my-cpn1>
    <my-cpn1></my-cpn1>
</div>
<script type="text/javascript">
    // 1.创建组件构造器对象
    const cpnC = Vue.extend({
    
    
        template: `<div>
                   <h2>我是标题</h2>
                   <p>我是段落</p>
                   <p>我也是，我还是内容</p>
                   </div>`
    })
    // 2.注册组件(全局组件，意味着可以在多哥vue实例中使用)
    Vue.component("my-cpn1", cpnC)
    // 3.构建 vue 实例
    const vm = new Vue({
    
    
        el: '#vue_one'
    })
</script>

1.2、创建方式 局部创建

<!-- 3.my-c 组件的调用 -->
<div id="vue_one">
    <my-c></my-c>
    <my-c></my-c>
</div>
<script type="text/javascript">
    // 1.创建组件构造器对象
    const cpnC = Vue.extend({
    
    
        template: `<div>
                   <h2>我是标题</h2>
                   <p>我是段落</p>
                   <p>我也是，我还是内容</p>
                   </div>`
    })
    // 2.注册组件 构建 vue
    const vm = new Vue({
    
    
        el: '#vue_one',
        components:{
    
    
            "my-c":cpnC
        }
    })
</script>

2、组件的语法糖（简写）

2.1、创建方式 全局创建组件-----语法糖

全局创建组件 ---------------》语法糖（简写） Vue.component(‘注册的标签’,{})

<!-- 3.my-c 组件的调用 -->
<div id="vue_one">
    <my-c></my-c>
    <my-c></my-c>
</div>
<script type="text/javascript">
    // 1.创建组件构造器对象 注册组件 Vue.component,注册的标签
    const cpnC = Vue.component('my-c',{
    
    
        template: `<div>
                   <h2>我是标题</h2>
                   <p>我是段落</p>
                   <p>我也是，我还是内容</p>
                   </div>`
    })
    //  构建 vue
    const vm = new Vue({
    
    
        el: '#vue_one'
    })
</script>

2.2、创建方式 局部创建--------语法糖

局部创建组件 ---------------》语法糖（简写） components:{“标签”:{template:``}}

<!-- 2.my-c 组件的调用 -->
<div id="vue_one">
    <my-c></my-c>
    <my-c></my-c>
</div>
<script type="text/javascript">
    // 1.构建 vue 创建组件构造器对象 注册组件 components:{"标签":{template:``}}
    const vm = new Vue({
    
    
        el: '#vue_one',
        components: {
    
    
            "my-c": {
    
    
                template: `
                        <div>
                            <h2>我是标题</h2>
                            <p>我是段落</p>
                            <p>我也是，我还是内容</p>
                        </div>`
            }
        }
    })
</script>

2.3 分离写法

2.3.1 局部创建组件

也可以把 template 放到body中

<template id="diaoyong">
    <div>
        <h2>我是标题</h2>
        <p>我是段落</p>
        <p>我也是，我还是内容</p>
    </div>
</template>
<!-- 2.my-c 组件的调用 -->
<div id="vue_one">
    <my-c></my-c>
    <my-c></my-c>
</div>
<script type="text/javascript">
    // 1.构建 vue 创建组件构造器对象 注册组件 components:{"标签":{template:``}}
    const vm = new Vue({
    
    
        el: '#vue_one',
        components: {
    
    
            "my-c": {
    
    
                template: "#diaoyong"
            }
        }
    })
</script>

也可以把 template 放到style中

<!-- 2.my-c 组件的调用 -->
<div id="vue_one">
    <my-c></my-c>
    <my-c></my-c>
</div>

<!--定义 template-->
<script type="text/x-template" id="diaoyong">
    <div>
        <h2>我是标题</h2>
        <p>我是段落</p>
        <p>我也是，我还是内容</p>
    </div>
</script>

<script type="text/javascript">
    // 1.构建 vue 创建组件构造器对象 注册组件 components:{"标签":{template:""}}
    const vm = new Vue({
    
    
        el: '#vue_one',
        components: {
    
    
            "my-c": {
    
    
                template: "#diaoyong"
            }
        }
    })
</script>

2.3.2 全局创建组件

也可以把 template 放到body中

<!--定义 template-->
<template id="woshiid1">
    <div>
        <h2>我是标题</h2>
        <p>我是段落</p>
        <p>我也是，我还是内容</p>
    </div>
</template>

<!-- 3.my-c 组件的调用 -->
<div id="vue_one">
    <my-c></my-c>
    <my-c></my-c>
</div>
<script type="text/javascript">
    // 1.创建组件构造器对象 注册组件 Vue.component
    const cpnC = Vue.component('my-c',{
    
    
        template: "#woshiid1"
    })
    //  构建 vue
    const vm = new Vue({
    
    
        el: '#vue_one'
    })
</script>

也可以把 template 放到 script 中

<!-- 3.my-c 组件的调用 -->
<div id="vue_one">
    <my-c></my-c>
    <my-c></my-c>
</div>


<!--定义 template-->
<script type="text/x-template" id="woshiid1">
    <div>
        <h2>我是标题</h2>
        <p>我是段落</p>
        <p>我也是，我还是内容</p>
    </div>
</script>

<script type="text/javascript">
    // 1.创建组件构造器对象 注册组件 Vue.component
    const cpnC = Vue.component('my-c',{
    
    
        template: "#woshiid1"
    })
    //  构建 vue
    const vm = new Vue({
    
    
        el: '#vue_one'
    })
</script>

花开一千年,花落一千年,花叶永不见