前端入门（三）Vue组件化编程、脚手架、插槽插件、存储、vuex、组件事件、动画、代理

已于 2023-12-01 16:51:53 修改
阅读量1.3k 收藏 18
点赞数 18
分类专栏： 前端 文章标签： vue.js 前端 javascript
于 2023-11-24 19:07:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baiduwaimai/article/details/134562521
版权

文章目录

Vue 组件化编程 - .vue文件

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

在这里插入图片描述
在这里插入图片描述

非单文件组件

一个组件文件中由多个其他组件构成，称为非单文件组件。

Vue使用组件的三大步骤：

  • 1、定义组件（创建组件）
  • 2、注册组件（Vue的components局部注册或者使用Vue.component(‘组件名’, 组件)）全局注册。
  • 3、使用组件（写组件标签）

1、创建组件
创建组件时，需要注意：

  • 不需要写el标签：el标签是将Vue实例与DOM元素绑定的，当你创建组件时，你并不知道需要将其用在哪里，因此不需要写el标签。
  • 组件的data属性需要写成函数式的：因为一个组件可能在多个地方使用，如果写为对象式的，各个组件之间的数据变化会相互影响。
  • 使用Vue.extend({})创建组件，在template属性中，使用反引号包裹HTML标签。
    在这里插入图片描述

在这里插入图片描述

2、注册组件
局部注册：在Vue实例的components属性中，标注上构建的组件。
在这里插入图片描述

