后端开发工程师vue2初识的学习

举报
天天困 发表于 2024/07/26 22:53:22 2024/07/26
【摘要】 什么是Vue?Vue (通常指 Vue.js)是一个用于构建用户界面的渐进式 JavaScript 框架Vue 主要使用了 MVVM(Model-View-ViewModel)模型官网:Vue.jsVue的常用指令指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式指令    作用v-if和v-e...

什么是Vue?

Vue (通常指 Vue.js)是一个用于构建用户界面的渐进式 JavaScript 框架

Vue 主要使用了 MVVM(Model-View-ViewModel)模型

官网:Vue.js

Vue的常用指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式

指令    作用
v-if和v-else    根据条件来决定是否渲染元素
v-for    用于遍历数组或对象来渲染多个元素
v-bind    用于动态绑定属性
v-on    用于监听事件
v-model    用于在表单元素上实现双向数据绑定
v-show    通过控制元素的display属性来显示或隐藏元素


这里给大家展示了v-bind和v-model的作用,v-model因为具有双向数据绑定的作用,所以我们在输入框中输入新的地址后,我们的url也会根据新的地址进行改变,因此我们的两个超链接的地址也会改变为url新的地址。

这里是展示v-on进行一个点击的事件操作。input标签类型选择按钮,并为其绑定上handle函数,在handle函数中进行弹窗的操作。

这里为大家展示了v-if和v-show的代码书写展示,v-if渲染是通过判读是否为true,为true才展示,而v-show是通过css中display属性来控制的。

首先在data中定义一个数组,我们通过v-for遍历拿出数组中的地址,首先定义元素名称为addr,i为索引(可有可无,第一个写法是有索引的第二个写法是没有索引的)然后在addrs出取出我们要要的元素。索引默认是从0开始的,如果想让他从1开始可以写成{{index+1}}

Vue的生命周期

Vue 的生命周期钩子函数允许开发者在组件的不同阶段执行特定的操作

以下是 Vue 组件的主要生命周期阶段和对应的钩子函数:

beforeCreate:在实例初始化之前被调用,此时组件的选项对象还未创建,数据观测和事件配置尚未开始。
created:实例已经创建完成,此时组件的选项对象已创建,数据观测和事件配置也已完成,但尚未开始渲染 DOM ,可以进行一些数据请求和初始化操作。
beforeMount:在挂载开始之前被调用,此时模板已经编译完成,但尚未挂载到页面上。
mounted:组件被挂载到页面上,此时可以获取到 DOM 元素,进行一些基于 DOM 的操作,例如初始化第三方插件。
beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
beforeDestroy:在组件销毁之前调用,可以进行一些清理操作,例如取消定时器、解绑事件等。
destroyed:组件销毁后调用,此时组件的所有资源都已被释放。

8个生命周期方法我们主要给大家展示一下mounted是常用的,也被叫做钩子方法,他通过发送请求数据到服务器,自动挂载。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。