Vue组件化编程

@小森

发布于 2024-07-25 15:20:28

2120

文章被收录于专栏：xiaosenxiaosen

模块与组件、模块化与组件化

模块

理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件
js 文件很多很复杂
作用: 复用 js, 简化 js 的编写, 提高 js 运行效率

组件

理解:用来实现应用中局部(特定)功能效果的代码(html/css/js) 和资源(mp3/mp4/ttf.zip[字体])的集合

为什么: 一个界面的功能很复杂
作用: 复用编码, 简化项目编码, 提高运行效率

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

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

非单文件组件：通俗说，一个文件中包含n个组件。此文件指HTML文件

Vue中使用组件的三大步骤

一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)

一、如何定义一个组件？

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

el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。

如何注册组件？ 1.局部注册：靠new Vue的时候传入components选项 2.全局注册：靠Vue.component('组件名',组件)

编写组件标签：

<!-- 准备好一个容器-->
<div id="root">
   <hello></hello>
   <hr>
   <h1>{{msg}}</h1>
   <hr>
   <!-- 第三步：编写组件标签 -->
   <school></school>
   <hr>
   <!-- 第三步：编写组件标签 -->
   <student></student>
</div>
<div id="root2">
   <hello></hello>
</div>
<script type="text/javascript">
   Vue.config.productionTip = false
   //第一步：创建school组件
   const school = Vue.extend({
       template:`
       <div class="demo">
       <h2>学校名称：{{schoolName}}</h2>
       <h2>学校地址：{{address}}</h2>
       <button @click="showName">点我提示学校名</button>
       </div>
       `,
       // el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管
理，由vm决定服务于哪个容器。
       data(){
           return {
               schoolName:'济南市章丘区',
               address:'齐鲁师范学院'
          }
      },
       methods: {
           showName(){
               alert(this.schoolName)
            }
      },
  })
   //第一步：创建student组件
   const student = Vue.extend({
       template:`
       <div>
       <h2>学生姓名：{{studentName}}</h2>
       <h2>学生年龄：{{age}}</h2>
       </div>
       `,
       data(){
           return {
               studentName:'张三',
               age:18
          }
      }
  })
   //第一步：创建hello组件
   const hello = Vue.extend({
       template:`
       <div>
       <h2>你好啊！{{name}}</h2>
       </div>
       `,
       data(){
           return {
               name:'Tom'
          }
      }
  })
   //第二步：全局注册组件
   Vue.component(' ',hello)
   //创建vm
   new Vue({
       el:'#root',
       data:{
           msg:'你好啊！'
      },
       //第二步：注册组件（局部注册）
       components:{
           school,
           student
      }
  })
   new Vue({
       el:'#root2',
  })
</script>

组件几个注意点

关于组件名: 一个单词组成：第一种写法(首字母小写)：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

组件的嵌套

<script type="text/javascript">
   Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
   //定义student组件
   const student = Vue.extend({
       name:'student',
       template:`
           <div>
           <h2>学生姓名：{{name}}</h2>
           <h2>学生年龄：{{age}}</h2>
           </div>
       `,
       data(){
           return {
               name:'尚硅谷',
               age:18
          }
      }
  })
   //定义school组件
   const school = Vue.extend({
       name:'school',
       template:`
           <div>
           <h2>学校名称：{{name}}</h2>
           <h2>学校地址：{{address}}</h2>
           <student></student>
        </div>
       `,
       data(){
           return {
               name:'尚硅谷',
               address:'北京'
          }
      },
       //注册组件（局部）
       components:{
           student
      }
  })
   //定义hello组件
   const hello = Vue.extend({
       template:`<h1>{{msg}}</h1>`,
       data(){
           return {
               msg:'欢迎来到尚硅谷学习！'
          }
      }
  })
   //定义app组件
   const app = Vue.extend({
       template:`
           <div>
           <hello></hello>
           <school></school>
           </div>
       `,
       components:{
           school,
           hello
      }
  })
   //创建vm
   new Vue({
       template:'<app></app>',
       el:'#root',
       //注册组件（局部）
       components:{app}
  })
</script>

VueComponent

关于VueComponent：

1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2.我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

总结 1. 模板编写没有提示 2. 没有构建过程, 无法将 ES6 转换成 ES5 3. 不支持组件的 CSS 4. 真正开发中几乎不用

单文件组件

通俗说，一个文件中只包含1个组件。此文件指.vue文件 SPA（single-page application），只有一个HTML页面，通过路由实现页面内的局部切换，公共资源部分只加载一次。

一个.vue 文件的组成(3 个部分)

1. 模板页面

<template>
    页面模板
</template>

2. JS 模块对象

<script>
   export default {
   data() {return {}},
   methods: {},
   computed: {},
   components: {}
  }
</script>

3. 样式

基本使用 1. 引入组件 2. 映射成标签 3. 使用组件标签

// School.vue
<template>
   <!-- 组件的结构 -->
   <div class="demo">
       <h2>学校名称:{{name}}</h2>
       <h2>学校地址:{{address}}</h2>
   </div>
</template>
<script>
   //组件的交互代码
   export default {
       name:"School",
       data(){
           return {
               name:"高数",
               address:"济南历下利宝产业园"
          }
      }
  }
</script>
<style>
   /* 组件样式 */
   .demo{
       background-color: orange;
  }
</style>

// Student.vue
<template>
   <!-- 组件的结构 -->
   <div class="demo">
       <h2>学生姓名:{{name}}</h2>
       <h2>学校年龄:{{age}}</h2>
   </div>
</template>
<script>
   //组件的交互代码
   export default {
       name:"Student",
       data(){
           return {
               name:"小花",
               age:18
          }
      }
  }
</script>
<style>
   /* 组件样式 */
   .demo{
       background-color: orange;
  }
</style>

// APP.vue(总管)
<template>
   <div>
       <School></School>
       <Student></Student>
   </div>
</template>
<script>
   // 引入组件
   import School from './School'
   import Student from './Student'
   export default {
       name:'App',
       components:{
           School,
           Student
      }
  }
</script>


//main.js
import App from './App'
new Vue({
   el:"#root",
   template:`<App></App>`,
   components:{
       App
  }
})


<!--index.html-->
<!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 type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="./main.js"></script>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-07-14，如有侵权请联系 cloudcommunity@tencent.com 删除

容器