使用`Vue.componet(‘组件名’, 组件)；可以注册全局组件，即所有的Vue实例，尽管在components属性中没声明该组件，也可直接使用。
在这里插入图片描述

3、使用组件，写组件标签。
在这里插入图片描述

组件的注意点

在这里插入图片描述

组件嵌套

组件可以嵌套使用。注册给谁的组件，就可以在它的template属性中应用这个组件标签。
在这里插入图片描述

Vue实例对象和VueComponent实例对象

以定义的school组件为例：

  • 1、当我们使用school标签时，本质上是调用了VueComponent构造函数，该构造函数是Vue.extend生成的。
  • 2、当使用school标签时，Vue框架解析时会帮助创建school组件的实例对象，方式就是执行new VueComponent(options)
  • 3、特别注意，每次调用Vue.extend，返回的都有一个全新的VueComponent对象。
  • 4、关于this指向，组件配置中：data函数、methods中的函数，watch、computed函数，它们的this均是VueComponent实例对象。而在new Vue(options)配置中，data函数、methods中的函数，watch、computed函数，它们的this均是Vue实例对象
  • 5、根组件Vue实例对象会有$children属性，其中就是VueComponent实例对象数组。
  • 6、Vue实例对象和VueComponent实例对象在创建时接收的options选项，除了Vue实例可以使用el 绑定具体的DOM标签外，其余都一样。

在这里插入图片描述

Js对象原型与原型链

JavaScript 是一种基于原型的语言 (prototype-based language)，每个对象拥有一个原型对象，对象以其原型为模板，从原型继承方法和属性，这些属性和方法定义在对象的构造器函数的 prototype 属性上，而非对象实例本身。

每个Js对象都会有一个名为__proto__的内部属性，该属性指向当前对象的原型对象。在Js中，当我们访问一个对象的某个属性时，如果该对象没有这个属性，Js语法引擎就会沿着该对象的原型链（在对象的__proto__上找）向上查找，直到找到该属性为止。在查找对象属性时，通过__proto__查找原型的属性这个过程，就用到原型链。

当然在Js对象中，根原型为Object，而Object的__proto__是为null的。

原型属性又可分为显示原型属性和隐式原型属性。

  • 显示原型属性访问：构造函数名.prototype
  • 隐式原型属性访问：实例对象名.__proto__
  • 由这两种方式访问到的原型对象是等价的，即指向的是同一个原型对象。构造函数名.prototype === 实例对象名.__proto__
  • 由原型链的属性访问方式可知，如果给原型对象添加一个属性x = 99，那么可以由实例对象d的原型对象属性访问它，即d.__proto__.x，实际上对于__proto__的访问是Js执行引擎自动完成的，因此d.__proto__.x访问的方式，可以等价于使用d.x

在这里插入图片描述

Vue与VueComponent的重要内置关系

VueComponent（Vue组件）的原型对象的原型对象是Vue的原型对象
在这里插入图片描述

应用单文件组件构建

1、构建一个单文件组件
一个单.vue文件，基本结构如下;
在这里插入图片描述
定义好单文件组件是为了提供给 别的文件使用，因此需要使用export将该文件进行暴露。
export default {
……
}
实际上是一种简写，等价于：
const vc = Vue.extend(
{
……
}
)

export vc

在这里插入图片描述
2、入口Vue文件：App.vue
一般而言，Vue项目的根组件为App.vue，这里使用其他的组件。
组件化编程三步走：

  • 导入
  • 注册
  • 使用标签
    在这里插入图片描述
    3、入口js文件：main.js
    构建的根组件App.vue并没有使用，在main.js中构建App.vue的实例对象，使用el属性为其绑定DOM对象。

在这里插入图片描述

4、入口HTML文件：index.html
在这里插入图片描述

Vue脚手架 - vue.cli

项目文件结构

在这里插入图片描述

组件相关高级属性

引用名 - ref

ref属性被用来给元素或者子组件注册引用信息，类似id，但是id只能绑定DOM元素标签，而ref还可以绑定vue组件，相当于给组件或DOM元素标签起一个别名，便于在程序中引用，程序中可以通过this.$refs.xxx获取到Vue组件或DOM元素标签。

在这里插入图片描述

数据接入 - props

组件中的数据，在复用时可能各自不同，props属性用于给组件传递数据。

基本使用方法：
step1：在组件的props属性配置数据项的名称接收。
在这里插入图片描述

step2：在使用组件标签时传入数据项的数据值。

在这里插入图片描述

实际上props数据接收，有三种不同的方式：

  • 简单接收
  • 限制类型
  • 限制类型、必要性、并指定默认值

在这里插入图片描述
注意：props中指定数据项名称可能会与Vue组件中的data属性中的数据项名称产生冲突，从优先级上，是props优先级会更高一点。

一般而言，props承接的数据，我们希望将其转为Vue组件的data数据项的数据，那么根据优先级关系，可以将props属性传给data属性。

将props承接的数据传给data，另一方面是由于组件在使用过程中数据可能会更新，而props属性项数据是不允许更改的，只有组件自身的data属性项可更改

在这里插入图片描述

混入 - mixin

mixin：混入，可以把多个组件的共用的options配置，抽取出一个混入对象mixin，节约配置。

使用方式：
step1：定义混入：
例如：
{
data() : {……}
methods: {……}
……
}
上述这些公共配置，写成一个js代码文件：mixin.js，然后暴露。
在这里插入图片描述

step2：使用混入，例如：

  • 全局混入：Vue.mixin(xxx)
  • 局部混入：使用mixins属性，mixins: [‘xxx’]

在这里插入图片描述

关于mixins属性需要注意：

  • 1、如果混入mixin中定义的data属性项名与组件中的已经有的data名重名，则只保留组件已经有的data名。
  • 2、mounted()等生命周期方法中的操作，则会与组件已有的内容合并。

插槽 - slot

插槽的提出是为了实现合成组件，假定一个组件中大部分内容是固定的，仅有几个地方是需要变化更改的，我们就可以用插槽来代替这部分需要变化的，然后根据需要写相应的插槽组件

Slot的通俗理解是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中位置），当插槽也就是坑<slot name= ” mySlot ” >有命名时，组件标签中使用属性slot= ” mySlot ” 的元素就会替换该对应位置内容；

默认插槽

下边这个需求，大致上页面都是标题为某个内容的分类，内容呈现上有一些不同，这些不同就可以使用插槽进行抽象占位，那么整个页面就可以使用一个组件来复用。
在这里插入图片描述
step1：在每个分类内容组件Catetory中编写相应的DOM结构。
在这里插入图片描述
step2：Catetory中编写相应的DOM结构会放在Catetory的slot占位处，相当于将对应的DOM进行了替换。

在这里插入图片描述

具名插槽

当一个父组件需要组装多个动态组件时，就需要多个插槽，使用具名插槽用于区分。

需求：在内容底部，还有一部分超链接。那么就相当于是两部分动态内容，需要安置两个插槽。

所谓具名插槽就是在使用插值挖坑占位时，给坑起个名字，好方便后续根据名字来填坑。
在这里插入图片描述

step1：挖坑时，使用name属性，给插槽起名。
在这里插入图片描述

step2：填坑时，使用slot 属性，绑定name，进行结构替换。

注意：下边对于slot的绑定使用了两种方式：

  • 1、美食与游戏组件都是使用 slot = "name"进行绑定
  • 2、电影里边，使用template标签 + v-slot:name进行了绑定。

上边两种方式都可以，只不过 v-slot:name必须与template结合使用，template这一层标签在渲染时是不存的，仅作间隔占位用。

在这里插入图片描述

作用域插槽

当数据在组件自身（用于填坑的组件），但根据数据生成的结构需要组件的使用者来决定时，可以使用作用域插槽，从组件向插槽组件使用者发送数据。

step1：组件向slot标签传递数据

在这里插入图片描述
step2：组件使用者（填坑）时，使用template标签包裹要填的坑，并为template标签配置scope属性，接收数据。

在这里插入图片描述

插件

插件的功能是用于对Vue进行增强。
在这里插入图片描述
使用步骤：
step1：
定义plugins.js文件，定义install函数，表示是一个可安装的插件，在其中一般可以定义用于增强Vue的：

  • 1、全局过滤器
  • 2、全局自定义指令
  • 3、全局混入
  • 4、Vue原型方法
    在这里插入图片描述
    step2：在main.js中，导入plugins.js并使用Vue.use()。

在这里插入图片描述

step3：在Vue中使用定义的增强功能，比如上边在plugins.js中定义了Vue的原型方法hello，那么后边就可直接使用了。

在这里插入图片描述

存储

浏览器存储 - Window.sessionStorage与 Window.localStorage

在这里插入图片描述

Vuex - 共享状态管理

Vuex是专门在Vue中实现集中式状态（数据）管理的Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间的通信。

实际上，组件间通信也可以使用全局事件总线或者消息订阅 / 发布模型来实现。

全局事件总线与消息订阅，对于共享状态的处理不足之处在于组件之间的读和写，分别需要配套的绑定与触发，即一套配对的绑定与触发，只能完成数据的在组件之间的单向传递。

在这里插入图片描述
使用Vuex就是为了解决共享数据双向传递的问题。

共享数据状态存入Vuex中集中管理，Vuex组件与其他组件间是双向数据传递的。
在这里插入图片描述

Vuex工作原理

Vuex的工作原理如下图所示：

在这里插入图片描述
几个核心概念：

  • State：一个对象，提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，与data类似。
  • Actions：一个对象，组件dispatch（派遣）时间动作类型与参数，当然参数也可以来自后端的api，封装为一个action，在Actions对象上就会出现一个属性键值对，属性名为动作名，属性值为该动作对应的函数回调。
  • Mutations：一个对象，mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。Mutations看起来与Actions极其相似，以致于Actions看起来多余，实际上，Actions存在的目的就是为了拆分事件回调动作的构成步骤，因为该动作回调的参数可能来自于后端接口，需要分步构建，甚至可以在Action中再次通过dispatch函数，构建action。如果不需要后端介入动作构成或者分步构建，VueComponents也是可以直接绑定动作到Mutations上的，即可以在组件中直接使用commit，跳过actions！！！

上边都是在讲概念，实际开发时，上边三个对象都是vuex中store的属性对象，由store来管理

在这里插入图片描述

搭建Vuex环境

step1：安装vuex
如果Vue2，需要安装vuex3

npm i vuex@3

如果Vue3，直接默认安装vuex4

npm i vuex

step2：vuex本质上是一个插件，需要在main.js中引入并use。
在这里插入图片描述
step3：构建store

官方推荐的写法，在脚手架的src下，新建store文件夹，在该文件夹下，新建index.js文件，构建Store对象，配置核心的actions、mutations、state。
在这里插入图片描述

step4：在main.js构建Vue实例时，将store选项加入：

在这里插入图片描述

vuex - store使用案例

在这里插入图片描述

template：
在这里插入图片描述

store：
配置actions函数和mutations函数。
actions中使用commit，将动作传递到mutations，而mutations中的函数，会真正引起state的改名
在这里插入图片描述
组件中通过dispatch()函数，发起action。
在这里插入图片描述

在vuex工作原理部分也讲过，vue组件可以直接commit，跳过Action直接调用Mutations：
在这里插入图片描述

vuex开发者工具

vue的devtool是兼容vuex开发者工具的，不需要额外再下载插件。

开发者工具这里方便监测共享数据状态的变化。
在这里插入图片描述

getters

当state中的数据需要经过加工后再使用时，可以使用getters加工，state与getters之间的关系就类似于data与computed
定义在store/index.js：
在这里插入图片描述
使用：
getters与state一样，是$store的一个属性。

在这里插入图片描述

4个map方法

共享的state和getters常常需要在别的组件中进行数据展示。
在这里插入图片描述
为了方便页面上的编写，多个state或者getters，它们共有的公共前缀$store.state. 或$state.getters.，可以放在组件的计算属性中：

在这里插入图片描述
计算属性方便了页面template的编写，但是这些计算属性的生成能不能更简单一些呢？这时，就需要vuex提供的map方法了。

  • 1、mapState方法：用于帮助我们映射state中的数据为计算属性
  • 2、mapGetters方法：用于帮助我们映射getters中的数据为计算属性

借助这两个map方法可以很方便的帮助我们生成计算属性：
在这里插入图片描述
上图中mapState与mapGetters其实本质上是一样的，都是从$store.state. 或$state.getters.取出对应名字的state或者getters属性，然后将其转为计算属性。

注意：
（1）…语法。

… + 对象，可以将对象中的每一组key-value展开。

let obj2 = {x:100, y:200}
let obj = {
	a:1,
	...obj2,  // ...展开对象属性
	b:2
}

上边写法obj等价：

let obj = {
	a:1,
	x:100,
	y:200,
	b:2
}

（2）mapState()，会将输入的每一对k-v，转为对应的函数，因此mapState({he:'sum', xuexiao:'school', xueke: 'subject'})输出的是{he() {}, xuexiao() {}, subject() {}}
再使用...将对象展开，就自然成为了计算属性中的方法。

（3）当计算属性名与state或者getters中的属性同名时，可以使用数组写法，更加简洁。

在这里插入图片描述

  • 3、mapActions方法，用于帮助我们生成与actions对话的方法，即包含：$store.dispatch(xxx)的函数
  • 4、mapMutations方法：用于帮助我们生成与mutations对话的方法，即包含：$store.commit(xxx)的函数

在这里插入图片描述
在这里插入图片描述

需要注意的是：mapActions与mapMutations使用时，若需要传递参数，在template模板中绑定方法时就将参数传递好，否则默认的参数是事件对象

在这里插入图片描述

在这里插入图片描述

vuex模块化 - namespace

实际开发中，针对不同的业务，有不同的共享数据状态需要管理，使用模块化 + namespace命名空间的方式，可以让代码更加维护，业务数据分类更加明确，且各个业务之间的数据名称也不会产生冲突。

step1：在store文件夹下，根据业务类型，编写相应的vuex相关js文件，并暴露，在index.js中创建store时进行模块化管理。

在编写单个store的module配置时，除了actions、mutations、state、getters等的配置，一定要添加namespaced:true，这个属性默认为false，只有为true时，store中对于该module里边的配置才是可见的，否则在store中只能看到module名。
在这里插入图片描述
在index.js引入刚刚配置的store模块，在创建Store实例时，使用modules属性，指定模块名和实例。

在这里插入图片描述
step2：在组件中具体使用时，需要注意模块化的写法。

不借助map方法的模块化使用写法：需要注意state和其他类型引入的不同。
注意：模块名 + ‘/’ + 属性名，不可直接使用.来引用，因此下边使用了方括号[]的方式，避免了.后的内容有/。
在这里插入图片描述
借助map方法的模块化使用写法：只需要map()方法的第一个参数传入模块名即可。

在这里插入图片描述

组件事件

触发自定义事件 - emit()

以子组件向父组件传递数据为例：

如果不用自定义事件，可以通过父组件给子组件传递函数类型的props实现

step1：给子组件School绑定getSchoolName函数，相当于子组件的School的组件实例会有getSchoolName(）这个函数。

在这里插入图片描述
step2：用props承接父组件注册的getSchoolName。按钮注册点击事件，调用该函数，并将组件的name参数传递。

在这里插入图片描述

如果使用自定义事件来实现：
step1：通过v-on: 给子组件Student绑定自定义事件atguigu，该事件触发时，调用父组件的getStudentName()方法。
在这里插入图片描述
step2：使用this.$emit('atguigu', this.name) 触发子组件Student上的atguigu事件。
在这里插入图片描述
除了在子组件标签上使用v-on绑定，也可以通过代码实现：
先给子组件标签起一个引用名，随后在mounted()方法中，拿到该组件，给它绑定事件方法。

在这里插入图片描述

如果要保证事件只触发一次：
可以使用：
在这里插入图片描述

解绑自定义事件 - off() / destroy()

  • 1、this.$off()：如果指定参数，则 解绑对应事件（参数指定的），如果不指定参数，默认解绑所有的事件。
  • 2、在Vue生命周期中讲过，当组件销毁时，其上绑定的自定义事件以及子组件实例都会被销毁，因此使用this.$destroy()生命周期钩子函数，也可以实现自定义事件的解绑。
    在这里插入图片描述

自定义事件注意事项 - this指向与native

  • 1、注意自定义事件触发时的this指向，this可能指向的是事件的产生者，即子组件。

在这里插入图片描述
如果想this指向父组件，即该mounted声明周期的组件，要解决这个问题，有两种方式。

（1）使用箭头函数替换，function函数，箭头函数没有this指针，向外寻找mounted()函数的this，就是父组件了。

在这里插入图片描述

（2）将function的内容写为父组件的一个methods方法，那么this指向父组件。

在这里插入图片描述

  • 2、给组件绑定事件，默认绑定的是自定义事件，即便事件名与内置事件如click、keyup等同名。如果想为其绑定内置事件，应使用.native指明。

在这里插入图片描述

全局事件总线 - 实现任意组件间通信

如下图事件总线X，是各个组件之间的中介者，如果要实现组件A和D之间通信，可以在A中给X绑定一个自定义事件，那么X中的自定义事件触发时，就会触发A中的回调。此时在D组件中编写触发X该自定义事件的逻辑，并携带参数，那么就实现了D组件向A组件通信。
在这里插入图片描述
X应该具备两个特点：

  • 1、所有其他组件都可见
  • 2、实现$on、$off、$emit函数

$on、$off、$emit函数都是Vue实例或者组件上有的函数，因此上边两个特点，综合一句话就是X是一个所有其他组件都可见的Vue实例或者组件

为了使用所有其他组件都可见，可将X安装在Vue的原型对象上。
X本身可以是Vue实例，不妨直接使用Vue实例本身。

因此一般的事件总线安装方法如下：
在main.js创建Vue实例时，beforeCreate(）中，给Vue的原型对象设置$bus = this.
在这里插入图片描述
后续使用时，在mounted(）钩子处绑定，在beforeDestroy()钩子处解绑。
在这里插入图片描述

消息订阅与发布模型 - 基于pubsub实现

消息订阅与发布模型是一种理念，这里我们使用pubsub - js库提供的消息订阅与发布函数。

step 1：使用npm下载pubsub - js

npm i pubsub-js

step 2 : 消息订阅

接收数据的组件，使用pubsub订阅消息，指定消息主题名即可。

  • 1、import pubsub
  • 2、编写定义回调方法demo(），需要注意的时，回调方法中第一个参数为msgName即订阅主题名，而后边才是消息发布时携带的参数。
  • 3、在mounted中，指定主题名实现消息订阅，返回订阅id
  • 4、在beforeDestroy中，根据订阅时产生的订阅id，取消订阅

在这里插入图片描述
step3：消息发布
在这里插入图片描述

事件触发更新 - nextTick

语法：this.$nextTick(回调函数)
作用：在下一次DOM更新结束后执行其指定的回调。
使用场景：当事件触发更新视图时，可以放在nextTick()指定的回调函数中，因为事件触发时，Vue会等待触发函数内所有代码执行完毕，才进行DOM更新，如果你想要基于更新后的DOM视图进行操作，应该放在nextTick()指定的回调函数中，这样才可以使得你基于更新后的DOM操作生效。

this.$nextTick(回调函数)在实际开发中使用特别多。

过度与动画

配置代理解决跨域问题

什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不一同，即跨域
在这里插入图片描述

出现跨域的原因

跨域问题出于浏览器的同源策略限制。所谓同源策略（Same-Origin Policy）是一种基于安全考虑的限制，它的主要作用是防止一个网站访问另一个不同来源的网站的数据。同源策略限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互，即一个源的 JavaScript 脚本只能读取同一源的数据，而不能读取其他源的数据。
同源策略主要限制以下几个方面：

  • 1、Cookie、LocalStorage 和 IndexDB 等存储器：浏览器只允许网页访问自身网站的 Cookie、LocalStorage 和 IndexDB 等存储器，不能访问其他网站的存储器。

  • 2、Ajax 请求：XHR（XMLHttpRequest）对象只能访问同一域下的资源，不能访问其他域的资源。

  • 3、DOM 访问：JavaScript 脚本只能访问同一域下的 DOM 对象，不能访问其他域的 DOM 对象。

  • 4、Frame 和 iframe：包含不同源页面的 Frame 和 iframe 也受到同源策略的限制。

需要注意的是，同源策略只限制浏览器端的交互，而不限制服务器端的交互。因此，服务器端可以自由地访问和传输不同源的数据。

Vue对于跨域问题的解决 - 配置代理

服务器之间通信不受同源策略影响，即无代理问题，因此，通过将代理服务器启动在前端浏览器进程端口，浏览器请求同端口的代理服务器，代理服务器，再根据浏览器的请求转发给后端服务器，就可以解决请求跨域问题。

在这里插入图片描述

方式一

step1：在Vue-Cli中的Vue.config.js中开启Vue代理服务器：
需要注意的时，Vue代理服务器默认运行在前端浏览器同端口的进程，因此这里proxy属性配置的端口地址，实际上为后端服务器端口地址。
在这里插入图片描述
step2：向代理服务器发送请求，代理服务器会自动转发到后端服务器端口。
在这里插入图片描述
需要说明的是，这种方法有一些缺陷：

  • 1、假如要请求的资源，恰好是public中的资源，即该端口中已经有的资源，则就不会走代理服务器。那么假若恰好有与后端路径同名的public文件，则不会请求到后端。
  • 2、无法配置多个代理。
    在这里插入图片描述

方式二

在这里插入图片描述

椛丿未眠”
关注
  • 18
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue——组件化开发
鹿蹊zz的博客
08-09 2164
我们在复用组件的时候肯定希望，各自组件用各自的变量，如果确实需要都用一样的，可以全局组件注册，也可以是用vuex来进行状态管理。注意：组件就是一个vue实例，vue实例的属性，组件也可以有，例如data、methods、computed等。的count是各自用各自的，像局部变量一样有块级作用域，这个块级就是vue组件的作用域。​ 父组件访问子组件，有时候需要直接操作子组件的方法，或是属性，此时需要用到。​ 组件的思想是复用，定义组件当然是把通用的公共的东西抽出来复用。并不保证顺序，也不是响应式的。...
Vue组件开发（初学者也能学会）
rousongxiaobei_的博客
08-10 1423
<hr>二娃 ---{{age}}---{{shuxing}}<button @click="jiaoName">叫爷爷</button><button @click="dogxi">给爷爷送东西</button>
Vue组件化开发
qq_44706666的博客
05-22 855
标准、分治、复用、组合如何书写(vue 的规则)=> 书写一个对象表示一个组件=> 注意:-> 每一个组件对象必须要有一个 template 属性, 表示该组件的 html 结构部分-> 每一个组件可以有一个 name 属性, 表示该组件的内部名称, 是在 Vue 底层遍历组件的时候使用的-> 每一个组件可以书写的其他配置项(内容) 和 Vue 实例一模一样-> **每一个组件自己准备的 数据(属性,函数,侦听器,计算属性,...) 只能在自己组件内使用**
初识Vue-组件化开发（详解各个组件）
最新发布
百赢出品，必属精品
05-02 1474
Vue.js中的组件是可复用的Vue实例，具有自己的模板、逻辑和样式。组件允许开发者将页面分割成独立、可复用的模块，使得代码更易维护、可读性更高。每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。一个应用需要被挂载到一个 DOM 元素中。const RootComponent = { /* 选项 */ }// 创建一个Vue 应用。
Vue 组件化开发
二哈喇子！
07-12 3844
父子组件相互传数据
vue组件化编程-todoList案例.zip
07-14
在“vue组件化编程-todoList案例.zip”中，我们可以深入学习如何使用Vue进行组件化开发，构建一个基本的待办事项（Todo List）应用。这个案例将涵盖以下关键知识点： 1. **Vue组件基础**： - 组件是Vue的核心特性...
ppt课件-第5章 Vue组件.zip
03-22
在“第5章 Vue组件”中，我们将深入探讨Vue的核心特性之一——组件化开发。Vue组件是可复用的代码块，它们允许我们构建复杂的用户界面，就像拼接积木一样简单。下面，让我们详细解析这一章节的知识点。 首先，**...
vue.js 2.0 - 快速开始组件化开发应用的模板.zip
02-09
在这个“vue.js 2.0 - 快速开始组件化开发应用的模板.zip”压缩包中，包含了一个名为“vue-quickStart-master”的项目模板，旨在帮助开发者快速启动基于Vue 2.0的组件化开发流程。以下是关于Vue 2.0组件化开发的核心...
vue前端开发实战PPT
01-25
**第3章 Vue组件的属性和方法**: 组件是Vue的核心概念，允许我们将应用拆分为可复用的部分。这里可能涵盖组件的props（属性）和methods（方法），以及如何通过props传递数据和调用组件方法进行交互。 **第5章 组件...
Vue.js前端开发 PDF
05-30
Vue.js是目前非常流行的前端开发框架之一，被誉为前端三大框架之一，另外两个是React和Angular。Vue.js的设计理念是简洁、易用且高效，它旨在通过最小的学习曲线提供强大的功能，使得开发者能够快速构建交互式的用户...
vue--组件开发
小白小白从不日别的博客
01-25 2777
目录 一、button 组件开发 1.1 整体目标 1.2 确定组件API 1.3 编写测试基础Button 1.4 完成type配置 1.5 完成size配置 1.6 完成事件绑定 1.7 总结 二、Editor编辑器组件开发 2.1 确定基础API 2.2 编写测试基础Editor 2.3 完成v-model双向绑定 2.4 总结 一、button 组件开发 1.1 整体目标 了解组件开发的整体流程 掌握组件事件和标签事件的区别 掌握在组件上使用v-...
Vue基础知识总结 4：vue组件化开发
热门推荐
学Java，找哪吒
07-21 1万+
一、函数式编程 1、函数式编程简介 函数式编程是种编程方式，它将电脑运算视为函数的计算。函数编程语言最重要的基础是λ演算（lambda calculus），而且λ演算的函数可以接受函数当作输入（参数）和输出（返回值）。 和指令式编程相比，函数式编程强调函数的计算比指令的执行重要。 和过程化编程相比，函数式编程里函数的计算可随时调用。 filter函数自动过滤对象的所有元素，返回true才会存入指定对象； Reduce函数对数组内部的所有元素进行汇总； 2、代码实例 <!DOCTYPE
【Vue】Vite 组件化开发
懂得一千零一种,赋予你失败的方法！
06-23 2181
组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。
vue组件化开发
m0_74076766的博客
12-02 399
组件化开发
Vue：组件化开发
islunatic的博客
04-14 657
JS代码CSS 代码
Vue 独立组件开发: 三剑客 prop event slot
weixin_41952131的博客
04-17 201
独立组件应该是vue开发中难度最大一类组件，如elementUI，ant design。因为它要是给很多开发者使用的，所以这类组件的API的设计、兼容性、性能及复杂的功能实现提出了很高的要求。目前，国内只用大厂才有能力开发独立的组件库。
vue组件化+vue路由+vuex+axios实现增删改查功能
05-28
- 前端采用Vue组件化实现页面结构，Vue路由实现页面跳转，Vuex实现状态管理，Axios实现数据请求和响应； - 后端采用Node.js实现服务器端逻辑，MongoDB实现数据存储和管理。 2. Vue组件化 Vue组件化是Vue框架的核心...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值