零基础入门Vue之拘元遣将——其他常用指令&自定义指令
回首
在 零基础入门Vue之梦开始的地方——插值语法 我记录了v-bind、v-on、v-model的学习
在 零基础入门Vue之To be or not to be——条件渲染 我记录了v-if、v-else-if、v-else、v-show的学习
在 零基础入门Vue之影分身之术——列表渲染&渲染原理浅析 我记录了v-for的学习
为了推进我的Vue的学习，本篇将一次性介绍其他常用指令，并且记录如何 自定义指令
其他常用指令
在Vue中，除了已学过的八个指令之外，还有另外五个比较常用的指令
v-text 文本绑定指令
更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。
假设有如下数据：
new Vue({
el:"#root",
data(){
return {
msg:"Hello world"
}
}
})
那么html除了使用插值语法来显示msg内容之外，还可以这样子写：
<div id="root">
<span v-text="msg"></span>
</div>
v-html 富文本绑定指令
更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代
如果是v-text，仅仅只会当作文本解析，但如果我掏出了v-html，那么我所写的内容将会作为html来解析
new Vue({
el:"#root",
data(){
return {
msg:"<h1>Hello worldM</h1>"
}
}
})
此时，使用v-html会自动解析<h1>这个标签
<div id="root">
<span v-html="msg"></span>
</div>
警告：为了预防xss的攻击，千万不要在输入类元素或者具有提交类元素上使用v-html，请在可信任的元素上使用v-html
v-pre 阻止渲染指令
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
假设dom节点中，有些元素不需要渲染的，即可给这个节点打上v-pre指令，用法如下：
<div id="root">
<span v-pre>这样子写：{{data里面的属性}} 标识Vue的插值语法</span>
</div>
span标签里面的内容不会被Vue进行解析，这个指令可以提高渲染效率
v-cloak 渲染前标识指令
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
当给标签打上v-cloak时，未被解析的标签，会存在这个属性，当标签被解析时，这个属性消失，因此可以配合css这么用：
[v-cloak] {
display: none;
}
<div id="root">
<span v-html="msg" v-cloak></span>
</div>
当页面未被解析时，span标签没被显示，只有当页面被解析完成时，span标签才会出现
此指令可以语法网络卡顿时，未被解析的内容率先显示到页面上
v-once 指令
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
这个指令，使得节点只被解析一次，后续的数据修改，此指令都不会有任何变化
<div id="root">
<span v-text="msg" v-once></span>
</div>
Vue 自定义指令
在创建Vue配置项中，directives配置项，允许使用的人注册自定义指令
其中自定义指令可分为：
- 全局指令
- 局部指令
局部指令
new Vue({
el:"#root",
directives:{
orderName:{
bind(el,binding,vnode,oldVnode){}, //指令第一次绑定到元素时调用
inserted(el,binding,vnode,oldVnode){}, //绑定元素插入父节点调用
update(el,binding,vnode,oldVnode){}, //当前模板更新前调用（可能不是当前节点的更新）
componentUpdated(el,binding,vnode,oldVnode){}, //当前模板更新后调用（可能不是当前节点的更新）
unbind(el,binding,vnode,oldVnode){} //指令解绑时调用
},
}
});
<div id="root">
<!-- 注意虽然js里采用了驼峰命名，但标签使用时请用-连接每个单词 -->
<span v-order-name="1+1">hello</span>
</div>
参数详解 如下（详情请查看官网）：
- el：当前绑定节点
- binding：当前指令的绑定信息
- vnode：当前虚拟节点
- oldVnode：上一个虚拟节点
举个例子：假设我想创建一个v-big，指令使得绑定标签的文本放大到45px
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<!-- 注意虽然js里采用了驼峰命名，但标签使用时请用-连接每个单词 -->
<span v-order-name>hello</span>
</div>
</body>
<script>
new Vue({
el:"#root",
directives:{
orderName:{
bind(el,binding,vnode,oldVnode){
el.style.fontSize = '45px';
}
},
}
});
</script>
</html>
改进：如果我希望，这个大小由我自己定义，而不是写死
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<!-- 注意虽然js里采用了驼峰命名，但标签使用时请用-连接每个单词 -->
<span v-order-name="'45px'">hello</span>
</div>
</body>
<script>
new Vue({
el:"#root",
directives:{
orderName:{
bind(el,binding,vnode,oldVnode){
el.style.fontSize = binding.value;
}
},
}
});
</script>
</html>
更多的请参考官方例子：简介
全局指令
在Vue上一小节时，directives配置项配置出来的节点只允许当前Vue实例使用，当涉及到一个自定义指令给多个Vue实例/组件去使用，就该引入全局指令了
在Vue对象上有一个静态方法：directive
允许用户设置全局指令，并且能在多个实例中通用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root1">
<!-- 注意虽然js里采用了驼峰命名，但标签使用时请用-连接每个单词 -->
<span v-order-name="'45px'">hello</span>
</div>
<div id="root2">
<!-- 注意虽然js里采用了驼峰命名，但标签使用时请用-连接每个单词 -->
<span v-order-name="'78px'">hello</span>
</div>
</body>
<script>
Vue.directive("orderName",{
bind(el,binding,vnode,oldVnode){
el.style.fontSize = binding.value;
}
});
new Vue({
el:"#root1",
});
new Vue({
el:"#root2",
});
</script>
</html>
其配置项与局部指令雷同，再次不过多赘述
指令简写形式
如果你不关注自定义的指令执行时机的话，你可以直接写成如下形式：
new Vue({
el:"#root",
directives:{
orderName(){},
}
});
此时，执行实际，与binding一样
The End
本篇完~~~
零基础入门Vue之拘元遣将——其他常用指令&自定义指令的更多相关文章
- 零基础入门学习Python（6）--Python之常用操作符
前言 Python当中常用操作符,有分为以下几类.幂运算(**),正负号(+,-),算术操作符(+,-,*,/,//,%),比较操作符(<,<=,>,>=,==,!=),逻辑运 ...
- 【JAVA零基础入门系列】Day10 Java中的数组
什么是数组?顾名思义,就是数据的组合,把一些相同类型的数放到一组里去. 那为什么要用数组呢?比如需要统计全班同学的成绩的时候,如果给班上50个同学的成绩信息都命名一个变量进行存储,显然不方便,而且在做 ...
- 零基础入门 实战mpvue2.0多端小程序框架
第1章 课程快速预览(必看!!!)在这一章节中,老师讲带领你快速预览课程整体.其中,涉及到为什么要做这么一门实战课程.制作一个小程序的完整流程是怎么样的,以及如何做项目的技术选型. 第2章 30 分钟 ...
- 零基础入门 Java 后端开发，有哪些值得看的视频?
目前网络上充满了大量的 Java 视频教程,然而内容却鱼龙混杂,为了防止小伙伴们踩坑,一枫结合自己的学习经验,向大家推荐一些不错的学习资源. 作为一名非科班转码选手,可以说,我是在哔哩哔哩上的研究生! ...
- 从零基础入门JavaScript（1）
从零基础入门JavaScript(1) 1.1 Javascript的简史 1995年的时候 由网景公司开发的,当时的名字叫livescript 为了推广自己的livescript,搭了j ...
- 函数:我的地盘听我的 - 零基础入门学习Python019
函数:我的地盘听我的 让编程改变世界 Change the world by program 函数与过程 在小甲鱼另一个实践性超强的编程视频教学<零基础入门学习Delphi>中,我们谈到了 ...
- Cloudera Manager、CDH零基础入门、线路指导 http://www.aboutyun.com/thread-9219-1-1.html (出处: about云开发)
Cloudera Manager.CDH零基础入门.线路指导http://www.aboutyun.com/thread-9219-1-1.html(出处: about云开发) 问题导读:1.什么是c ...
- 【JAVA零基础入门系列】Day2 Java集成开发环境IDEA
开发环境搭建好之后,还需要一个集成开发环境也就是IDE来进行编程.这里推荐的IDE是IDEA,那个老掉牙的Eclipse还是先放一边吧,(手动滑稽). IDEA的下载地址:http://www.jet ...
- 【JAVA零基础入门系列】Day4 变量与常量
这一篇主要讲解Java中的变量,什么是变量,变量的作用以及如何声明,使用变量. 那么什么是变量?对于初学者而言,可以将变量理解为盒子,这些盒子可以用来存放数据,不同类型的数据需要放在对应类型的盒子里. ...
- 【JAVA零基础入门系列】Day5 Java中的运算符
运算符,顾名思义就是用于运算的符号,比如最简单的+-*/,这些运算符可以用来进行数学运算,举个最简单的栗子: 已知长方形的长为3cm,高为4cm,求长方形的面积. 好,我们先新建一个项目,命名为Rec ...
随机推荐
- freeswitch配置SBC的方案
概述 freeswitch 是一款好用的开源软交换平台. 但是,fs不是专为SBC而开发的,所以需要做一些定制化的配置和开发. 本文主要介绍如何利用fs的基本功能配置一个简单的SBC方案,满足一般化需 ...
- Go语言安装（Windows10）
一. 官网下载 https://golang.google.cn/dl/ 二. 软件包安装 选择对应的路径进行安装 三. 环境变量设置 1.path 检查系统环境变量Path内已经添加Go的安 ...
- python常见面试题讲解（六）取近似值
题目描述 写出一个程序,接受一个正浮点数值,输出该数值的近似整数值.如果小数点后数值大于等于5,向上取整:小于5,则向下取整. 输入描述: 输入一个正浮点数值 输出描述: 输出该数值的近似整数值 示例 ...
- 机器学习-决策树系列-GBDT算法-集成学习-30
目录 1. 复习 2. GBDT 3. gbdt应用于二分类: 3. gbdt应用于多类 4. 叶子节点输出值c的计算 5. GBDT的其他应用 6. GBDT+LR 代码实现 1. 复习 再开始学习 ...
- Servlet系列：生命周期（init、 service、destroy）详解
Servlet的生命周期是由Web容器(如Tomcat)管理的,包括以下三个阶段: 加载和实例化:当Web应用程序启动时,Web容器会加载和实例化Servlet.加载和实例化过程可以在应用程序启动时自 ...
- 基于html5+javascript技术开发的房贷利率计算器，买房的码农们戳进来
房贷计算器是一款专为购房者设计的实用工具应用,其主要功能是帮助用户详细计算房贷的还款金额.利息以及还款计划等.通过这款软件,用户可以更加便捷地了解到自己的还款情况和计划,从而更好地规划自己的财务.下面 ...
- PHPCMS V9安装出现DNS解析失败的解决方法-不支持采集和保存远程图片
目前因为phpcms官网停止解析后,很多人安装phpcms v9出现如下错误: 这是因为检测dns解析的域名是phpcms官网的域名,官网域名停止解析后肯定检测失败.解决方法如下: 打开/ ...
- ChatGPT-NextWeb部署和调试打造属于自己的GPT
首先我关注这个项目有一段时间了,不得不说作者和他的社区真的很猛! 首先这个项目截至目前已经有了40.9K的Start了,Fork也已经有了38.1K了,这个数据真的超级牛批了. 那么我们来看一下这款号 ...
- 【水一篇】骚操作之net 6的winform启动的同时启动Net 6 WebApi【同一套代码】
引言 有段时间没有写博客了,不知道写什么,加上最近一直在玩单片机方面的东西,所以有一些懈怠.首先呢,为什么会有这么一个问题,是在一个QQ群里,有看到有人提问,能不能在启动Winform的同时去启动一个 ...
- [转帖]清除掉shared pool中某条sql语句方法
https://www.xifenfei.com/2012/02/%E6%B8%85%E9%99%A4%E6%8E%89shared-pool%E4%B8%AD%E6%9F%90%E6%9D%A1sq ...