[Vue]组件

于 2022-10-12 01:54:54 发布
阅读量638 收藏 3
点赞数 2
分类专栏： Vue 学习笔记 文章标签： vue.js javascript 前端 前端框架 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53022813/article/details/127263468
版权

前言

系列文章目录：
[Vue]目录
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

文章目录

1. 对组件的理解

1.1 传统方式编写网页

在这里插入图片描述

对于传统方式编写网页：

  1. 实现了代码复用，页面的顶部和底部的css样式以及页面顶部和底部的js实现了代码的复用，但是页面的代码复用率不高，页面的结构代码html没有得到复用。
  2. 页面的依赖关系混乱，一个页面引入多个css和js，一个css代码和js代码又被多个页面引用，如果此时css代码和js代码之间又存在相互引用，则此时代码间的关系更加混乱，这个情况下代码不利于维护，可能牵一发而动全身。
  3. 上述图片中js代码实现了模块化。

模块化：当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用。即将一个庞大的js代码文件，根据需求和功能进行模块的拆分，将一个庞大的js代码文件拆分成多个js代码文件。
模块：向外提供特定功能的 js 程序，一般就是一个 js 文件。
模块的作用：复用 js，简化 js 的编写，提高 js 运行效率。

1.2 组件方式编写页面

在这里插入图片描述

对于组件方式编写页面：

  1. 整个组件，包含html、css、js，都能实现复用，需要某个组件时，只要将对应的组件整个引入即可，提高了代码的复用性。
  2. 在组件化编程中，各个组件都有属于自己的html、css、js，每个组件之间不会相互影响，不会出现页面的依赖关系混乱，不利于维护的情况。
  3. 在组件化编程中也可以实现模块化，在一个组件中，也可以将该组件的js代码进行拆分，根据功能和需求拆分多个js代码。
    在这里插入图片描述

组件化：当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。即将一个页面拆分成多个部分(组件)，每个组件都有属于自己的代码和资源，单独编写自己的html、css、js。不同组件间可以进行引用。
组件：用来实现局部功能的代码和资源的集合（html/css/js/image…）
组件的作用：复用编码，简化项目编码，提高运行效率
在这里插入图片描述

2. 定义/创建组件

在vue中，组件有两种形式，非单文件组件和单文件组件。

2.1 非单文件组件

非单文件组件：一个文件中包含n个组件。

2.1.1 创建组件

创建组件语法：

const 组件名 = Vue.extend({
	// el: '' 在组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
	// 组件控制的模板 html
    template: '',
	data() {
		return {
			k: v,
			k: v,
			...
		}
	}
})
  • 在组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
  • 在组件定义时，data配置项一定要写成函数形式。
    • 如果写成对象形式，则多个组件都引用了该新组件，则多个组件的页面中的data都是对该新组件中data的引用，一个组件修改了值，另一个组件也会受到影响。
    • 如果写成函数形式，则每次都会返回一个新的data对象，不同组件之间不会互相影响。
        function data() {
    return {
      a: 1,
      b: 99
    }
  }

  a = data()
  b = data()

      在这里插入图片描述

    // 创建学校组件
    const school = Vue.extend({
      // 组件控制的模板 html
      template: `
        <div>
          <h2>学校名: {{name}}</h2>
          <h2>学校地址：{{address}}</h2>  
        </div>
      `,
      // 组件控制模板的数据
      data() {
        return {
          name: 'SGG',
          address: 'Beijing'
        }
      }
    })

    // 创建学生组件
    const student = Vue.extend({
      // 组件控制的模板 html
      template: `
        <div>
          <h2>姓名: {{name}}</h2>
          <h2>年龄：{{age}}</h2>
          <button @click="age++">点击年龄++</button>
        </div>
      `,
      // 组件控制模板的数据
      data() {
        return {
          name: 'ZS',
          age: 18
        }
      }
    })

2.1.2 注册组件(局部注册)

在vue实例vm中注册组件，使用components配置项。

语法：

