关于javascript:Vue组件1-全局-局部-语法糖-区别-分离写法

Vue 组件

如果将一个页面中所有的解决逻辑全副放在一起，解决起来就会变得非常复杂，而且不利于后续治理以及扩大
但如果，咱们将一个页面拆分成一个个小的功能块，每个功能块实现属于本人这部分独立的性能，那么之后整个页面的治理和保护就变得容易

Vue 组件化思维

• 组件化是 Vue.js 中的重要思维

  • 提供里一种形象，让咱们能够开发出一个个独立可复用的小组件来结构咱们的利用
  • 任何的利用都会被形象成一棵组件树

• 组件化思维的利用

  • 有了组件化的思维，在之后开发尽可能将页面拆分成一个个小的，可复用的组件
  • 这也让咱们的代码更加不便组织和治理，并且扩展性也更强

• 组建的应用分成三个步骤

  • 创立组件结构器
  • 注册组件
  • 应用组件

• Vue.component():

  • 调用 Vue.component()是将方才的组件结构器注册为一个组件，并且给它起一个组建的标签名称
  • Vue.component(tagName, options)

  • tagName 为组件名，options 为配置选项
    例子基于在 Vue 开发环境下

         <div id="app">
        <my-cpn></my-cpn>        // 注册的组件
    </div>
    <script>
        //1. 创立组件结构器对象
        const cpnC = Vue.extend({
                template: `
           <div>
                <h2> 我是题目 </h2>
                <p> 我是内容，哈哈哈哈 </p>
                <p> 我是内容，呵呵呵呵呵 </p>
           </div>`
    
            })
            //2. 注册组件
        Vue.component('my-cpn', cpnC)
    
        const app = new Vue({
            el: '#app',
            data: {}})
    </script>
    // 此时组件内容就显示在页面

    另一种写法

           <div id="app">
            <my-cpn></my-cpn>
        </div>
        <script>
            // 注册组件
            Vue.component('my-cpn', {
                template: `            //template 的 DOM 构造必须被一个元素蕴含，如果间接写，不带 <div></div> 是无奈渲染的
               <div>
                    <h2> 我是题目 </h2>
                    <p> 我是内容，哈哈哈哈 </p>
                    <p> 我是内容，呵呵呵呵呵 </p>
               </div>`
    
            })
    
            var app = new Vue({
                el: '#app',
                data: {}})
        </script>
    // 此时组件内容就显示在页面
    

全局组件和部分组件

全局组件：意味着能够在多个 Vue 实例下应用
部分组件：在实例中，应用 components 选项能够部分注册组件，注册后的组件只有在该实例作用于下无效

        // 全局组件
       <div id="app">
            <my-cpn></my-cpn>
        </div>
        <script>
            // 注册组件
            Vue.component('my-cpn', {
                template: `    
               <div>
                    <h2> 我是题目 </h2>
                    <p> 我是内容，哈哈哈哈 </p>
                    <p> 我是内容，呵呵呵呵呵 </p>
               </div>`

            })

            var app = new Vue({
                el: '#app',
                data: {}})
        </script>
        
        // 部分组件
        <div id="app">
            <my-cpn></my-cpn>
        </div>
        <script>
            var child = {template:'<div> 部分注册组件的内容 </div>'}
            var app = new Vue({
                el:'#app',
                components:{'my-cpn':child}
            })
            </script>
            

#### 父组件和子组件的区别
如果子组件未注册而应用，则会报错，如需应用，需在 Vue 实例对象内再注册

    <div id="app">

        <cpn2></cpn2>
    </div>
    <script>
        //1. 创立第一个组件
        const cpn1 = Vue.extend({ // 子组件
            template: `
            <div>
                <h2> 我是题目 </h2>
                <p> 我是内容 </p>
            </div>`
        })
        const cpn2 = Vue.extend({ // 父组件
            template: `
            <div>
                <h2> 我是题目 2 </h2>
                <p> 我是内容 2 </p>
                <cpn1></cpn1>
            </div>`,
            components: {cpn1: cpn1}
        })
        var app = new Vue({ //root 组件
            el: '#app',
            components: {cpn2: cpn2}
        })
    </script>
    #### 父子组件谬误用法：以子标签的模式在 Vue 实例中应用

• 因为当子组件注册到父组件 components 时，Vue 会编译好父组件的模块
• 该模板的内容曾经决定了父组件将要渲染的 HTML（相当于父组件中曾经有了子组件中的内容）
• <child-cpn></child-cpn> 是只能在父组件中被辨认的
• 相似这种用法，<child-cpn></child-cpn> 是会被浏览器疏忽的

注册组件语法糖

• 在之前注册组建的形式，可能有些繁琐

  • Vue 为了简化这个过程，提供了注册的语法糖

  • 次要是省去了调用 Vue.extend()的步骤，而是能够间接应用一个对象来代替

    全局组件

    原写法：调用 extend

            const cpnC = Vue.extend({
                template: `
           <div>
                <h2> 我是源 </h2>
           </div>`
    
            })
        Vue.component('my-cpn', cpnC)
    
        const app = new Vue({
            el: '#app',
            data: {}})

    语法糖：外部调用虽仍是 extend，但简略

            <div id="app">
            <my-cpn></my-cpn>
        </div>
        <script>
            Vue.component('my-cpn', {
                template: `    
              <div>
                    <h2> 我是语法糖 </h2>
               </div>`
    
            })
    
            var app = new Vue({
                el: '#app',
                data: {}})
    

部分组件

            var app = new Vue({
                el:'#app',
                data:{},
                components:{
                    'cpnx':{
                        template:`
                        <div>
                            <h2> 我是部分组件 </div>
                        </div>`
                    }
                }
            })
            

组件模板的拆散写法

• Vue 提供了两种计划来定义 HTML 模块内容

  • 应用 <script> 标签
  • 应用 <template> 标签

• 通过 script 标签：留神类型必须是 text/template

    <div id="app">
        <my-cpn></my-cpn>
    </div>
    <script typeof="text/x-template" id="my-cpn">
    <div>
        <h2> 我是题目 </h2>
        <p> 我是内容，哈哈哈哈 </p>
        <p> 我是内容，呵呵呵呵呵 </p>
    </div>
    </script>
    <script>
        Vue.component('my-cpn', {template: `#my-cpn`})
  
        const app = new Vue({
            el: '#app',
            data: {}})
    </script>

• template 标签

    <div id="app">
        <my-cpn></my-cpn>
    </div>
         <template id="cpn">
            <div>
                <h2> 语法糖 </h2>
                <p> 孙悟空，哈哈哈哈 </p>
                <p> 我是语法糖呵呵呵呵呵 </p>
            </div>
        </template>
    <script>
        Vue.component('my-cpn', {template: `#cpn`})
        const app = new Vue({
            el: '#app',
            data: {}});
    </script>