VUE课后总结(小白)

最新推荐文章于 2024-01-01 15:33:48 发布

宁妤

最新推荐文章于 2024-01-01 15:33:48 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：课后总结文章标签： vue

本文链接：https://blog.youkuaiyun.com/Zningsir/article/details/106173676

课后总结专栏收录该内容

9 篇文章

订阅专栏

本文深入探讨Vue.js框架，解析其作为渐进式框架的独特优势，包括简洁的API、响应式数据绑定、组件化开发及MVVM架构。涵盖Vue指令、生命周期及常见用法，适合初学者快速入门。

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

Vue课后总结

在这里插入图片描述

Vue 介绍

Vue.js是什么

vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件

声明时渲染

Vue.js的核心是一个允许你采用简介的模板语法来生命是的将数据渲染进DOM的系统:

所有的元素都是响应式的

Vue中的MVVM

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel
的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。 Vue.js 就是一个提供了
MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。
ViewModel负责连接 View 和 Model，保证视图和数据的一致性。

声明Vue对象

引入了vue.js，Vue会被注册为一个全局变量。在实例化 Vue
时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项

var start = new Vue({
        el: "#start",
        data: {
            message: "hhelloVue!"
        }
    })

el:Vue需要操作的元素节点
data属性:每个 Vue 实例都会代理其 data对象里所有的属性。注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

Vue常用指令

v-text (更新元素的文本内容)
v-html (更新元素的innerHTML)
v-if (根据表达式的值的真假条件渲染元素)
v-else (指令给 v-if或 v-show添加一个 “else” 块)
注意：v-else元素必须紧跟在 v-if或 v-show元素的后面——否则它不能被识别。
v-show (根据条件展示元素)
v-for (遍历一个数组，数组里放的是一个个对象)（语法：item in 数组名）
v-on(绑定事件监听器) v-on的语法糖：@
- v-on修饰符:
- .stop - 调用 event.stopPropagation() 停止冒泡
- .prevent - 调用event.preventDefault() 阻止默认事件
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调

<!-- 键修饰符，键别名 -->

<button @keyup.enter="onEnter"></button>

<!-- 键修饰符，键代码 -->

<button @keyup.13="onEnter"></button>

.native - 监听组件根元素的原生事件
.once - 只触发一次回调
v-bind(动态地绑定一个或多个特性) 语法糖：：
v-model(在表单控件或者组件上创建双向绑定)

生命周期

beforeCreate：页面调用之前调用的生命周期
created：在示例创建之后被立即调用
beforeMount：在挂载开始之前调用
mounted：页面挂在之后调用
beforeUpdate：在数据更新时调用
updated：在数据更新后调用
beforeDestroy：实例销毁之前调用
destroyed：实例销毁之后调用
vm在销毁之前和销毁之后都存在，但是销毁之后就获取不到页面中的div元素
实例销毁之后就无法操作dom