new Vue({
	el: '#root',
	components: {
		组件使用时的名字: 创建时的组件名,
		组件使用时的名字: 创建时的组件名,
		...
	}
})

new Vue({
	el: '#root',
	components: {
		// 组件使用时候的名字和创建时的组件名一致可以简写
		创建时的组件名,
		创建时的组件名,
		...
	}
})

    const vm = new Vue({
      el: '#root',
      // 由于只有一个vm，不会出现冲突
      // vm的data可以使用对象形式
      data: {
        msg: 'hello world!'
      },
      // 注册组件
      // 组件使用时候的名字和组件创建时候的名字一样
      components: {
        school,
        student
      } 
    })

2.1.3 使用组件

使用组件，只需要在页面中需要使用组件的位置编写对应组件的组件标签即可。

<组件使用时的名字></组件使用时的名字>

  <body>
    <div id="root">
      <h1>{{msg}}</h1>
      <hr />
      <school></school>
      <hr />
      <student></student>
      <!-- 组件的复用 -->
      <student></student>
    </div>
  </body>

在这里插入图片描述

2.1.4 页面完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <h1>{{msg}}</h1>
      <hr />
      <school></school>
      <hr />
      <student></student>
      <student></student>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    // 创建学校组件
    const school = Vue.extend({
      // 组件控制的模板 html
      template: `
        <div>
          <h2>学校名: {{name}}</h2>
          <h2>学校地址：{{address}}</h2>  
        </div>
      `,
      // 组件控制模板的数据
      data() {
        return {
          name: 'SGG',
          address: 'Beijing',
        }
      },
    })

    // 创建学生组件
    const student = Vue.extend({
      // 组件控制的模板 html
      template: `
        <div>
          <h2>姓名: {{name}}</h2>
          <h2>年龄：{{age}}</h2>
          <button @click="age++">点击年龄++</button>
        </div>
      `,
      // 组件控制模板的数据
      data() {
        return {
          name: 'ZS',
          age: 18,
        }
      },
    })

    const vm = new Vue({
      el: '#root',
      // 由于只有一个vm，不会出现冲突
      // vm的data可以使用对象形式
      data: {
        msg: 'hello world!',
      },
      // 注册组件
      // 组件使用时候的名字和组件创建时候的名字一样
      components: {
        school,
        student,
      },
    })
  </script>
</html>

2.1.5 注册组件(全局注册)

	// 全局注册school组件
    Vue.component('school', school)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <h1>{{msg}}</h1>
      <hr />
      <school></school>
      <hr />
      <student></student>
      <student></student>
    </div>
    <hr><hr>
    <div id="root2">
      <school></school>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    // 创建学校组件
    const school = Vue.extend({
      // 组件控制的模板 html
      template: `
        <div>
          <h2>学校名: {{name}}</h2>
          <h2>学校地址：{{address}}</h2>  
        </div>
      `,
      // 组件控制模板的数据
      data() {
        return {
          name: 'SGG',
          address: 'Beijing',
        }
      },
    })

    // 创建学生组件
    const student = Vue.extend({
      // 组件控制的模板 html
      template: `
        <div>
          <h2>姓名: {{name}}</h2>
          <h2>年龄：{{age}}</h2>
          <button @click="age++">点击年龄++</button>
        </div>
      `,
      // 组件控制模板的数据
      data() {
        return {
          name: 'ZS',
          age: 18,
        }
      },
    })

    Vue.component('school', school)

    const vm = new Vue({
      el: '#root',
      // 由于只有一个vm，不会出现冲突
      // vm的data可以使用对象形式
      data: {
        msg: 'hello world!',
      },
      // 注册组件
      // 组件使用时候的名字和组件创建时候的名字一样
      components: {
        student
      },
    })

    new Vue({
      el: '#root2'
    })
  </script>
</html>

在这里插入图片描述

2.1.6 非单文件组件 总结

  • 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>

2.2 组件的注意点

2.2.1 组件的名称由一个单词组成

