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

  • 苹果手机相片自动旋转怎么调(苹果手机相片自动复制)

    苹果手机相片自动旋转怎么调(苹果手机相片自动复制)

  • plog是什么(plog是什么的缩写)

    plog是什么(plog是什么的缩写)

  • 服务器繁忙请稍后再试什么意思(服务器繁忙请稍后再试卸载从新安装可以不)

    服务器繁忙请稍后再试什么意思(服务器繁忙请稍后再试卸载从新安装可以不)

  • wps在试图打开文件时遇到错误是什么原因(wps在试图打开文件怎么用)

    wps在试图打开文件时遇到错误是什么原因(wps在试图打开文件怎么用)

  • 删除微信支付记录怎么才能不需要验证(删除微信支付记录)

    删除微信支付记录怎么才能不需要验证(删除微信支付记录)

  • 苹果7plus可以无线充电吗(苹果7plus可以无限冲吗)

    苹果7plus可以无线充电吗(苹果7plus可以无限冲吗)

  • 对方没信号会提示什么(对方没信号打电话他会知道吗)

    对方没信号会提示什么(对方没信号打电话他会知道吗)

  • iphone慢动作视频恢复普通(iPhone慢动作视频)

    iphone慢动作视频恢复普通(iPhone慢动作视频)

  • 微信零钱查历史余额(微信零钱历史明细查询)

    微信零钱查历史余额(微信零钱历史明细查询)

  • 为什么X27充电不显示闪充(x27为什么充不进去电)

    为什么X27充电不显示闪充(x27为什么充不进去电)

  • 微信社群和微信群的区别(微信社群指的是什么)

    微信社群和微信群的区别(微信社群指的是什么)

  • 快充能用普通数据线吗(快充可以用普通充电器吗)

    快充能用普通数据线吗(快充可以用普通充电器吗)

  • 电视上可以安装咪咕视频吗(电视上可以安装酷狗音乐吗)

    电视上可以安装咪咕视频吗(电视上可以安装酷狗音乐吗)

  • 淘宝几天会自动收货(淘宝几天会自动付款)

    淘宝几天会自动收货(淘宝几天会自动付款)

  • 手机怎么复制文件(手机怎么复制文件到另一个文件夹)

    手机怎么复制文件(手机怎么复制文件到另一个文件夹)

  • 拼多多平台乱扣费怎么解决(拼多多平台乱扣费可以打工商局电话吗)

    拼多多平台乱扣费怎么解决(拼多多平台乱扣费可以打工商局电话吗)

  • icloud满了怎么删除(icloud满了怎么清理)

    icloud满了怎么删除(icloud满了怎么清理)

  • ios13截图的照片找不到(iphone13 截图)

    ios13截图的照片找不到(iphone13 截图)

  • oppor17投屏功能怎么用(oppor17手机投射屏幕教程)

    oppor17投屏功能怎么用(oppor17手机投射屏幕教程)

  • 苹果耳机过了保修期能修吗(苹果耳机过了保修期怎么维修)

    苹果耳机过了保修期能修吗(苹果耳机过了保修期怎么维修)

  • xp系统任务栏怎么放到下面

    xp系统任务栏怎么放到下面

  • 海康威视硬盘不存在(海康威视硬盘不识别)

    海康威视硬盘不存在(海康威视硬盘不识别)

  • 华为p30pro性能模式(华为p30pro性能模式在哪里开)

    华为p30pro性能模式(华为p30pro性能模式在哪里开)

  • 访问限制密码忘记了(访问限制密码忘了有什么影响)

    访问限制密码忘记了(访问限制密码忘了有什么影响)

  • 快手小黄车闪退(快手小黄车闪退怎么解决)

    快手小黄车闪退(快手小黄车闪退怎么解决)

  • qctray.exe - qctray进程 是什么文件 作用是什么

    qctray.exe - qctray进程 是什么文件 作用是什么

  • 手动关闭445端口怎么操作?(关闭445端口方法命令)

    手动关闭445端口怎么操作?(关闭445端口方法命令)

  • 将yolov5中的PANet层改为BiFPN(yolov5输出result)

    将yolov5中的PANet层改为BiFPN(yolov5输出result)

  • 数学建模(三):预测(数学建模三个人谁最难)

    数学建模(三):预测(数学建模三个人谁最难)

  • 增值税税控开票软件怎么下载
  • 天猫提现一直没到账
  • 工程施工企业收入和成本需不需要设置按项目核算
  • 林业局会计咋样做账
  • 购买电视机产生的费用
  • 贸易公司一般纳税多少
  • 工程结算科目属于哪一类
  • 上级工会返还的会计分录
  • 已抵扣未入账的红字发票
  • 对公支出没有发票计入什么科目
  • 无法偿还的应付款项予以转账
  • 贴息收据税前扣除是什么
  • 税务稽查补缴增值税税款的账务处理
  • 如何解决电脑无法定位程序输入点
  • 单位外币账户
  • 个税系统人员信息一直在验证中
  • 购买机器配件怎么做会计分录
  • sinutrain破解版
  • thinkphp 路由
  • 进程控制块PCB不包括( )
  • srv.exe病毒
  • 企业信用贷款账户是什么
  • 房地产企业增值税怎么计算
  • PHP:imagetypes()的用法_GD库图像处理函数
  • php标识符
  • js设置input值
  • linux查看ssh服务开启
  • php 字节
  • 如何解决php使用延迟问题
  • 服务业的增值税
  • 资产处置损益计算公式
  • 用chatgpt写insar地质灾害的论文,重复率只有1.8%,chatgpt4.0写论文不是梦
  • timedatectl命令用法
  • php考试时间倒计时
  • 企业注销亏损怎么处理
  • 什么情况下可以转入资本公积
  • 一件代发退货如何处理
  • 农副产品增值税发票怎么开
  • 财务报表里的现金流量表括号是什么意思
  • 企业预提的费用计入什么科目
  • 软件服务费计入管理费用哪个明细
  • 客户提现产生的费用计入
  • 简易征收 简易计税
  • 预付房租收到发票后如何做账
  • 固定资产如何入账处理
  • 公司股东可以买公司股票吗
  • 出口货物不予免税的原因
  • 电子记录表怎么填写
  • 用友T3怎么结转成本费用
  • 一般纳税人购进税控设备如何抵扣
  • 关于小规模纳税人2023年的政策
  • 暂估固定资产的账务处理
  • mysql批量删除表sql
  • ubuntu安装软件没反应
  • freebsd常用命令
  • freebsd使用wifi
  • windows server 2008 r2开启远程访问
  • ip冲突不能上网怎么解决
  • linux 硬盘满了
  • Win7 64位纯净版无法安装第三方主题的可行破解方法
  • windows8开发者预览版中文版ISO下载
  • win10 2020h1
  • windows 开发工具
  • win10系统忘记电脑密码
  • win7桌面图标有小方块
  • opengl调色
  • js 原型链继承 原型式继承
  • python怎么样学
  • perl脚本教程视频
  • jquery的css样式
  • jquery插件免费下载
  • js 原型继承的几种方法
  • 河南电子税务局开票流程
  • 百旺怎么导出数据
  • 粮食企业所得税税率
  • 税务稽查延期检查最长多长时间最长不得超过30日
  • 失业保险金领取成功
  • 包角计算公式推导
  • 律师费不给了会怎么办
  • 农副产品营业执照范本
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设