【Vue2-尚硅谷二】Vue组件化编程

最新推荐文章于 2024-11-12 20:45:00 发布
最新推荐文章于 2024-11-12 20:45:00 发布
阅读量619 收藏
点赞数
分类专栏： 框架 前端 文章标签： vue.js 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xbd_zc/article/details/124428279
版权
本文详细介绍了Vue的组件化编程，包括非单文件组件和单文件组件的定义、注册和使用。组件化有助于代码的维护和复用，强调了组件名的规范，如首字母大写、使用短横线或驼峰命名。此外，还讨论了VueComponent与Vue实例的关系，以及组件的嵌套。最后展示了单文件组件（School.vue, Student.vue, App.vue）的定义和组织方式。
摘要由CSDN通过智能技术生成

二,Vue组件化编程

文章目录

1,非单文件组件(一个文件中包含了N个组件)

1.1,对组件的理解

传统方式存在: 依赖关系混乱, 不好维护, 代码复用率不高的问题

image-20220423140956496

组件方式, 便于维护, 容易复用

image-20220423141452448

1.2,组件的定义

实现应用中 局部 功能 代码(css,html,js…) 和 资源(mp3.mp4…) 的集合

image-20220423141753833

1.3,基本使用

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>

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <title>基本使用</title>
      <script type="text/javascript" src="../js/vue.js"></script>
   </head>
   <body>

      <!-- 准备好一个容器-->
      <div id="root">
         <hello></hello>
         <hr>
         <h1>{{msg}}</h1>
         <hr>
         <!-- 第三步：编写组件标签 -->
         <school></school>
         <hr>
         <!-- 第三步：编写组件标签 -->
         <student></student>
      </div>

      <div id="root2">
         <hello></hello>
      </div>
   </body>

   <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',hello)

      //创建vm
      new Vue({
         el:'#root',
         data:{
            msg:'你好啊！'
         },
         //第二步：注册组件（局部注册）
         components:{
            school,
            student
         }
      })

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