组件的名称由一个单词组成时，可以使用首字母大写的写法，这种写法可以与vue的开发者工具相呼应。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <School></School>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    // 创建学校组件
    const school = Vue.extend({
      // 组件控制的模板 html
      template: `
        <div>
          <h2>学校名: {{name}}</h2>
          <h2>学校地址：{{address}}</h2>  
        </div>
      `,
      // 组件控制模板的数据
      data() {
        return {
          name: 'SGG',
          address: 'Beijing',
        }
      },
    })

    const vm = new Vue({
      el: '#root',
      data: {
        msg: 'hello world!',
      },
      components: {
        School: school
      },
    })
  </script>
</html>

在这里插入图片描述

2.2.2 组件的名称由多个单词组成

2.2.2.1 写法一(kebab-case命名)

组件的名称由多个单词组成时，使用短线连接不同单词的写法。此时，组件名要使用引号进行包裹。这种写法vue开发者工具会将不同单词取出每个单词首字母大写进行显示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <my-school></my-school>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    // 创建学校组件
    const school = Vue.extend({
      // 组件控制的模板 html
      template: `
        <div>
          <h2>学校名: {{name}}</h2>
          <h2>学校地址：{{address}}</h2>  
        </div>
      `,
      // 组件控制模板的数据
      data() {
        return {
          name: 'SGG',
          address: 'Beijing',
        }
      },
    })

    const vm = new Vue({
      el: '#root',
      data: {
        msg: 'hello world!',
      },
      components: {
        'my-school': school
      },
    })
  </script>
</html>

在这里插入图片描述

2.2.2.2 写法二(CamelCase命名)

组件的名称由多个单词组成时，使用每个单词首字母大写的写法，此种写法需要脚手架的环境下使用。

components: {
  MySchool: school
},

<MySchool></MySchool>

组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。

2.2.3 组件的name配置项

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <my-school></my-school>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    // 创建学校组件
    const school = Vue.extend({
      name: 'hhhhhhhhhhh',
      // 组件控制的模板 html
      template: `
        <div>
          <h2>学校名: {{name}}</h2>
          <h2>学校地址：{{address}}</h2>  
        </div>
      `,
      // 组件控制模板的数据
      data() {
        return {
          name: 'SGG',
          address: 'Beijing',
        }
      },
    })

    const vm = new Vue({
      el: '#root',
      data: {
        msg: 'hello world!',
      },
      components: {
        'my-school': school
      },
    })
  </script>
</html>

在这里插入图片描述

2.2.4 创建组件的简写形式

const school = Vue.extend(options) 

可简写为：

const school = options

const school = options此种写法，在vue的底层会自动调用Vue.extend() 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <my-school></my-school>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    // 创建学校组件
    const school = {
      name: 'MySchool',
      // 组件控制的模板 html
      template: `
        <div>
          <h2>学校名: {{name}}</h2>
          <h2>学校地址：{{address}}</h2>  
        </div>
      `,
      // 组件控制模板的数据
      data() {
        return {
          name: 'SGG',
          address: 'Beijing',
        }
      },
    }

    const vm = new Vue({
      el: '#root',
      data: {
        msg: 'hello world!',
      },
      components: {
        'my-school': school
      },
    })
  </script>
</html>

在这里插入图片描述

2.3 组件的嵌套

注意：被使用的组件需要先定义，组件定义完成后才能进行注册使用。
组件在哪个组件管理的模块使用，就在哪个模块进行注册使用

