VUE（二、常用指令、生命周期

最新推荐文章于 2024-08-30 20:29:15 发布
最新推荐文章于 2024-08-30 20:29:15 发布
阅读量1k 收藏 1
点赞数
分类专栏： VUE 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48841931/article/details/126219645
版权

一、Vue常用指令

指令：HTML标签上带有v-前缀的特殊属性

 

指令作用
v-bind为HTML标签绑定属性值，href,css样式等
v-model在表单元素上创建双向保定
v-on为HTML标签绑定时间
v-if条件性的渲染某元素，当条件为true时才渲染，否则不渲染
v-else
v-else-if
v-show根据条件展示元素，区别在于切换的是display属性值
v-for列表渲染，遍历容器的元素或者对象的属性

二、Vue生命周期

状态阶段周期
beforeCreate创建前
created创建后
beforeMount载入前
mounted挂载完成
beforeUpdate更新前
updated更新后
beforeDestroy销毁前
destroyed销毁后

 mounted:挂载完成

发送异步请求，加载数据

tips:等我学完后端技术再回来学你 

 

白日日白
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Vue生命周期（操作代码）& 常见指令
weixin_46261261的博客
07-22 393
Vue生命周期 1.先做一个点击增加的功能 实现点击增加功能 <template> <div id="app"> {{ array }} <p><button @click="add">add</button></p> </div> </template> export default { name: 'App', data(){ return { arra
Vue2.x-指令和生命周期（笔记）
wanghuan1020的博客
02-07 167
指令和生命周期（笔记）Vue2.x-指令和生命周期（笔记）使用 `webpack` 和 `webpack-dev-server` 构建项目前置条件实现 Vue2.x-指令和生命周期（笔记） 使用 webpack 和 webpack-dev-server 构建项目 新建目录 study-directive cd study-directive npm init -yes npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3 新建 webpack.conf
Vue常用指令和生命周期
carlston06的博客
12-22 149
Vue.js作为前端的主流框架，它为开发者提供了一系列的指令，使得开发过程更为简洁、高效。下面，我们将详细介绍Vue中常用的指令及其代码示例。: v-model 是一个双向数据绑定的指令，常用于表单元素。: 根据条件来决定是否渲染某个元素。: 用于渲染列表数据。
Vue常用指令及其生命周期
PleaSure乐事的博客
07-26 1516
Vue常用指令及其生命周期
Vue常用指令及生命周期
2301_79239262的博客
08-04 111
35 && age <= 60">中年人</div>--钩子方法的方法名，与生命周期的状态是对应的，如mounted钩子方法的编写形式为：--><div v-if="age <= 35">年轻人点击一下
Vue常用指令及声明周期
qq_53499304的博客
02-17 987
学习一门新的框架语言，我个人认为最好的方式就是去它的官网把相应的生命周期以及 API 都用 Demo 的形式实操一遍，那本篇博客也不例外，带大家简单了解一下 Vue 的指令和生命周期
Vue常用指令 Vue生命周期 异步操作 自定义组件
m0_53636192的博客
01-14 703
2022.01.13 第二阶段 day 13 Vue 事件绑定v-on:为 HTML 标签绑定事件。 事件指令: 方式一: v-on:事件名称=“函数名称()” 方式二: @事件名称=“函数名称()” 注意: 1.事件名称不要加on 比如: ccc <button @click=“test1()”>ccc 2.事件名称赋值:函数时,小括号也可以省略不写.建议写上小括号 比如:<button @click=“test1”>ccc</button> 键值对后加上,号 列表指
vue的基础内容，包括vue指令，vue组件，vue生命周期，vue路由，vue的工程化项目等内容。
02-10
Vue.js 基础知识总结 ...Vue.js 是一个功能强大且灵活的前端框架，提供了许多强大的特性和工具，例如指令、组件、生命周期、路由和工程化项目。通过学习和掌握这些知识点，开发者可以更好地构建复杂的应用程序。
vue2和vue3的生命周期
weixin_46084100的博客
07-17 2357
vue2和vue3生命周期
vue常用指令代码实例总结
09-17
Vue 常用指令代码实例总结 Vue 框架提供了许多实用的内置指令，帮助开发者快速构建 Web 应用程序。本文将对 Vue 框架中一些常用的内置指令进行总结和介绍，包括文本更新、条件渲染、事件处理、数据绑定、动画和生命...
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 534
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue ref和reactive区别
灰海
08-25 3469
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue3插件原理
m0_46281382的博客
08-26 1800
简述vue3中use方法加载第三方插件原理
足球联赛|基于SprinBoot+vue的足球联赛管理系统(源码+数据库+文档)
伟庭的博客
08-27 1057
系统阐述的是使用足球联赛管理系统的设计与实现，对于Java、B/S结构、MySql进行了较为深入的学习与应用。主要针对系统的设计，描述，实现和分析与测试方面来表明开发的过程。开发中使用了ssm框架和MySql数据库技术搭建系统的整体架构。
关于 Vue/React 的 cli 中运用 webpack 打包的原理简单解析
weixin_47342624的博客
08-27 305
引入 webpack.config.js 文件，通过webpack 去加载 webpack.config.js 文件，会返回一个compiler对象，里面内置了 run方法即可对 webpack.config.js 文件进行编译运行build.jsif(err) {} else {})命令行中通过 node 命令执行该文件即可实现运用 webpack 对资源文件进行打包。
vue3中如何拿到element plus中el-tree多选的值？
爱敲代码的卡拉米的博客
08-30 105
首先我们要为el-tree设置show-checkbox（它的作用是：节点是否可被选择），然后为el-tree绑定ref。vue2中我们在标签中绑定过ref后会用this.$refs.xxx来进行获取。vue3中的ref跟vue2中的ref获取方式略有不同。
移动端签名
notagoodwriter的博客
08-23 1107
【代码】移动端签名。
Vue：快捷文本
MMF博客园
08-26 1059
Vue：快捷文本
vue+moment转化日期格式为年月日时分秒！最简洁版
demotang的博客
08-30 163
官网：https://momentjs.cn/
vue3 自定义指令生命周期
09-07
Vue3中的自定义指令生命周期发生了一些变化。首先，钩子函数的名称有所变化。在Vue2中，常用的钩子函数有bind、inserted、update、componentUpdated和unbind。而在Vue3中，这些钩子函数的名称发生了变化，分别是beforeMount、mounted、beforeUpdate、updated和unmounted。这样的改变使得自定义指令的生命周期与Vue3的组合式API更加一致，提高了代码的可读性和可维护性。 其次，钩子函数的参数也有所变化。在Vue2中，钩子函数的参数是el、binding、vnode和oldVnode。而在Vue3中，钩子函数的参数是el、binding、vnode和prevVNode。其中，el是当前元素，binding是指令的绑定值，vnode是虚拟节点，prevVNode是之前的虚拟节点。 总结一下，Vue3中的自定义指令生命周期发生了名称和参数的变化，名称变化使其更与Vue3的组合式API一致，参数变化则更加符合统一的规范。这些改变提高了代码的可读性和可维护性，使开发更加方便和高效。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span> #### 引用[.reference_title] - *1* *4* [Vue3中自定义指令生命周期的变化及含义？](https://blog.csdn.net/m0_68009075/article/details/130883408)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [（详解）Vue3自定义指令](https://blog.csdn.net/qq_59747594/article/details/130916986)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍](https://download.csdn.net/download/weixin_38743084/12953228)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

白日日白

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

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

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

打赏作者

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

抵扣说明：

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

余额充值