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

  • 论坛营销对企业的品牌营销推广的重要性(论坛营销对企业的影响)

    论坛营销对企业的品牌营销推广的重要性(论坛营销对企业的影响)

  • 惠普cq511笔记本以太网卡型号(惠普cq511电源)(惠普cq511配置)

    惠普cq511笔记本以太网卡型号(惠普cq511电源)(惠普cq511配置)

  • 梦幻西游怎么赚钱(梦幻西游怎么赚三界功绩快)

    梦幻西游怎么赚钱(梦幻西游怎么赚三界功绩快)

  • 华为nova7 pro防水级别是多少(华为nova7pro防水吗)

    华为nova7 pro防水级别是多少(华为nova7pro防水吗)

  • 荣耀怎么导入sim卡联系人(荣耀怎么导入联系人到新手机)

    荣耀怎么导入sim卡联系人(荣耀怎么导入联系人到新手机)

  • 小米手机来电秀如何设置(小米手机来电秀怎么取消)

    小米手机来电秀如何设置(小米手机来电秀怎么取消)

  • 微信朋友圈看不见别人发的图片怎么回事(微信朋友圈看不到内容,打开朋友圈就能看到,为什么)

    微信朋友圈看不见别人发的图片怎么回事(微信朋友圈看不到内容,打开朋友圈就能看到,为什么)

  • word系统中输入文档时按enter键后将产生什么符号(文档的输入)

    word系统中输入文档时按enter键后将产生什么符号(文档的输入)

  • 不知道手环品牌怎么查连(不知道手环品牌怎么连接)

    不知道手环品牌怎么查连(不知道手环品牌怎么连接)

  • 手机没连接耳机成耳机状态怎么办(手机没连接耳机成耳机状态怎么办苹果)

    手机没连接耳机成耳机状态怎么办(手机没连接耳机成耳机状态怎么办苹果)

  • 通信大数据行程卡是通过什么定位的(通信大数据行程卡怎么更换手机号)

    通信大数据行程卡是通过什么定位的(通信大数据行程卡怎么更换手机号)

  • airpods一打电话就断开(airpods为什么打电话就断)

    airpods一打电话就断开(airpods为什么打电话就断)

  • 为什么微信突然要验证登录(为什么微信突然要重新登录)

    为什么微信突然要验证登录(为什么微信突然要重新登录)

  • 布丁压缩可以删除吗(布丁压缩可以删除文件吗)

    布丁压缩可以删除吗(布丁压缩可以删除文件吗)

  • 本机imei条码什么意思(imei编码规则)

    本机imei条码什么意思(imei编码规则)

  • 电脑键盘符号怎么转换(电脑键盘符号怎么输入)

    电脑键盘符号怎么转换(电脑键盘符号怎么输入)

  • vivoz1支持万能遥控吗(vivoz1支持万能遥控器吗)

    vivoz1支持万能遥控吗(vivoz1支持万能遥控器吗)

  • 美版苹果x自带耳机吗(美版苹果x用着怎么样)

    美版苹果x自带耳机吗(美版苹果x用着怎么样)

  • 拼多多怎么注册开店(拼多多怎么注册自己的网店)

    拼多多怎么注册开店(拼多多怎么注册自己的网店)

  • 抖音商品功能怎么开通(抖音我商品怎么弄)

    抖音商品功能怎么开通(抖音我商品怎么弄)

  • cad2019里平方米怎么打(cad平方米符号怎么打)

    cad2019里平方米怎么打(cad平方米符号怎么打)

  • 红米8什么时候发布(小米10pro什么时候上市)

    红米8什么时候发布(小米10pro什么时候上市)

  • 如何看淘宝等级(淘宝一个钻多少单)

    如何看淘宝等级(淘宝一个钻多少单)

  • 鸿蒙系统怎么设置自动对齐图标?(鸿蒙系统怎么设置桌面小组件)

    鸿蒙系统怎么设置自动对齐图标?(鸿蒙系统怎么设置桌面小组件)

  • 如何开具免税发票
  • 个税漏申报了一个月在哪里申报
  • 固定资产无法使用不能带来经济利益是否需计提租金
  • 小企业会计利润报表
  • 小规模人力资源外包税率
  • 期初固定资产净值在资产负债表中的哪里
  • 进料加工企业的增值税如何处理
  • 非营利组织注册登记证件图片
  • 企业微信收款如何同步给别人
  • 出口退税当期不得免征和抵扣的税额
  • 报销个人费用如何定性
  • 图文解析定期定额小规模纳税人怎么申报?
  • 开公司怎么报账
  • 价内税和价外税区别
  • 代开专票地税没交怎么办?
  • 餐听发票可以开专用发票吗?
  • 餐饮行业月营业额怎么算
  • 资产处置损益的明细科目有哪些
  • 固定资产清理销项税
  • 税收返还会计处理
  • 土地出让金怎么入账
  • 供应商赠送
  • 货款已经收到
  • 前期投资费用怎么做账
  • windowsserver2003设置用户密码
  • 买手机5000预算
  • 支付宝国际驾照有效期是多久
  • 银行利息为什么只算10个月
  • 要看网怎么找
  • win10没有音效设置
  • hif文件怎么打开
  • 融资租赁业务的操作程序
  • vue父组件调用子组件的方法报错
  • 选择简易计税方法计税的有
  • 机动车发票金额含税吗
  • 停在花朵上,好像在认真的听同学们读课文修改病句
  • 跆拳道馆怎么盈利
  • php数据库编程
  • 大模型时代的自然语言处理
  • ssh-keygen命令
  • php sleep函数
  • php 数学函数
  • 浅析企业坏账产生的原因及对策
  • 一般纳税人怎么申请纳税
  • 航天金税盘维护费什么时候交
  • 人力资源外包服务企业
  • 事业单位财政拨款收入会计分录
  • 公账钱怎么取出
  • 民非企业银行利息计入其他收入,那增值税申报吗
  • mysql 速度慢
  • sql使用cast进行数据类型转换示例
  • 定期定额纳税申报表计税依据怎么填
  • 年末资产减值损失可以税前扣除吗
  • 海关进口增值税专用缴款书在哪里打印
  • 企业增资扩股如何办理
  • 会计原始分录包括什么
  • 金税盘如何查看是否清卡
  • 暂估怎么冲回
  • 安装固定资产领域有哪些
  • 长期股权投资是什么类的科目
  • 产品销售成本计算表
  • Win7旗舰版系统安装
  • debian reference
  • ubuntu搭建go环境
  • win10收不到20h2更新
  • linux ping命令的用法
  • 好用linux
  • mysql如何添加外键
  • js布尔类型用法
  • 删除了c盘安全组或用户
  • python selenium原理
  • python 处理mp3
  • Node.js与Sails redis组件的使用教程
  • ubuntu touch教程
  • 浅谈一下新冠的好处
  • python怎么定义
  • 增值税纳税申报表附列资料(一)
  • 12123罚款滞纳金不能交嘛
  • 可以抵扣的消费税有哪些
  • 准予扣除是什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设