在开发中，通常会定义一个名为App的组件，用于管理其他全部的组件，而App组件收到vm的管理。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    // 定义student组件 在school中注册使用
    const student = Vue.extend({
      name: 'Student',
      template: `
        <div>
          <h2>姓名: {{name}}</h2>
          <h2>年龄：{{age}}</h2>  
        </div>
      `,
      data() {
        return {
          name: 'ZS',
          age: 18,
        }
      },
    })

    // 定义school组件
    const school = Vue.extend({
      name: 'School',
      template: `
        <div>
          <h2>学校名: {{name}}</h2>
          <h2>学校地址：{{address}}</h2>
          <hr>
          <!-- 使用student组件 -->
          <student></student>  
        </div>
      `,
      data() {
        return {
          name: 'SGG',
          address: 'Beijing',
        }
      },
      components: {
        // 注册student组件
        student,
      },
    })

    // 定义hello组件 与school组件平级
    const hello = Vue.extend({
      name: 'Hello',
      template: `
        <div>
          <h1>Hello World!</h1>  
        </div>
      `,
    })

    // 定义app组件用于管理所有的组件
    const app = Vue.extend({
      name: 'App',
      template:`
        <div>
          <!-- 使用hello与student组件 -->
          <hello></hello>
          <school></school>  
        </div>
      `,
      components: {
        // 注册hello与school组件
        hello,
        school,
      }
    })

    const vm = new Vue({
      el: '#root',
      // 使用app组件
      template: `<app></app>`,
      components: {
        // 注册App组件
        app
      },
    })
  </script>
</html>

在这里插入图片描述

2.4 VueComponent

2.4.1 组件为VueComponent的构造函数

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

在页面中使用了组件，才会进行vue组件实例对象的创建。

    // 定义school组件
    const school = Vue.extend({
      name: 'School',
      template: `
        <div>
          <h2>学校名: {{name}}</h2>
          <h2>学校地址：{{address}}</h2> 
        </div>
      `,
      data() {
        return {
          name: 'SGG',
          address: 'Beijing',
        }
      }
    })

    console.log(school)

在这里插入图片描述

Vue.extend = function (extendOptions) {
  /* ...... */ 

  var Sub = function VueComponent (options) {
    this._init(options);
  };
  
  /* ...... */

  return Sub
};

由Vue.extend()的源代码可知，在Vue.extend()内创建了一个VueComponent函数，并将该函数进行了返回。所以组件是一个名为VueComponent构造函数，且是由Vue.extend生成的。

2.4.2 使用组件自动调用new VueComponent()

以school组件为例，我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建 school 组件的实例对象 ，即Vue帮我们执行的：new VueComponent(options)。

修改vue.js中Vue.extend()源代码：

      var Sub = function VueComponent(options) {
        console.log('VueComponent被调用...')
        this._init(options);
      };

使用两次school组件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <school></school>
      <school></school>
    </div>
  </body>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
  <script src="../js/vue.js"></script>
  <script>
    // 定义school组件
    const school = Vue.extend({
      name: 'School',
      template: `
        <div>
          <h2>学校名: {{name}}</h2>
          <h2>学校地址：{{address}}</h2> 
        </div>
      `,
      data() {
        return {
          name: 'SGG',
          address: 'Beijing',
        }
      }
    })

    console.log(school)

    const vm = new Vue({
      el: '#root',
      components: {
        school
      },
    })
  </script>
</html>

在这里插入图片描述

2.4.3 每次创建组件返回全新的VueComponent

每次调用Vue.extend，返回的都是一个全新的VueComponent。

  <script>
    // 定义school组件
    const school = Vue.extend({
      name: 'School',
      template: `
        <div>
          <h2>学校名: {{name}}</h2>
          <h2>学校地址：{{address}}</h2> 
        </div>
      `,
      data() {
        return {
          name: 'SGG',
          address: 'Beijing',
        }
      }
    })

    // 定义hello组件
    const hello = Vue.extend({
      name: 'Hello',
      template: `
        <div>
          <h2>Hello World!</h2> 
        </div>
      `
    })


    console.log(school)
    console.log(hello)
    console.log(hello === school)
  </script>

在这里插入图片描述

2.4.4 this的指向

  • (1).组件配置中：
    • data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
  • (2).new Vue(options)配置中：
    • data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <button @click="showThis">点击打印this</button>
      <hr />
      <school></school>
    </div>
  </body>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
  <script src="../js/vue.js"></script>
  <script>
    // 定义school组件
    const school = Vue.extend({
      name: 'School',
      template: `
        <div>
          <h2>学校名: {{name}}</h2>
          <h2>学校地址：{{address}}</h2> 
          <button @click="showThis">点击打印this</button>
        </div>
      `,
      data() {
        return {
          name: 'SGG',
          address: 'Beijing',
        }
      },
      methods: {
        showThis() {
          console.log('VueComponent: ', this)
        },
      },
    })

    const vm = new Vue({
      el: '#root',
      components: {
        school,
      },
      methods: {
        showThis() {
          console.log('Vue: ', this)
        },
      },
    })
  </script>
