位置: IT常识 - 正文

【学vue跟玩一样】快速学会常用指令及如何理解生命周期(vue好不好学)

编辑:rootadmin
【学vue跟玩一样】快速学会常用指令及如何理解生命周期 一,内置指令1.v-text

推荐整理分享【学vue跟玩一样】快速学会常用指令及如何理解生命周期(vue好不好学),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:学vue之前,vue好学还是js好学,vue学起来困难吗,vue好不好学,vue好不好学,学vue用什么软件,vue好学吗?,学vue3还是vue2,内容如对您有帮助,希望把文章链接给更多的朋友!

v-bind:,单向绑定解析表达式

v-model :双向数据绑定

v-for:遍历数组/对象/字符串

v-on :绑定事件监听,可简写为@

v-if :条件渲染(动态控制节点是否存存在)

v-else :条件渲染(动态控制节点是否存存在)

v-show:条件渲染(动态控制节点是否展示)

<body><div class="user"><h4>{{name}}</h4><div v-text = 'name'></div></div><script>const vm = new Vue({el:'.user',data:{name:'山鱼'}})</script></body>2.v-html

1.作用:向指定节点中渲染包含htm1结构的内容。

2.与插值语法的区别:

(1)v-html会替换掉节点中所有的内容,{{xx}}则不会。

(2)v- html可以识别htm1结构。

3.注意: v-htm有安全性问题

(1)如果在网站上动态渲染html,很容易收到xss攻击

(2)v-html一般只用在可信的地方使用

<body><div class="user"><div v-html = 'name'></div></div><script>const vm = new Vue({el:'.user',data:{name:'<h1>我是山鱼<h1>'}})</script></body>3.v-cloak

1,没有值,只是一个单纯的属性,当vue实例接管后就会消失

2,作用是,当网速过慢时,不让未解析的页面展示出来

<body><div id='root'><h2 v-cloak>{{name}}</h2></div></body><script>new Vue({el: '#root',data: {name: '山鱼学院'}})</script>4.v-once【学vue跟玩一样】快速学会常用指令及如何理解生命周期(vue好不好学)

v-once所在节点在初次动态渲染后,就视为静态内容了(只进行一次渲染,就像是一次性用品)

2.以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。

<body><div id='root'><h2 v-once>初始化的n为:{{n}}</h2><h2>当前的n为:{{n}}</h2><button @click="n++">n+1</button></div></body><script>new Vue({el: '#root',data: {n: 1,}})</script>5.v-pre

1.跳过其所在节点的编译过程。

2.可利用它跳过没有使用指令语法、没有使用插值语法的节点,会加快编译。

<body><div id='root'><h2 v-pre>山鱼很简单</h2><h2>当前的n为:{{n}}</h2><button @click="n++">n+1</button></div></body><script>new Vue({el: '#root',data: {n: 1,}})</script>二,自定义指令<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>自定义</title><script src="../js/vue.js"></script></head><!--需求1:定义个v-big指令, 和v-text功能类似,但会把绑定的数值放大10倍。需求2:定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点。--><body><div id='root'><h2>当前的n值为:{{n}}</h2><!-- <h2>n值放大10倍 <span v-big='n'></span> </h2> --><h2>n值放大10倍 <span v-big-number='n'></span> </h2><button @click='n++'>点我+1</button><input type="text" v-fbind:value='n'></div></body><script>// 全局自定义指令(对象式也这么写)Vue.directives('big', function (element, binding) {console.log('big', this)//注意此处的this是windowelement.innerText = binding.value * 10;})new Vue({el: '#root',data: {n: 1,},directives: {//big函数何时会被调用?            //1.指令与元素成功绑定时。            //2.指令所在的模板被重新解析时// 函数式big: function (element, binding) {console.log('big', this)//注意此处的this是windowelement.innerText = binding.value * 10;},'big-number': function (element, binding) {element.innerText = binding.value * 10;},// 对象式'fbind': {// 指令与元素绑定成功时调用bind(element, binding) {element.value = binding.value;},// 指令所在元素被插入页面时inserted(element, binding) {element.focus()},// 指令所在的模板被重新解析时update(element, binding) {element.value = binding.value;},}}})</script></html>三,什么是生命周期?

Vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。

1.又名 → 生命周期回调函数、生命周期函数、生命周期钩子。

