vue知识点总结

1. v-cloak,控制数据加载完毕再显示组件

  使用方法:css中写入

[v-cloak] {
  display: none;
}

在标签中写入

<div v-cloak>{{ message }}</div>

2. v-pre,跳过编译,直接显示原始标签。

3. v-once,只渲染元素和组件一次。

4. v-model,双向绑定,用于input,textarea,select

5. URL.createObjectURL()的使用方法

        URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

        URL.createObjectURL(blob)和FileReader.readAsDataURL(file)很相似,下面是个人的一些理解,如有不正确的地方,欢迎指出:

主要区别

  • 通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串
  • 通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL

执行时机:

  • createObjectURL是同步执行(立即的)
  • FileReader.readAsDataURL是异步执行(过一段时间)
### Vue.js 基础知识总结与归纳 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,其核心库专注于视图层,能够轻松集成到现有项目中[^3]。以下是关于 Vue.js 的基础知识总结和归纳: #### 1. 核心概念 - **MVVM 模式**:Vue 实现了 MVVM(Model-View-ViewModel)模式,开发者通过绑定数据模型(Model)和视图(View),使得数据变化时视图会自动更新。 - **模板语法**:Vue 使用双大括号 `{{ }}` 表达式将数据插入到 HTML 中[^2]。 - **指令**:Vue 提供了一些内置指令(如 `v-if`、`v-for`、`v-bind` 和 `v-on`),用于操作 DOM[^2]。 #### 2. 生命周期 Vue 实例从创建到销毁的过程称为生命周期。以下是关键的生命周期钩子: - `beforeCreate`:实例初始化完成,但尚未挂载数据或事件监听器。 - `created`:实例已完成数据观测,但尚未挂载到 DOM。 - `beforeMount`:模板已编译,但尚未渲染到页面上。 - `mounted`:实例已被挂载到 DOM 上,可以访问真实 DOM[^5]。 - `beforeUpdate`:当数据发生变化时触发,此时 DOM 尚未更新。 - `updated`:DOM 已经根据最新的数据完成更新[^5]。 - `beforeDestroy` 和 `destroyed`:实例即将销毁或已经销毁。 #### 3. 数据绑定 - **单向绑定**:通过 `v-bind` 指令实现父组件向子组件传递数据。 - **双向绑定**:通过 `v-model` 指令实现表单输入与数据之间的同步[^2]。 #### 4. 组件化开发 - **局部组件**:在 `components` 属性中定义组件,并在模板中使用。 - **全局组件**:通过 `Vue.component` 方法注册全局组件。 - **Props 和 Events**:`props` 用于父组件向子组件传递数据,`$emit` 用于子组件向父组件发送事件。 #### 5. 路由管理 Vue Router 是官方提供的路由管理器,用于构建单页面应用中的路由系统。通过配置路由规则,可以实现页面间的切换和参数传递。 #### 6. 状态管理 Vuex 是 Vue 官方的状态管理库,适用于管理复杂的应用状态。它提供了集中式的存储机制,使组件间共享状态变得更加高效。 #### 7. 过渡效果与动画 Vue 提供了丰富的过渡效果支持,包括 CSS 动画、JavaScript 钩子函数等,用于增强用户体验。 #### 8. 插件系统 Vue 具有强大的插件系统,可以通过安装插件扩展核心功能。例如,`vue-router` 和 `vuex` 都是以插件形式提供的。 #### 示例代码 以下是一个简单的 Vue 实例示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Example</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); </script> </body> </html> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

inticaler

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值