[暑假]Vue框架里面 一些属性和配置项的作用

本文介绍了Vue.js中ref属性的应用及其使用方式,props配置对象的功能及如何接收外部数据,并解释了scoped样式的作用范围,以及lang属性的意义。此外,还说明了代码执行的基本流程。

1. ref属性

1).被用来给元素或子组件注册引用信息(相当于 id的替代)

2).应用在html标签上获取的是真实DOM元素, 应用在组件标签上的是组件实例对象 (Vuecomponent)

3) 使用方式:

                第一:打标识: <h1 ref="xxx">...</h1> 或者 <School ref="xxx"></School>

                第二: 获取: this.$refs.xxx

2.props配置对象

props配置对象的功能: 让组件接收外部传过来的数据

⬆ ⬆ ⬆ ⬆ ⬆ ⬆  上方是简单声明接收

接收数据的同时, 进行类型限制 和 默认值的指定 和 必要性的设置

 拓展:

                plugins 是插件的意思

3. 代码执行顺序是, 先进行引入 然后读取配置项(就是绿色圈圈里面的), 最后解析模板

4. scoped是作用域的意思, 在style加入scoped后, 里面的样式仅仅作用于本 xxx.vue里面的 <templaye>模板

5.lang 是 language 的意思 

如果不写 lang默认就是 CSS

6.脚手架依托于 webpack

### Vue 实例配置项与选项的区别 在 Vue.js 中,实例的创建通过传入一个包含多个配置项的对象来完成。这些配置项通常被称为“选项”(Options),它们用于定义 Vue 实例的行为初始状态 [^1]。 #### 配置项(Options) 配置项是指在创建 Vue 实例时传递给构造函数的对象中的键名。例如: ```javascript new Vue({ el: '#app', data: { message: 'Hello Vue' }, methods: { greet() { return this.message } } }) ``` 上述代码中的 `el`、`data` `methods` 都是配置项,也称为“选项”。这些选项用于初始化 Vue 实例的功能,包括数据绑定、计算属性、方法定义等 [^1]。 - **作用**:配置项用于控制 Vue 实例的初始化过程,如挂载点(`el`)、数据源(`data`)、模板编译逻辑(`template`)等。 - **命名方式**:通常使用小驼峰命名法(camelCase),如 `computed`, `watch`, `methods` 等 [^1]。 #### 实例属性(Instance Properties) 与配置项不同,实例属性Vue 实例自身拥有的属性,可以通过 `this` 访问。这些属性是由 Vue 框架自动添加到实例上的,用于访问 DOM 元素、数据对象等。 例如: - `vm.$el`:指向 Vue 实例挂载的 DOM 元素。 - `vm.$data`:指向 `data` 配置项中定义的数据对象。 - `vm.$props`:在组件中用于访问父组件传递过来的 `props` 数据。 这些属性并不是开发者直接定义的配置项,而是 Vue 内部为每个实例自动生成的属性 [^2]。 #### 特殊情况:`props` 在组件开发中,`props` 是一种特殊的配置项。它既是组件实例的配置选项,也是组件内部可以直接访问的属性。例如: ```javascript Vue.component('child-component', { props: ['title'], template: `<div>{{ title }}</div>` }) ``` 在这个例子中,`props` 是一个配置项,但在组件内部可以通过 `this.title` 直接访问其值,因此它也具有实例属性的特征 [^3]。 --- ### 总结 - **配置项(Options)** 是在创建 Vue 实例或组件时传入的对象中的键名,用于定义实例的行为状态,如 `data`, `methods`, `computed` 等 [^1]。 - **实例属性(Instance Properties)** 是 Vue 实例自身拥有的属性,如 `$el`, `$data`, `$props`,它们由框架自动添加并提供对特定功能的访问 [^2]。 - **特殊配置项 `props`** 在组件中既作为配置项使用,又成为组件实例上的属性 [^3]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值