2.是什么?Vue在关键时刻帮我们调用的些特殊名称的函数。

3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的this指向是Vm或组件实例对象

形象点来说就类似于人的一生,分为这么几个重要阶段,【呱呱坠地→孩童时期→青年时期→暮年时期】,这四个大的阶段。

四个阶段也成为钩子:

1.初始化 ==> 创建组件 ==> beforeCreate created

2.挂载 ==>渲染显示组件 ==> beforeMount mouted

3.更新 ==>修改了变量==>触发视图刷新 ==> beforeUpdate updated

4.销毁 ==>切换页面 ==>会把组件对象从内存删除 ==> beforeDestory destoryed

常用的生命周期钩子

1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等[初始化操作]。

2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等[收尾工作]。

3.关于销毁Vue实例销毁后借助Vue开发者工具看不到任何信息。销毁后自定义事件会失效,但原生DOM事件依然有一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了

写在最后

点赞:您的赞赏是我前进的动力!👍收藏:您的支持我是创作的源泉!⭐评论:您的建议是我改进的良药!✍山鱼的个人社区:欢迎大家加入我的个人社区——山鱼社区

本文链接地址:https://www.jiuchutong.com/zhishi/299739.html 转载请保留说明!

上一篇:【AWS入门】在AWS EC2实例上托管 WordPress 博客(aws documentation)