</html>

在这里插入图片描述

2.5 一个重要的内置关系

JavaScript – 原型与原型链

只要是对象就有隐式原型属性，只要是函数就有显示原型属性，隐式原型属性永远指向对象缔造者(构造函数)的显示原型属性指向的原型对象。使用构造函数的显示原型属性向原型对象上添加属性或方法，构造出来的对象使用隐式原型属性查找添加的属性或方法。

在Vue中，VueComponent()的原型对象的原型对象为Vue()的原型对象。即组件的原型对象的原型对象为Vue()的原型对象。

VueComponent.prototype.__proto__ === Vue.prototype

Vue()为vue实例的构造函数，VueComponent()为组件实例的构造函数。

这个重要的内置关系的作用：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。这样子就不用再VueComponent的原型对象上再添加一份与Vue原型对象上相同的属性和方法。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <school></school>
    </div>
  </body>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
  <script src="../js/vue.js"></script>
  <script>
    // 向Vue的原型对象上添加属性x
    Vue.prototype.x = 999

    // 定义school组件
    const school = Vue.extend({
      name: 'School',
      template: `
        <div>
          <h2>学校名: {{name}}</h2>
          <h2>学校地址：{{address}}</h2> 
          <button @click="showX">点击打印X</button>
        </div>
      `,
      data() {
        return {
          name: 'SGG',
          address: 'Beijing',
        }
      },
      methods: {
        showX() {
          // 在组件实例对象中无x，会向VueComponent的原型对象查找
          // VueComponent的原型对象也无x，会向Vue的原型对象查找
          // 最终在Vue的原型对象中查找到x
          console.log('School  x: ', this.x)
        },
      },
    })

    const vm = new Vue({
      el: '#root',
      components: {
        school,
      }
    })
  </script>
</html>

在这里插入图片描述

2.6 单文件组件

单文件组件：一个文件中只包含一个组件。

在单文件组件中，一个组件就是一个.vue文件。

vue组件文件的命名
使用小写单词：

  1. 单个单词：school.vue
  2. 多个单词：my-school.vue

使用首字母大写单词：(推荐)
这种写法与vue开发者工具显示的组件名一致。

  1. 单个单词：School.vue
  2. 多个单词：MySchool.vue

2.6.1 单文件组件代码的书写位置

<template>
  <!-- vue2中组件结构中只能有一个根节点 -->
  <div>
    <!-- 组件的结构 -->
  </div>
</template>

<script>
  // 组件交互相关的代码
</script>

<style>
  /* 组件的样式 */
</style>

.vue文件中，代码高亮显示插件
在这里插入图片描述
安装该插件后，骨架代码快速生成：<v + 回车

2.6.2 组件js代码的暴露

1.分别暴露

<script>
  export 需要暴露的方法或变量
</script>

2.统一暴露

<script>
  export {
	需要暴露的方法或变量,
	...
  }
</script>

3.默认暴露

当暴露的东西为一个时，一般使用默认暴露，引入时直接import xxx from xxx

<script>
  export default 需要暴露的方法或变量
</script>

2.6.3 组件的创建与使用

School组件：

<template>
  <div class="demo">
    <h2>学校名: {{name}}</h2>
    <h2>学校地址：{{address}}</h2>
    <button @click="showX">点击打印X</button>
  </div>
</template>

<script>
// 由于只需要向外暴露一个VueComponent
// 所以使用默认暴露
// 由于vue.extend()可以省略
// 可以直接写组件的配置对象
// 注册组件使用组件时，vue.extend()会自动调用
export default {
  name: 'School',
  data() {
    return {
      name: 'SGG',
      address: 'Beijing'
    }
  },
  methods: {
    showX() {
      console.log('School  x: ', this.x)
    }
  }
}
</script>

