位置: 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区别)

  • 苹果手机上面不显示了(苹果手机上面不显示wifi的图片怎么办)

    苹果手机上面不显示了(苹果手机上面不显示wifi的图片怎么办)

  • 如何把b站缓存视频转为本地视频(如何把B站缓存存到U盘)

    如何把b站缓存视频转为本地视频(如何把B站缓存存到U盘)

  • 电脑省电模式唤醒不了(电脑省电模式唤醒不起来)

    电脑省电模式唤醒不了(电脑省电模式唤醒不起来)

  • 苹果手机语音备忘录能录多长时间(苹果手机语音备忘录如何导出)

    苹果手机语音备忘录能录多长时间(苹果手机语音备忘录如何导出)

  • 华为p40支持谷歌吗(华为p40lite可以用谷歌)

    华为p40支持谷歌吗(华为p40lite可以用谷歌)

  • 手机淘宝能用微信支付吗(手机淘宝能用微信零钱支付吗)

    手机淘宝能用微信支付吗(手机淘宝能用微信零钱支付吗)

  • 苹果所有通知都收不到(苹果所有通知都没有声音)

    苹果所有通知都收不到(苹果所有通知都没有声音)

  • rx 580 8g是什么级别的显卡(rx580 8g相当于)

    rx 580 8g是什么级别的显卡(rx580 8g相当于)

  • 手机能测噪音分贝吗(手机测噪音分贝准不准)

    手机能测噪音分贝吗(手机测噪音分贝准不准)

  • sop文件是什么(sop文件是什么意思)

    sop文件是什么(sop文件是什么意思)

  • 微信消息发不出去怎么回事网络一切正常(微信消息发不出去)

    微信消息发不出去怎么回事网络一切正常(微信消息发不出去)

  • tplogincn初始密码是多少(tplogincn密码多少)

    tplogincn初始密码是多少(tplogincn密码多少)

  • echo有什么含义(echo是啥)

    echo有什么含义(echo是啥)

  • 魅蓝手机开不了机怎么办(魅蓝手机开不了机一直转圈)

    魅蓝手机开不了机怎么办(魅蓝手机开不了机一直转圈)

  • 淘气值满多少可以极速退款(淘气值满多少可以参加喵糖游戏)

    淘气值满多少可以极速退款(淘气值满多少可以参加喵糖游戏)

  • 苹果就寝功能怎么删除(苹果就寝功能怎么关)

    苹果就寝功能怎么删除(苹果就寝功能怎么关)

  • 私人影视有没有摄像头(私人影视有没有锁)

    私人影视有没有摄像头(私人影视有没有锁)

  • 云闪付怎么设置指纹登录(云闪付怎么设置密码让别人进不去)

    云闪付怎么设置指纹登录(云闪付怎么设置密码让别人进不去)

  • 探探为什么下载不了(探探为什么刚下载就存在异常)

    探探为什么下载不了(探探为什么刚下载就存在异常)

  • 苹果通知中心在哪(苹果通知中心在下面怎么关闭)

    苹果通知中心在哪(苹果通知中心在下面怎么关闭)

  • 苹果xsmax卡顿怎么解决(苹果xsmax很卡怎么回事)

    苹果xsmax卡顿怎么解决(苹果xsmax很卡怎么回事)

  • 苹果手机有息屏时钟吗(苹果手机屏幕不受控制)

    苹果手机有息屏时钟吗(苹果手机屏幕不受控制)

  • 快手直播封面怎么打字(快手直播封面怎么保存到相册)

    快手直播封面怎么打字(快手直播封面怎么保存到相册)

  • Win10 Build 19043.1266(21H1)更新已知问题汇总

    Win10 Build 19043.1266(21H1)更新已知问题汇总

  • 科西嘉岛上的Speloncato市,法国 (© Jon Ingall/Alamy)(科西嘉岛攻略)

    科西嘉岛上的Speloncato市,法国 (© Jon Ingall/Alamy)(科西嘉岛攻略)

  • 关于uniapp和Vue的生命周期(uniapp和mpvue比较)

    关于uniapp和Vue的生命周期(uniapp和mpvue比较)

  • 帝国CMS扣除会员积分置顶与到期后取消置顶的方法(帝国cms扣除会员怎么办)

    帝国CMS扣除会员积分置顶与到期后取消置顶的方法(帝国cms扣除会员怎么办)

  • 制造企业都需要什么人才
  • 基本保险包括
  • 递延收益与递延所得税负债的区别
  • 不动产租赁服务属于现代服务吗
  • 民办非企业免税额度
  • 出售投资性房地产时,按其账面价值结转到主营业务成本
  • 社保次月缴纳上月算不算中断
  • 先分后合是什么意思
  • 汽车租赁用不用交税
  • 股权转让后没有给转让费怎么办
  • 工程保险费属于企业管理费吗
  • 固定资产转为投资性房地产折旧怎么算
  • 个人设备租赁给公司怎么提供发票
  • 已验旧和未验旧
  • 运费发票备注栏新规定
  • 委任方名称代表的是什么意思?
  • 外商投资企业税务优惠
  • 增值税简易征收范围
  • 已进行账务处理怎么处理
  • 企业筹办费会计处理
  • 支付工程款不得超60天
  • 微型小型车
  • 变动成本总额怎么求单位变动成本
  • 运费结转成本的计算公式
  • 如何申请税务发票
  • Linux怎么使用Windows的软件
  • 贷款减值损失计提还能转回吗
  • neo什么意思翻译成中文
  • 怎么计算应缴所得税
  • post请求params
  • 登记总账的科目有哪些
  • 最好的ph计
  • 研发费用怎样进项抵扣
  • 【Zabbix实战之部署篇】Zabbix客户端的安装部署方法
  • 文心一言中国版
  • php use of undefined constant
  • 公司请的临时工
  • 公允价值计量转权益法例题
  • 公司扣个税查不到怎么办
  • 个体户开普票有没有完税证明
  • dedecms官网
  • Building a HTTP Proxy
  • 物流公司驾驶员工资计算方式
  • 结转应交税金的分录
  • 费用计入什么表
  • 夏天单位发防暑茶
  • 预付款在会计里属于什么
  • 逾期贷款利息收入增值税和企业所得税纳税义务时间
  • 买家退货少了犯什么法
  • 加油充值卡有优惠吗
  • 房屋租赁费可以抵扣吗
  • 转账支票需要知道开户行吗
  • 无追索权保理的说法
  • 奖励罚款怎么做分录
  • mysql8.0.23
  • mssql server .ldf和.mdf的文件附加数据库的sql语句
  • linux下mysql5.7.17最新稳定版本安装教程
  • mac版安装教程
  • linux dd 系统
  • 将某软件添加到桌面
  • 组策略怎么用
  • win7系统修复工具在哪
  • win8怎么快速开机
  • 电脑自动重启命令
  • 在flash中制作课件一般会遵循什么流程
  • js解析机制
  • 防止重复调用接口
  • 网络很强大
  • Python 正则表达式入门(初级篇)
  • 税务公众电话
  • 基层税务工作难点重点热点
  • 重庆沙坪坝区沙磁巷幼儿园
  • 种花需要
  • 江苏地税每月社保多少钱
  • 生活费需要缴纳什么税
  • 福建 退休
  • 连云港税务局网站
  • 江苏房产税如何计算公式
  • 河南三门峡税务社保缴费电话
  • 个体工商户银行卡是对公还是对私
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设