下一篇:ajax和axios有什么区别?(ajax和axios区别)

  • realmebook电池多大(realmex的电池容量)

    realmebook电池多大(realmex的电池容量)

  • wps录屏功能在哪(wps录屏功能在哪里打开)

    wps录屏功能在哪(wps录屏功能在哪里打开)

  • 苹果手机在保修期内怎么换电池(苹果手机在保修期可以换新机吗)

    苹果手机在保修期内怎么换电池(苹果手机在保修期可以换新机吗)

  • ipad录屏没有内置声音怎么办(ipad录屏没有内置声音怎么回事)

    ipad录屏没有内置声音怎么办(ipad录屏没有内置声音怎么回事)

  • 苹果手机可以测心率吗(苹果手机可以测室内温度吗)

    苹果手机可以测心率吗(苹果手机可以测室内温度吗)

  • 支付宝的证件照功能在哪(支付宝的证件照为什么不清晰呢)

    支付宝的证件照功能在哪(支付宝的证件照为什么不清晰呢)

  • vivo突然掉电很快(vivo掉电量快怎么回事)

    vivo突然掉电很快(vivo掉电量快怎么回事)

  • 华为medal20是什么型号(华为medal20是华为什么型号)

    华为medal20是什么型号(华为medal20是华为什么型号)

  • 怎么传输数据到新的手机上(怎么传输数据到已经激活的苹果手机)

    怎么传输数据到新的手机上(怎么传输数据到已经激活的苹果手机)

  • wifi盒子正常亮几个灯(wifi盒子正常亮几个灯图片)

    wifi盒子正常亮几个灯(wifi盒子正常亮几个灯图片)

  • 苹果11原彩什么意思(苹果原彩什么版本有)

    苹果11原彩什么意思(苹果原彩什么版本有)

  • 手机反应慢如何处理(手机反应慢如何修理)

    手机反应慢如何处理(手机反应慢如何修理)

  • 打印机终端编号怎么查(打印机终端编号是什么意思)

    打印机终端编号怎么查(打印机终端编号是什么意思)

  • 怎么关闭手机百度实时热搜(怎么关闭手机百度发现推送)

    怎么关闭手机百度实时热搜(怎么关闭手机百度发现推送)

  • oppoa57的耳机模式在哪(oppo手机耳机模式)

    oppoa57的耳机模式在哪(oppo手机耳机模式)

  • 华为ask al00x是什么型号(华为askal00x是什么型号手机)

    华为ask al00x是什么型号(华为askal00x是什么型号手机)

  • 荣耀10的OTG在哪(华为荣耀10手机ot g在哪儿打开)

    荣耀10的OTG在哪(华为荣耀10手机ot g在哪儿打开)

  • 小米6x信号不好怎么办(小米6x信号不好时响玲怎么关闭)

    小米6x信号不好怎么办(小米6x信号不好时响玲怎么关闭)

  • word段落怎么分栏(word段落怎么分为等宽两栏)

    word段落怎么分栏(word段落怎么分为等宽两栏)

  • 抖音返回桌面继续播放(抖音返回桌面继续播放怎么关闭)

    抖音返回桌面继续播放(抖音返回桌面继续播放怎么关闭)

  • 快手24小时关注人数上限怎么解除(快手24小时关注人数上限是多少人)

    快手24小时关注人数上限怎么解除(快手24小时关注人数上限是多少人)

  • 荣耀9x尺寸(荣耀9x尺寸是多少厘米)

    荣耀9x尺寸(荣耀9x尺寸是多少厘米)

  • 华为荣耀20是双卡吗(华为荣耀20双系统怎么设置)

    华为荣耀20是双卡吗(华为荣耀20双系统怎么设置)

  • 迅雷敏感资源下载受限怎么办

    迅雷敏感资源下载受限怎么办

  • Win7旗舰版如何查看本机的Mac地址?(win7旗舰版如何恢复出厂设置)

    Win7旗舰版如何查看本机的Mac地址?(win7旗舰版如何恢复出厂设置)

  • 城市公交查询系统的设计与实现(Java+Web+MySQL+J2EE)(城市公交网)

    城市公交查询系统的设计与实现(Java+Web+MySQL+J2EE)(城市公交网)

  • 建筑业小规模纳税人 扣除分包款 开票
  • 中国电子口岸证书错误
  • 应发工资和实发工资计算公式excel
  • 公转私可以实时到账吗
  • 企业发行债券的目的
  • 嵌入式软件运行的主要流程是什么
  • 母子公司好处
  • 可转换公司债券是什么意思
  • 工会经费的所得税怎么算
  • 网上购物退款后又收到产品了怎么办
  • 滞留票是什么意思
  • 分公司开票总公司收款行吗
  • 税控盘续费会计分录怎么做
  • 促销活动赠品应如何账务处理
  • 商品返点收入账务处理
  • 增值税即征即退属于政府补助吗
  • 总账会计就是内外账合并吗
  • 土地增值税加计5%扣除年限
  • 财务做账借贷分别表示
  • 拍卖抵债资产的缴税责任
  • 1697511149
  • 会计实操的重要性有哪些
  • 电脑开启语音按什么键
  • 积分兑换现金的平台
  • 华为手机屏幕变成黑白色怎么恢复
  • 如何在win7中查找文件
  • Windows 2003 SP2 简体中文版下载地址
  • 公司不经营了不注销可以吗
  • 微博怎么变成大v
  • 企业出售使用过的固定资产的增值税处理
  • js怎么把时间戳转为日期yyyy-mm-dd
  • php通用分页类
  • laravel框架用到哪些设计模式
  • thinkphp分表
  • 制造业企业预提短期借款利息
  • java分页page类
  • php 进程通信
  • 炫酷登录注册教程
  • php session_id
  • vue思维导图怎么下载
  • 代扣代缴增值税账务处理
  • 微软 gcr
  • 深入全面剖析自己
  • mongodb快速入门
  • 关于录制初三毕业班家长寄语通知
  • 零税率与免税有何区别
  • 私募基金成立备案流程
  • 高铁票进项抵扣计算错了 怎么办理
  • 购买的软件属于什么资产
  • 小规模纳税人是什么意思
  • 借银行存款贷预收账款是哪个凭证
  • 计提坏账准备资产总额会减少吗
  • 无偿赠送货物如何申报增值税
  • 国有资产保值增值率
  • 融资租赁取得的机器设备的账务处理
  • 电子设备折旧残值率
  • 境外企业向境内企业提供技术服务
  • 什么是交易价格指数
  • 贸易融资具体包括
  • mysql数据库高可用架构
  • 隔空传送怎样使用苹果
  • win7系统u盘打不开怎么办
  • win7操作系统在哪儿卖
  • solaris版本查询
  • 本地硬盘满了怎么办
  • 安装xp后win7不能用怎么办
  • ubuntu系统安装程序
  • mac电脑apple id
  • 三种方法完美解决问题
  • virtualbox 虚拟化
  • JavaScript浏览器扩展
  • js生成excel文件
  • jquery弹出窗口
  • android存储方式
  • jquery获取值的几种方法
  • 定额发票查询app
  • 税务监察室具体工作内容
  • 电信宽带绑定的手机号怎么解除绑定
  • 苏州税务系统
  • 如何落实保密制度规定措施
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设