<style>
.demo {
  background-color: orange;
}
</style>

Student组件：

<template>
  <div>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生年龄：{{age}}</h2>
  </div>
</template>

<script>
export default {
  name: 'Student',
  data() {
    return {
      name: '张三',
      age: 18
    }
  }
}
</script>

<style>
</style>

App组件：

<template>
	<div>
		<School></School>
		<Student></Student>
	</div>
</template>

<script>
	//引入组件
	import School from './School.vue'
	import Student from './Student.vue'

	export default {
		name:'App',
		components:{
			School,
			Student
		}
	}
</script>

编写入口文件main.js，创建vue实例，注册App组件：

// 导入App组件
import App from './App.vue'

new Vue({
	el:'#root',
	template:`<App></App>`,
	components:{App},
})

编写页面，提供容器使用组件：

当前这个页面在浏览器不能正常运行，因为main.js中的import为es6语法，浏览器不支持解析es6语法。需要使用脚手架。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>练习一下单文件组件的语法</title>
	</head>
	<body>
		<!-- 准备一个容器 -->
		<div id="root"></div>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="./main.js"></script>
	</body>
</html>
小炜1128
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue--vuex详解
weixin_30721077的博客
05-08 160
　　Vuex 　　　　什么是Vuex？ 　　　　　　官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 　　　　　　个人理解：Vuex是用来管理组件之间通信的一个插件 　　　　为什么要用Vuex？ 　　　　　　我们知道组件之间是独立的，组件之间想要实现通信，我目前知道的就只...
X-UA-Compatible
qq_42488518的博客
10-18 206
X-UA-Compatible作用： 作用：解决网页之间兼容性设计的麻烦 例如：<span style="color:#000000"><meta http-equiv="X-UA-Compatible" content="IE=7" /></span><span style="color:#000000"><meta http-equiv="X-UA-Compatible" content="IE=edge" /></span>对于c
X-UA-compatible浅谈
anshaobiao6449的博客
12-07 59
最近了解到svg，原来它出现之前好几年，微软已经推出了vml，但是那时候却被人吐槽无数，看来过早的创新也是失败的原因之一呢~ 为什么谈到这个话题呢？因为IE史上有一个特别奇怪的浏览器IE8，它及不兼容VML又不兼容SVG，因此我们想用VML或者SVG的时候遇到IE8我们只能选在降级或升级，怎么做到呢？ 加上短短一句话 <meta http-equiv="X-UA-Comp...
HTML Meta中添加X-UA-Compatible有什么作用？
culous的博客
12-20 699
Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染<meta http-equiv="X-UA-Compatible" content="IE=edge">使用以下代码强制 IE 使用 Chrome Frame 渲染<meta http-equiv="X-UA-
meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" 的意义
菜菜的博客
04-20 932
< meta http-equiv = “X-UA-Compatible” content = “IE=edge,chrome=1” />的意义 X-UA-Compatible是神马？ X-UA-Compatible是IE8的一个专有属性，它告诉IE8采用何种IE版本去渲染网页，在html的标签中使用。可以在微软官方文档获取更多介绍。 <meta http-equiv="X-...
vue组件如何被其他项目引用
01-19
自己写的vue组件怎么才能让其他人引用呢，或者是共用组件如何让其他项目引用。本文就粗细的介绍下，如有疑问欢迎共同讨论。在这里你能了解下如下知识点： 1. 如何发布一个包到npmjs仓库上 2.如何引用一个npm包，尤其...
VUE组件入门
04-10
VUE组件入门，很基础的ppt，入门的同学可以看下哦！！
vue组件培训ppt
01-09
vue组件培训ppt VUE组件基础、组件交互、路由、vuex等
vue 组件简介
10-15
主要介绍了vue组件的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
vue组件编写之todolist组件实例详解
08-28
Vue 组件编写之 TodoList 组件实例详解 本文将详细介绍 Vue 组件编写之 TodoList 组件的实例讲解，主要包括组件注册、模板编写、样式设计、事件处理等方面的知识点。 组件注册 在 Vue 中，组件注册是指将一个组件...
[Vue]自定义指令
最新发布
emmmm.....
10-10 3165
1. 自定义指令 1.1 语法 1.2 自定义指令的参数 2. 自定义指令实现数值放大10倍 2.1 查看自定义指令的参数 2.2 需求的实现 2.3 自定义指令调用的时机 2.3.1 指令与元素成功绑定时（初始化页面） 2.3.2 所在的模板被重新解析时 3. 自定义指令让其所绑定的input元素默认获取焦点 3.1 需求实现 3.2 需求未实现的解释 3.3 对象形式自定义指令 3.4 对象形式自定义指令实现需求 4. 自定义指令注意点 4.1 指令名多个单词之间使用短线符连接 4.2 自定义指令中的t
Vue 组件化开发
HTML_Z的博客
04-12 737
Vue 组件化开发
写给对<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">迷惑不解的小伙伴
灼灼其华的博客
11-02 3万+
1、X-UA-Compatible X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。 通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。 在网页中指定的模式优先权高于服务器中(通过HTTP Header)所指定的模式。 兼容性模式设置优先级： meta tag > http header
meta中的http-equiv = "X-UA-Compatible"
前端知识总结
09-07 1万+
       今天看到&lt;meta http-equiv = "X-UA-Compatible" content="ie=edge"&gt;这个标签感到很困惑，按捺不住好奇心去查了下，总结了几篇讲的比较好的文章，写下一些感悟。 百度经验：https://jingyan.baidu.com/article/bea41d43a40910b4c51be60a.html ； 长江之友博客文：htt...
