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

  • 小米平板5pro 12.4怎么退出分屏(小米平板5Pro 12.4怎么样)

    小米平板5pro 12.4怎么退出分屏(小米平板5Pro 12.4怎么样)

  • dnf巫女加点攻略(dnf巫女加点)(dnf2021巫女加点)

    dnf巫女加点攻略(dnf巫女加点)(dnf2021巫女加点)

  • 自动放映幻灯片怎么设置(wpsppt怎么自动放映幻灯片)

    自动放映幻灯片怎么设置(wpsppt怎么自动放映幻灯片)

  • 华为荣耀10青春版屏幕多高(华为荣耀10青春版有nfc功能吗)

    华为荣耀10青春版屏幕多高(华为荣耀10青春版有nfc功能吗)

  • 淘宝号2升3心需要多久(淘宝账号升级到3心)

    淘宝号2升3心需要多久(淘宝账号升级到3心)

  • 抖音直播提醒怎么开(抖音直播提醒怎么取消掉)

    抖音直播提醒怎么开(抖音直播提醒怎么取消掉)

  • QQ浏览器动态咋删除(qq动态的浏览记录)

    QQ浏览器动态咋删除(qq动态的浏览记录)

  • iphone6s黑屏开不了机(iphone6s黑屏开不了机怎么修)

    iphone6s黑屏开不了机(iphone6s黑屏开不了机怎么修)

  • iphone11要不要剪卡

    iphone11要不要剪卡

  • 微信拉黑在删除对方后还能搜到吗(微信拉黑在删除是什么样子,我发消息给他是什么样子的)

    微信拉黑在删除对方后还能搜到吗(微信拉黑在删除是什么样子,我发消息给他是什么样子的)

  • 去哪儿vip抢票一定能抢到吗(去哪儿vip抢票一天几次)

    去哪儿vip抢票一定能抢到吗(去哪儿vip抢票一天几次)

  • 安卓hd怎么关闭(安卓hd怎么关闭oppo)

    安卓hd怎么关闭(安卓hd怎么关闭oppo)

  • 网盘会员到期文件会消失吗(网盘会员到期文件能打开吗)

    网盘会员到期文件会消失吗(网盘会员到期文件能打开吗)

  • wapi要不要打开

    wapi要不要打开

  • 华为col-al10配置(华为col-al10多少钱一台)

    华为col-al10配置(华为col-al10多少钱一台)

  • 华为p20pro有没有红外线(华为p20pro有没有OTG功能)

    华为p20pro有没有红外线(华为p20pro有没有OTG功能)

  • oppoa5屏幕失灵怎么办(oppoa五手机屏幕失灵怎么办)

    oppoa5屏幕失灵怎么办(oppoa五手机屏幕失灵怎么办)

  • 微博怎么获得铁粉称号(微博怎么获得铁粉标)

    微博怎么获得铁粉称号(微博怎么获得铁粉标)

  • word怎样直接打印双面(word怎样直接打开excel文件)

    word怎样直接打印双面(word怎样直接打开excel文件)

  • 72mbps是什么意思(网络72mbps是什么意思)

    72mbps是什么意思(网络72mbps是什么意思)

  • 苹果x发热正常吗(苹果x使用时发热)

    苹果x发热正常吗(苹果x使用时发热)

  • 手机突然显示不显卡什么原因(手机突然显示不可上网)

    手机突然显示不显卡什么原因(手机突然显示不可上网)

  • 怎么删除wps空白页面(删除wps空白页最后一页怎么删)

    怎么删除wps空白页面(删除wps空白页最后一页怎么删)

  • 淘宝十一活动时间(今年十一淘宝有什么活动内容)

    淘宝十一活动时间(今年十一淘宝有什么活动内容)

  • word插入图片快捷键(word插图片快捷键是什么)

    word插入图片快捷键(word插图片快捷键是什么)

  • iphonexr怎么开热点(苹果xr如何开热点)

    iphonexr怎么开热点(苹果xr如何开热点)

  • 多缴纳社保怎么处理
  • 企业自产的产品转为自用
  • 事业单位补提折旧怎么处理
  • 负利润的话小型微利企业减免企业所得税吗
  • 股东退股如何清算表格
  • 财务将利润表已申报还能修改吗
  • 资产损失原因
  • 企业常见的股利政策
  • 可以采用三栏式的明细账的有
  • 本月计提所得税费用
  • 建筑公司支付给个人的劳务费计入什么科目
  • 进项发票不勾选会有什么后果
  • 什么时候需要计提税金及附加
  • 取得以前年度审计报告应归入阶段底稿
  • 设备租赁涉及税种
  • 小规模纳税人自开专票
  • 物业管理的差额怎么算
  • 发票过期一年可以用吗
  • 发票数量能开0.0几吗
  • 海关新增成交方式exw条款,如何退税?
  • 房地产公司需要和哪些部门打交道
  • 收到住房补贴怎么做账
  • 个税申报系统的备份保留几份数据
  • 委托检验报告能否作为处罚依据
  • PHP:mb_check_encoding()的用法_mbstring函数
  • 劳务资质办理需要什么条件
  • 应交所得税和所得税费用的区别计算公式
  • .info是什么意思?
  • shell脚本攻略第三版pdf
  • nginx反向代理未知域名
  • php数据导出到excel
  • php操作文件的常用函数
  • 企业所得税核定征收方法有哪两种
  • 大前端需要掌握什么技能
  • 计算机视角技术
  • 2021年前端还火吗
  • 文件上传模板怎么弄
  • 小规模纳税人是什么意思
  • 企业银行电子回单一般什么时候打印
  • c语言中局部变量和全局变量同名
  • 建筑业外管证预审要多久
  • 下列项目的进项税额可以从销售税额中抵扣的是
  • 员工探亲路费报销入哪个科目
  • mysql怎么使用表
  • 营业外支出账户核算的主要内容有
  • 劳务公司账务处理实操
  • 发票收款人和复核人可以是一个人吗
  • 应收账款周转速度快表明
  • 简易办法征收增值税有几种情况
  • 一般纳税人销售旧货可以开专票吗
  • 经纪代理服务范围
  • 福利部门的福利有哪些
  • 公交车ic卡网上充值
  • 其他应付款在借方表示什么
  • 销售费用明细科目里有什么
  • sql server的go
  • sql server数据存放位置
  • win10补丁导致无法开机
  • linux 对比文件
  • windows 安装app
  • 常用宏操作的参数设置方法
  • linux怎么vi
  • win8系统安装步骤
  • windows8.1应用商店打不开
  • vsftpd.log
  • win8如何免费升级win10
  • win7其他设备
  • html的基本语法规则
  • jquery validation
  • python2.7多进程
  • unity3d中用四元数 Quaternion来对一个坐标点进行旋转的初步体会
  • 浅谈javascript网页编码特效论文
  • Genymotion首次运行程序出现错误Installation error: INSTALL_FAILED_CPU_ABI_INCOMPATIBLE
  • listview报错
  • 微软python视频教程
  • 辽宁地方税务局发票查询
  • 浙江税务网上开票流程图
  • 浙江省税务局发票短信
  • 湖北国税发票手机查询
  • 船舶吨税的税收优惠
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设