vue知识点集合(一)

这篇博客总结了Vue的多个关键知识点,包括:style scoped的用途和原理,子组件访问父组件实例的方法,父子组件间的传值方式,vue双向绑定的原理,以及Vue的生命周期。还提到了在不同生命周期钩子中适合执行的任务和Vue常用的修饰符。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

想整理一下工作中用到的vue知识,然后试着理解一下底层概念,也可以供将来自己复习查看。

Ⅰ. style加scoped属性的用途和原理

用途:在标签上绑定了自定义属性,防止css全局同名污染,表明style里的css样式只适用于当前组件元素。

原理:在标签加上v-data-属性,再在选择器时加上对应[v-data-]即完成独立CSS类名选择

注意:很多时候使用ui框架如果加scope就不能覆盖。

           用/deep/可以对组件内的样式进行覆盖。

           也可以在该组件中单独创建一个style标签写ui框架样式。

Ⅱ . 如何在子组件中访问父组件的实例?

  this.$parent 拿到父组件实例
  this.$children 拿到子组件实例(数组)

Ⅲ . 如何实现父子组件之间的传值?

① 父传子:

父组件要通过v-bind(简写:)将要传递的数据绑定到子组件上。

<Son :toSonData="toSonData"></Son>

在子组件中用props方法接收父组件传来的值,(两种方法,具体用哪种看个人喜好,推荐第二种)


  props:["t
### Vue 知识点总结 #### 1. Vue与其他框架的对比 Vue种渐进式的 JavaScript 框架,相较于 Angular 和 React,其学习曲线较为平缓[^1]。Angular 的复杂性和庞大的生态系统可能让初学者感到困难;React 虽然灵活,但在代码可读性方面存在定的挑战。相比之下,Vue 提供了个简单易懂的核心 API 设计。 #### 2. Vue 的核心概念 Vue套用于构建用户界面的渐进式框架,主要关注于视图层的设计[^1]。它允许开发者轻松集成到现有项目中,并能与现代工具链无缝协作,适用于从小型脚本到大型单页应用程序的各种场景。 #### 3. MVVM 架构模式 MVVM(Model-View-ViewModel)是 Vue 所采用的种设计模式[^3]: - **M (Model)**: 表示数据模型。 - **V (View)**: 用户界面上展示的内容。 - **VM (ViewModel)**: 连接 Model 和 View 的桥梁,即 Vue 实例本身负责监听 DOM 变化并更新数据绑定。 #### 4. 基础语法与特性 ##### 4.1 数据绑定 Vue 使用 `v-bind` 或者缩写形式 (`:`) 来动态绑定 HTML 属性值[^3]。例如: ```html <img :src="imageSrc"> ``` ##### 4.2 模板插值 通过双大括号 `{{ }}` 插入表达式的结果至模板中[^3]: ```html <p>{{ message }}</p> ``` ##### 4.3 条件渲染 利用 `v-if`, `v-else-if`, 和 `v-else` 控制条件性的内容呈现[^5]。如果需要频繁切换显示状态而不希望重新创建节点,则可以选择性能更优的 `v-show` 方法来调整 CSS 样式属性 `display`。 ##### 4.4 列表渲染 借助 `v-for` 方向迭代数组或对象集合生成重复项列表[^4]: ```html <ul> <li v-for="(item, index) in items" :key="index">{{ item.name }}</li> </ul> ``` #### 5. 组件化开发 组件是 Vue 中最重要的抽象单元之,它们封装了独立的功能模块以便重用和管理复杂度高的 UI 结构[^4]。定义新组件可以通过以下方式完成: 1. 创建子类构造函数: ```javascript const MyComponent = Vue.extend({ props: ['title'], data() { return {}; }, template: `<h1>{{ title }}</h1>` }); ``` 2. 注册全局可用名称空间下的自定义标签名: ```javascript Vue.component('my-component', MyComponent); ``` 最后,在根实例初始化时关联目标容器元素即可生效整个应用布局体系。 #### 6. 计算属性 vs Watcher 虽然两者都能响应数据的变化,但适用场合有所不同[^4]。对于简单的派生数据处理建议优先选用计算属性因为它具有缓存机制从而提高效率;而对于涉及多个变量联动或者执行副作用的操作则更适合运用 watcher 函数实现特定逻辑控制流程。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值