1.4,注意点(组件名)

  • 1.组件名

    • 1个单词的, 直接写,

      • 可以写首字母大小/全小写: school, School(一般用这个)

    • 多个单词 ,

      • 用-连接, 必须用引号: ‘my-school’
      • 官方推荐驼峰: MySchool (一般用这个) ==前提必须使用脚手架

    • 起名

      • (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
      • (2).可以使用name配置项指定组件在开发者工具中呈现的名字。

  • 2.关于组件标签:

    • 第一种写法：
    • 第二种写法：
    • 备注：不用使用脚手架时，会导致后续组件不能渲染。

  • 3.一个简写方式：

    • const school = Vue.extend(options) 可简写为：const school = options
例子
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <title>几个注意点</title>
      <script type="text/javascript" src="../js/vue.js"></script>
   </head>
   <body>
      <!-- 准备好一个容器-->
      <div id="root">
         <h1>{{msg}}</h1>
         <school></school>
      </div>
   </body>

   <script type="text/javascript">
      Vue.config.productionTip = false
      
      //定义组件
      const s = Vue.extend({
         name:'atguigu',
         template:`
            <div>
               <h2>学校名称：{{name}}</h2> 
               <h2>学校地址：{{address}}</h2>  
            </div>
         `,
         data(){
            return {
               name:'尚硅谷',
               address:'北京'
            }
         }
      })

      new Vue({
         el:'#root',
         data:{
            msg:'欢迎学习Vue!'
         },
         components:{
            school:s
         }
      })
   </script>
</html>

1.5,组件的嵌套

  • 定义: const s= Vue.extend({})
  • 注册:
    • 局部components:{student:s}, 或者跟定义组件名相同components:{s}
    • 全局Vue.component("student",s)
  • 使用:<student></student>

image-20220423151823834

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <title>组件的嵌套</title>
      <!-- 引入Vue -->
      <script type="text/javascript" src="../js/vue.js"></script>
   </head>
   <body>
      <!-- 准备好一个容器-->
      <div id="root">
         
      </div>
   </body>

   <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>
</html>

1.6,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。

image-20220423153637908

1.7,Vue和VueComponent的关系

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

原型和原型链
//定义一个构造函数
 function Demo(){
   this.a = 1
   this.b = 2
}
//创建一个Demo的实例对象
const d = new Demo()

console.log(Demo.prototype) //显示原型属性

console.log(d.__proto__) //隐式原型属性

console.log(Demo.prototype === d.__proto__)

//程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
Demo.prototype.x = 99

console.log('@',d)
  • 显示原型属性和隐式原型属性 共同指向了 原型对象
  • 通过隐式原型链获取原型的属性，从自身沿着原型链一直找直到window的原型为空
Vue和VueComponent的关系

实例的隐式原型属性，永远指向自己缔造者的原型对象

image-20220423160511276

  • 一个重要的内置关系：
    • VueComponent.prototype.proto === Vue.prototype
  • 为什么要有这个关系：
    • 让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

2,单文件组件(一个文件中只有1个组件)

2.1,定义组件

School.vue
<template>
 <div class="demo">
  <h2>学校名称：{{name}}</h2>
  <h2>学校地址：{{address}}</h2>
  <button @click="showName">点我提示学校名</button> 
 </div>
</template>

<script>
  export default {
  name:'School',
  data(){
   return {
    name:'尚硅谷',
    address:'北京昌平'
   }
  },
  methods: {
   showName(){
    alert(this.name)
   }
  },
 }
</script>

<style>
 .demo{
  background-color: orange;
 }
</style>
Student.vue
<template>
 <div>
  <h2>学生姓名：{{name}}</h2>
  <h2>学生年龄：{{age}}</h2>
 </div>
</template>

<script>
  export default {
  name:'Student',
  data(){
   return {
    name:'张三',
    age:18
   }
  }
 }
</script>
App.vue(汇总所有组件)
<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(打包入口文件)
import App from './App.vue'

new Vue({
   el:'#root',
   template:`<App></App>`,
   components:{App},
})
index.html(主页)
<!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>
xbd_zc
关注
专栏目录
尚硅谷Vue2项目尚品汇笔记及技巧汇总
With_Sunflower的博客
11-18 723
B站尚硅谷Vue2前台项目尚品汇笔记及技巧汇总，整理自用，部分内容摘自老师上课所记笔记哈~
B站尚硅谷---vue2实战项目《尚品汇》---第一天
m0_64804076的博客
11-30 757
B站尚硅谷---vue2实战项目《尚品汇》---第一天
vue2组件化编程
XCXLOVE_的博客
04-12 1029
1.定义组件●使用Vue.extend(options)创建，其中options和new Vue(options)时传入的options几乎一样，但也有点区别●el不要写，因为最终所有的组件都要经过一个vm的管理，由vm中的el才决定服务哪个容器●data必须写成函数，避免组件被复用时，数据存在引用关系2.注册组件●局部注册：new Vue()的时候options传入components选项●全局注册：Vue.component('组件名',组件)3使用组件。
Vue2_尚品汇前端项目day13超详细笔记_尚硅谷
weixin_50637054的博客
03-16 197
Vue2_尚品汇前端项目day13超详细笔记_尚硅谷
【尚硅谷】Vue2.x核心学习笔记--渐进式的JS框架
mmklo的博客
06-27 490
官网地址：https://cn.vuejs.org/Vue的作者尤雨溪在开源此框架的时候，就说Vue是借鉴了angular的模板和数据绑定技术和react的虚拟dom以及组件化 实现数据的双向绑定的案例【引入Vue】 当然也可以下载Vue的js文件，通过script标签来引入Vue【官网案例】Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统： 【案例解析】：引入Vue.js创建Vue实例对象 一般使用Const 声明一个常量 双向绑定数据：显示数据：{{xxx}}理解V
vue-3d-model-Vue组件中的3D模型查看器。-Vue.js开发
05-27
vue-3d-model vue.js 3D model viewer component, based on threejs, inspired by model-tag 一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，支持多种格式的模型。...
vue-audio-visual-Vue HTML5音频可视化组件。-Vue.js开发
05-27
vue视听Vue HTML5音频可视化组件概述安装和设置API通用道具AvLine道具AvBars道具AvCircle道具AvWavef vue视听Vue HTML5音频...它提供了多个Vue组件，这些组件允许为“音频” HTML元素绘制光亮的外观。 有一个DEMO ava
vue 画布 vue-fabric-drawing
02-20
1. **Vue 组件化思想**：Vue.js 的核心特性是组件化，Vue Fabric Drawing 将画布功能封装成一个可复用的 Vue 组件。开发者可以像使用其他 Vue 组件一样，在自己的项目中轻松引入并配置这个画布组件。 2. **Fabric....
vue-styled-components-example:带Vue的样式化组件示例
03-11
带模板的Vue组件 // ./src/components/PageTitle.vue [removed] import styled from 'vue-styled-components' const PageTitle = styled.h1` font-size: 30px; color: blue; ` export default { name: 'page-...
vue-pivot-table-数据透视表的vue组件-Vue.js开发
05-27
vue-pivot-table数据透视表Live演示（jsfiddle）的vue组件安装npm install --save @ marketconnect / vue-pivot-table组件此项目vue-pivot-table数据透视表Live演示（jsfiddle）的vue组件npm install --save @ ...
尚硅谷vue前端项目心得2
im_joy的博客
01-16 675
Day 3,4 (22-42) 2.1 演示卡顿现象引入防抖与节流 正常：事件触发非常频繁，而且每一次的触发，回调函数都要去执行（如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿） 防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发,只会执行最后一次 节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发 /** * 正常情况（用户慢慢操作）：鼠标进入，每个一级分类h3，都会触发鼠标进入事
初识Vue
李公子的博客
07-25 385
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法 3.root容器里的代码被称为【Vue模板】 4.Vue实例和容器是一一对应的 5.真实开发中只有一个Vue实例，并且会配合着组件一起使用 6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性 7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新 <!DOCTYPE html> &
尚硅谷 张天禹老师vue2笔记（方便自己查阅）
Maynor的博客
10-19 4802
视频链接： https://www.bilibili.com/video/BV1Zy4y1K7SH?p=2&spm_id_from=pageDriver 尚硅谷 张天禹老师vue2笔记 脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存
Vue一个案例引发的「编程式」创建组件
weixin_34400525的博客
04-03 237
在项目的开发过程中「动态添加标签」，「动态添加属性」，「或者动态添加关键词」，是我们在项目中经常遇到的一个场景。 最近在做项目时，就遇到了动态添加属性的案例。 通常在单文件组件的开发模式中，我们会以如下的方式创建组件。 <template> <span></span> </template> <script> export defau...
Vue全家桶
caronil的博客
03-27 1904
Vue 技术栈(全家桶) 文章目录Vue 技术栈(全家桶)第 1 章：Vue 核心1.1. Vue 简介1.1.1. 官网1.1.2. 介绍与描述1.1.3. Vue 的特点1.1.4. 与其它 JS 框架的关联1.1.5. Vue 周边库1.2. 初识 Vue1.3. 模板语法1.3.1. 效果1.3.2. 模板的理解1.3.3. 插值语法1.3.4. 指令语法1.4 数据绑定1.4.1. 效果1.4.2. 单向数据绑定1.4.3. 双向数据绑定1.5. MVVM 模型1.6. 事件处理1.6.1. 效果
尚硅谷vue前端项目心得5
im_joy的博客
01-21 351
p93-112 5.1 trade结算页面 <div class="address clearFix" v-for="(address,index) in addressInfo" :key="index"> <span class="username " :class="{selected:address.isDefault==1}">{{address.consignee}}</span> <p @click="changeDefault(add
Vue中的常用指令
m0_62388400的博客
11-12 712
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
第四十二章 Vue中使用mutations修改Vuex仓库数据
Calvin的博客
11-11 622
在Vue中，明确vuex同样遵循单向数据流，即组件中不能直接修改仓库的数据，我们可以通过 strict: true 可以开启严格模式，防止在组件中非法修改仓库数据。(错误写法)在Vue中，组件想要修改Vuex的数据，可以通过Vue提供的mutations来实现。本章节我们将通过掌握mutations的操作流程，来修改state数据。(state数据的修改只能通过mutations )1.2. mutations修改数据基本步骤。
『VUE』24. 组件事件之子组件传递数据给父组件（详细图文注释）
最新发布
MZH
11-12 521
『VUE』24. 组件事件之子组件传递数据给父组件（详细图文注释）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值