解决vue在ie9中的兼容问题
热门推荐
landl_ww的博客
01-24 4万+
vue 解决ie9的兼容问题 当vue遇见ie9的时候，部署到服务器之后，打开居然是一片空白，vue是支持ie9的，这个时候就需要来一波兼容了 参考尤大的解答 https://github.com/vuejs-templates/webpack/issues/260 首先npm install –save babel-polyfill 然后在main.js中的最前面引入babel-po
使用X-UA-Compatible来设置IE浏览器兼容模式
z69183787的专栏
12-20 1万+
x-ua-compatible 用来指定IE浏览器解析编译页面的model x-ua-compatible 头标签大小写不敏感，必须用在 head 中，必须在除 title 外的其他 meta 之前使用。 1、使用一行代码来指定浏览器使用特定的文档模式。   2、在一些情况下，我们需要限定浏览器对文档的解析到某一特定版本，或者将浏览器
< meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />的意义
weixin_33973600的博客
04-23 332
X-UA-Compatible是神马？X-UA-Compatible是IE8的一个专有<meta>属性，它告诉IE8采用何种IE版本去渲染网页，在html的<head>标签中使用。可以在微软官方文档获取更多介绍。 为什么要用X-UA-Compatible？ 在IE8刚推出的时候，很多网页由于重构的问题，无法适应较高级的浏览器，所以使用X-UA-Compatib...
vue 解决ie11兼容问题
fighting2020的博客
10-29 3万+
一、ie11打开vue2.0项目空白,控制台报错 vuex requires a Promise polyfill in this browser ①npm install --save-dev babel-polyfill ②在main.js中引入 import &amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;babel-polyfill&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; ③在build文件夹中webpa
<meta http-equiv="X-UA-Compatible" content="IE=edge" />详解
wjxbj的博客
11-20 4414
        X-UA-Compatible是针对IE8新加的一个设置，对于IE8之外的浏览器是不识别的，这个区别与content="IE=7"在无论页面是否包含&lt;!DOCTYPE&gt;指令，都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循&lt;!DOCTYPE&gt;指令。对于多数网站来说，它...
Vue组件精讲
《Vue组件精讲》是一本关于Vue.js框架的前端开发技术小册，主要介绍了Vue.js组件的核心思想和使用技巧。作者在本小册中着重分享了自己在3年的Vue.js开发和两年的iView开源项目中所积累和沉淀的关于Vue.js组件的见解...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值