后端开发工程师vue2初识的学习
什么是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是常用的,也被叫做钩子方法,他通过发送请求数据到服务器,自动挂载。
- 点赞
- 收藏
- 关注作者
评论(0)