Vue核心基础6:Vue内置指令、自定义指令、生命周期

1 Vue中的内置指令

    <script>const vm = new Vue({el: '#root',data: {n: 1,m: 100,name: 'Vue',str: '<h3>你好</h3>'}})</script>

1.1 v-text

<div v-text="name"></div>

 

1.2 v-html

<div v-html="str"></div>

 

1.3 v-cloak

 

1.4 v-once

<h2 v-once>初始化的n值: {{n}}</h2>
<h2>当前的n值: {{n}}</h2>
<button @click="n++">加1</button>

 

1.5 v-pre

<h2 v-pre>Vue其实很简单的</h2>
<h2>当前的n值: {{m}}</h2>
<h2 v-pre>当前的n值: {{m}}</h2>
<button @click="m++">加1</button>

2 自定义指令

【代码】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义指令</title><script src="../js/vue.js"></script>
</head><body><!-- 需求1:定义一个v-big指令,和 v-text功能类似,但会把绑定的数值方法10倍 --><!-- 需求2:定义一个v-fbind指令, 和v-bind功能类似,但可以让其绑定的input元素默认获得焦点--><div id="root"><h2>当前的n值: <span v-text="n"></span></h2><h2>放大十倍后的n值: <span v-big="n"></span></h2><button @click="n++">加1</button><hr><!-- <input type="text" v-bind:value="n"> --><input type="text" v-fbind:value="n"></div><script>/*     // 定义全局指令Vue.directive('fbind', {// 1.指令和元素成功绑定时(一上来的时候);bind(element, binding) {element.value = binding.value},// 2.指令所在元素被插入页面时调用inserted(element, binding) {element.focus()},// 3.指令所在模板被重新解析时调用update(element, binding) {// console.log('update')element.value = binding.value},})  */const vm = new Vue({el: '#root',data: {name: 'Vue',n: 1},// 所有指令相关的函数中的this都指向windowdirectives: {// big函数何时会被调用// 1.指令和元素成功绑定时(一上来的时候);// 2.指令所在的模板被重新解析时;big(element, binding) {element.innerHTML = binding.value * 10},fbind: {// 1.指令和元素成功绑定时(一上来的时候);bind(element, binding) {element.value = binding.value},// 2.指令所在元素被插入页面时调用inserted(element, binding) {element.focus()},// 3.指令所在模板被重新解析时调用update(element, binding) {// console.log('update')element.value = binding.value},}}})</script>
</body></html>

3 生命周期

【代码】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>分析生命周期</title><script src="../js/vue.js"></script>
</head><body><div id="root"><!-- <h2 :style="{opacity: opacity}">欢迎学习Vue</h2> --><h2>当前的n值是: {{n}}</h2><button @click="add">加1</button><button @click="destory">点我销毁vm</button></div><script>const vm = new Vue({el: '#root',data: {n: 1,},methods: {add() {this.n++},destory() {console.log('销毁vm')this.$destroy()}},beforeCreate() {console.log('beforeCreate', this)// debugger},created() {console.log('created', this)},beforeMount() {console.log('beforeMount', this)},mounted() {console.log('mounted', this)},beforeUpdate() {console.log('beforeUpdate', this)},updated() {console.log('updated', this)},beforeDestroy() {console.log('beforeDestroy', this)},destoryed() {console.log('destoryed', this)}})</script>
</body></html>


 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/685097.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

最小生成树(Kruskal算法及相关例题)

1.Kruskal算法概念以及基本思路 &#xff08;1&#xff09;概念&#xff1a; 克鲁斯卡尔算法是求连通网的最小生成树的另一种方法。它的时间复杂度为O&#xff08;ElogE&#xff09;(E是图G的边的总数)&#xff0c;适合于求边稀疏的网的最小生成树 。 其基本思想是&#xff…

黄金交易策略(Nerve Nnife.mql4):做单手数设计

完整EA&#xff1a;Nerve Knife.ex4黄金交易策略_黄金趋势ea-CSDN博客 NK的做单量是由参数设定的&#xff0c;以下分别是参数项&#xff1a; 考虑到复利的情况&#xff0c;若10000本金&#xff0c;在以上三个参数的设计下&#xff0c;第1单的购买量是0.01*10,第2单是0.01*10*2…

Java迭代器详解,看这一篇就够了

文章目录 &#x1f6a9;Java 迭代器详解 &#x1f4da;迭代器的定义 &#x1f4d2;认识Iterator ✏️类结构图 ✒️Iterable接口 &#x1f58d;️Iterator接口 &#x1f4c3;Iterator接口的方法 &#x1f4d9;迭代器的使用 &#x1f3f7;️使用迭代器遍历集合 &#x1f516;Ite…

ES实战--集群扩展

查看ES集群状态: GET /_cluster/health?prettytrue当一个节点加入集群的时候,ES会自动地尝试将分片在所有节点上进行均匀分配. 如果更多的节点加入集群,ES将试图在所有节点上均匀分配分片数量.这样每一个新加入的节点都能通过部分数据来分担负载 第二个节点发现第一个节点,并…

[BIZ] - 1.金融交易系统特点

1. 典型数据汇总 数据 说明 新增数据量(条/天) Qps(条/s) 消息大小(Byte) 实时性 可丢失性 可恢复性 实时行情 1.使用场景&#xff1a;交易&#xff0c;报价&#xff0c;策略验证&#xff1b; 2.冷热分离&#xff1a;彭博行情/其他行情&#xff1b;黄金&期货行情/…

数组操作C

数组操作 Description 给你一个长度为 n 的数组&#xff0c;并给出如下几种操作&#xff1a; 在下标为 a 的位置插入一个整数 b&#xff0c;如果其后有元素&#xff0c;则全部后移。例如&#xff0c;数组为 1, 2, 3&#xff0c;在下标为 1 的位置插入 4&#xff0c;则数组变为…

acwing周赛115第二题-奶牛照相

5132. 奶牛照相 - AcWing题库 约翰的农场有 n 头奶牛&#xff0c;编号 1∼n。 其中&#xff0c;第 i 头奶牛的宽度为 wi&#xff0c;高度为 hi&#xff0c; 有一天&#xff0c;它们聚餐后决定拍照留念。 关于拍照的描述如下&#xff1a; 它们一共拍了 n 张照片&#xff0c;其中…

PyQt5中exec()与exec_()的区别

在PyQt5中&#xff0c;exec()和exec_()是两个不同的方法&#xff0c;用于执行动态创建的Python代码。它们的主要区别在于exec()是Python的关键字&#xff0c;但不能直接用作方法名&#xff0c;因此在PyQt5中&#xff0c;使用exec_()作为替代。 exec_()方法接受一个字符串作为参…

debian11 安装 k8s,containerd ,阿里云镜像(已成功)

1. 环境准备 系统要求&#xff1a;至少 2GB RAM&#xff08;建议 4GB 或更多&#xff09;&#xff0c;网络连接。 节点准备&#xff1a;至少 3 台机器&#xff0c;1 台作为 Master 节点&#xff0c;2 台作为 Worker 节点。 安装sudo apt update apt install sudo设置主机名&a…

Java图形化界面编程——AWT概论 笔记

2.3 Container容器 2.3.1 Container继承体系 Winow是可以独立存在的顶级窗口,默认使用BorderLayout管理其内部组件布局;Panel可以容纳其他组件&#xff0c;但不能独立存在&#xff0c;它必须内嵌其他容器中使用&#xff0c;默认使用FlowLayout管理其内部组件布局&#xff1b;S…

Spring Cloud Feign:声明式服务调用

1. 介绍 Spring Cloud Feign 1.1 什么是 Spring Cloud Feign Spring Cloud Feign 是一个基于 Netflix Feign 的声明式服务调用客户端&#xff0c;它简化了基于 REST 的服务调用&#xff0c;使得服务之间的通信变得更加轻松和直观。通过 Feign&#xff0c;开发人员可以像调用本…

交通管理|交通管理在线服务系统|基于Springboot的交通管理系统设计与实现(源码+数据库+文档)

交通管理在线服务系统目录 目录 基于Springboot的交通管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、用户信息管理 2、驾驶证业务管理 3、机动车业务管理 4、机动车业务类型管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计…

MySQL学习Day15——MySQL安装与使用

一、Linux下的MySQL的安装与使用: 卸载MySQL: 1.关闭当前MySQL服务:systemctl stop mysql.service 2.查看当前mysql安装状况:rpm -qa | grep -i mysql 3.卸载上述命令查询出的已安装的程序:yum remove mysql-xxx mysql-xxx mysql-xxxx 4.删除mysql相关文件: (1)查找相关文…

Python五级考试笔记

Python五级考试笔记【源源老师】 五级标准 一、 掌握字符串的转义符、format()格式化方法。 二、 掌握列表、元组、字符串、range类型的用法及常用操作。 三、 理解字典类型的概念&#xff0c;掌握它的基础用法及操作。 四、 理解集合类型的概念&#xff0c;掌握它的基础用法及…

解决vscode报错,在赋值前使用了变量“XXX“

问题&#xff1a;如图所示 解决方法&#xff1a; 法一&#xff1a; 补全函数使其完整 法二&#xff1a; 使用断言

c++Qt网络操作

1、基础概念 1.1 TCP/UDP TCP 是一种面向连接的传输层协议&#xff0c;它能提供高可靠性通信(即数据无误、数据无丢失、 数据无失序、数据无重复到达的通信) 适用情况&#xff1a; 1.SN/QQ等即时通讯软件的用户登录账户管理相关的功能通常采用TCP协议 2、适合于对传输质量要求较…

【STM32 CubeMX】串口编程DMA

文章目录 前言一、DMA方式1.1 DMA是什么1.2 CubeMX配置DMA1.3 DMA方式函数使用DMA的发送接收函数 总结 前言 在嵌入式系统中&#xff0c;串口通信是一项至关重要的功能&#xff0c;它允许单片机与外部设备进行数据交换&#xff0c;如传感器、显示器或其他设备。然而&#xff0…

Linux笔记之xhost +和docker的关系以及GDK_SCALE和GDK_DPI_SCALE详解

Linux笔记之xhost 和docker的关系以及GDK_SCALE和GDK_DPI_SCALE详解 ——2024-02-11 code review! 文章目录 Linux笔记之xhost 和docker的关系以及GDK_SCALE和GDK_DPI_SCALE详解xhost 的作用xhost 与 Docker 的关系 -e GDK_SCALE 和 -e GDK_DPI_SCALE详解GDK_SCALEGDK_DPI_SC…

【使用IntelliJ IDEA 配置Maven入门——详细讲解】

使用IntelliJ IDEA 配置Maven 1. 介绍2. 安装 Maven&#xff08;如果你的系统尚未安装&#xff09;3. 在 IntelliJ IDEA 中配置 Maven4. 创建/导入 Maven 项目5. 编译和运行 Maven 项目6. 提示 1. 介绍 IntelliJ IDEA 是一个广受欢迎的Java集成开发环境&#xff08;IDE&#x…

【Linux】进程的初步认识

进程的初步认识 基本概念描述进程task_struct-PCB的一种task_stuct内容分类 查看进程通过系统调用获取进程标识符 基本概念 要了解进程&#xff0c;首先我们要知道两点 我们可以同时启动多个程序&#xff0c;也就意味着我们可以将多个.exe文件加载到内存操作系统如何去管理这些…