• Vue组件化编程开发

    目录

    一.模块

    二.组件 （快捷键< + v + 回车 生成单组件模板）

    三.非单文件组件

    四.单文件组件:

    首先理解模块和组件的基本概念:

    一.模块

    1.理解:向外提供特定功能的js程序，一般就是一个js文件

    2.为什么: js文件很多很复杂

    3.作用:复用js, 简化js的编写，提高js运行效率

    模块化: 当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用。

    二.组件 （快捷键< +v +  回车 生成单组件模板）

    组件的定义: 实现应用中局部功能代码和资源的集合

    组件化:当应用中的功能都是以多组件的方式来编写的，那这个应用就是一个组件化的应用。

    解决传统js编写存在的问题:

    1.依赖关系混乱，不好维护。

    2.代码复用率不高。

     先看看非单文件组件的使用，以便于理解单组件开发的优势：

    三.非单文件组件

    1.基本使用:

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

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

    二、注册组件

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

     一、如何定义一个组件？

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

            区别如下：

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

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

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

    二、如何注册组件？

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

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

    三、编写组件标签：(标签执行时会自动创建VueComponents实例)

               

    For example:

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>基本使用title>
    6. 		<script type="text/javascript" src="../js/vue.js">script>
    7. 	head>
    8. 	<body>
    9. 		
    10. 		<div id="root">
    11. 			<hello>hello>
    12. 			<hr>
    13. 			<h1>{{msg}}h1>
    14. 			<hr>
    15. 			
    16. 			<school>school>
    17. 			<hr>
    18. 			
    19. 			<student>student>
    20. 		div>
    21.  
    22. 		<div id="root2">
    23. 			<hello>hello>
    24. 		div>
    25. 	body>
    26.  
    27. 	<script type="text/javascript">
    28. 		Vue.config.productionTip = false
    29.  
    30. 		//第一步：创建school组件
    31. 		const school = Vue.extend({
    32. 			template:`
    33. 				
    34. 					
      学校名称：{{schoolName}}
    35. 					
      学校地址：{{address}}
    36. 						
    37.
  • `,
  • // el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
  • data(){
  • return {
  • schoolName:'尚硅谷',
  • address:'北京昌平'
  • }
  • },
  • methods: {
  • showName(){
  • alert(this.schoolName)
  • }
  • },
  • })
  • //第一步：创建student组件
  • const student = Vue.extend({
  • template:`

  • 学生姓名：{{studentName}}

  • 学生年龄：{{age}}

  • `,
  • data(){
  • return {
  • studentName:'张三',
  • age:18
  • }
  • }
  • })
  • //第一步：创建hello组件
  • const hello = Vue.extend({
  • template:`

  • 你好啊！{{name}}

  • `,
  • 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.需要注意的点

    1.关于组件名:

         一个单词组成：

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

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

         多个单词组成：

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

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

        备注：

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

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

    2.关于组件标签:

           第一种写法：

           第二种写法：

           备注：不用使用脚手架时，会导致后续组件不能渲染。

    3.一个简写方式：

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

    3.关于VueComponent:(了解即可)

    关于VueComponent：

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

    2.我们只需要写或，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。

    For exampel:

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>VueComponenttitle>
    6. 		<script type="text/javascript" src="../js/vue.js">script>
    7. 	head>
    8. 	<body>
    9. 		
    10. 		<div id="root">
    11. 			<school>school>
    12. 			<hello>hello>
    13. 		div>
    14. 	body>
    15.  
    16. 	<script type="text/javascript">
    17. 		Vue.config.productionTip = false
    18. 		
    19. 		//定义school组件
    20. 		const school = Vue.extend({
    21. 			name:'school',
    22. 			template:`
    23. 				
    24. 					
      学校名称：{{name}}
      	
    25. 					
      学校地址：{{address}}
      	
    26. 					
    27.
  • `,
  • data(){
  • return {
  • name:'尚硅谷',
  • address:'北京'
  • }
  • },
  • methods: {
  • showName(){
  • console.log('showName',this)
  • }
  • },
  • })
  • const test = Vue.extend({
  • template:`atguigu`
  • })
  • //定义hello组件
  • const hello = Vue.extend({
  • template:`

  • {{msg}}

  • `,
  • data(){
  • return {
  • msg:'你好啊！'
  • }
  • },
  • components:{test}
  • })
  • // console.log('@',school)
  • // console.log('#',hello)
  • //创建vm
  • const vm = new Vue({
  • el:'#root',
  • components:{school,hello}
  • })
  • script>
  • html>

    • 4.一个重要的内置关系

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

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

    四.单文件组件:

    1.单组件结构:

     .vue 文件 将文件分为了三部分

    ①结构