(尚016)Vue指令(11个自带指令+自定义指令)
1.Vue常用指令
1)v:text:更新元素的 textContent
2)v-html:更新元素的 innerHTML
3)v-if:如果为true,当前标签才会输出到页面
4)v-else:如果为false,当前标签才会输出到页面
5)v-show:通过控制display样式来控制显示/隐藏
6)v-for:遍历数组/对象(最终通过列表显示)
7)v-on:绑定事件监听,一般简写为@
8)v-bind:强制绑定解析表达式,可以省略v-bind,简写为 :
9)v-model:双向数据绑定
10)ref:指定唯一标识,vue对象通过$els属性访问这个元素对象
11)v-cloak:防止闪现,与css配合;[v-cloak]{display:none}
2.test016.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*在显示之前匹配下面的v-cloak标签*/
/*[v-cloak]为属性选择器的样式*/
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<!--
常用内置指令
1)v:text:更新元素的 textContent 2)v-html:更新元素的 innerHTML 3)v-if:如果为true,当前标签才会输出到页面 4)v-else:如果为false,当前标签才会输出到页面 5)v-show:通过控制display样式来控制显示/隐藏 6)v-for:遍历数组/对象(最终通过列表显示) 7)v-on:绑定事件监听,一般简写为@ 8)v-bind:强制绑定解析表达式,可以省略v-bind,简写为 : 9)v-model:双向数据绑定 10)ref:指定唯一标识,vue对象通过$els属性访问这个元素对象 11)v-cloak:防止闪现,与css配合;[v-cloak]{display:none}
-->
<div id="example">
<p ref="content">吾乃常山赵子龙也!!!</p>
<button @click="hint">提示</button>
<p v-cloak>{{msg}}</p>
</div> <script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#example',
data:{
msg:'赵云',
},
methods:{
hint(){
//$refs有多个
alert(this.$refs.content.textContent)
}
}
})
</script>
</body>
</html>
==========================================================================
3.自定义指令
为啥有内置指令,还需要自定义指令?
因为内置指令不能满足自己所有需求,使用指令的话复用率特别高
1.test016(2).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.注册全局指令(针对所有的Vue对象都适用)
//'my-directive'为指令名
Vue.directive('my-directive',function(el,binding){
el.innerHTML=binding.value.toupperCase()
})
2.注册局部指令(针对某一个Vue)
directives:{
'my-directive':{
bind(el,binding){
el.innerHTML=binding.value.toupperCase()
}
}
}
3.使用指令
v-my-directive='xxx'
-->
<!--
需求:自定义2个指令
1.功能类型于v-text,但转换为全大写 v-upper-text
2.功能类型于v-text,但转换为全小写 v-lower-text
--> <div id="test1">
<p v-upper-text="msg1"></p>
<p v-lower-text="msg1"></p>
</div> <div id="test2">
<p v-upper-text="msg2"></p>
<p v-lower-text="msg2"></p>
</div> <script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
//定义全局指令
//el:指令属性所在的标签对像
//binding:包含指令相关信息数据的对象
Vue.directive('upper-text',function(el,binding){
console.log(el,binding)
el.textContent=binding.value.toUpperCase()
})
new Vue({
el:'#test1',
data:{
msg1:'make The CHANGE!!!'
},
directives:{//注册局部指令,只在当前vm管理范围test1范围内有效
//(通常属性名为字符串)lower-text属性名为啥要写成这样'lower-text',因为包含字符-
'lower-text':function(el,binding){
el.textContent=binding.value.toLowerCase()
}
}
}) new Vue({
el:'#test2',
data:{
msg2:'Just Do It!!!'
},
})
</script>
</body>
</html>
2.页面截图
厉害了!!!
(尚016)Vue指令(11个自带指令+自定义指令)的更多相关文章
- vue自定义指令实例使用（实例说明自定义指令的作用）
在写vue项目的时候,我们经常需要对后台返回的数据进行大量的渲染操作,其中就包含了大量的对特殊数据的进一步处理,比如说时间戳.图片地址.特殊数据显示等等特殊数据处理改进. 其实遇到这种情况,通过Vue ...
- Vue.js 第2章 钩子函数&自定义指令&过滤器&计算属性&侦听器
目标 钩子函数 自定义指令 自定义过滤器 计算属性 监听属性 局部自定义指令 为什么需要自定义指令 为了复用,为了代码的灵活 指令的分类:全局指令,局部指令 在vm外面创建的指令 通过Vue.dire ...
- Vue.js（16）之 directive自定义指令
推荐阅读:Vue.directive基础,在Vue模块开发中使用 全局指令 Vue.directive('全局自定义指令名称', { /* 自定义指令配置对象 */ }) 私有指令 <templ ...
- vue.js实现内部自定义指令和全局自定义指令------directive
在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东 directive 这个单词是我们写自定义指令的关键字哦 之定义指令为我们提供了几个钩 ...
- 在vue中创建自定义指令
原文:https://dev.to/ratracegrad/creating-custom-directives-in-vue-58hh 翻译:心上有杨 指令是带有 v- 前缀的特殊属性.指令的作用是 ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- vue 自定义指令（directive）实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
- vue之自定义指令
1.自定义指令的作用 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍 ...
- Vue - 自定义指令
1.Vue.directive(id,definition)注册一个全局自定义指令,接收两个参数,指令ID以及定义对象 2.钩子函数:将作用域与DOM进行链接,链接函数用来创建可以操作DOM的指令 b ...
随机推荐
- 27 多线程（一）——创建进程的三种方法、线程锁（同步synchornized与lock）
线程的流程 线程的创建 有三种方法,重点掌握前两种: 继承Thread类 实现Runnable接口(推荐使用:避免单继承的局限性) 实现Callable接口 根据java的思想,要少用继承,多用实现. ...
- java接口幂等性校验
关于接口幂等性的概念: 幂等性:同一接口调用多次(使用相同的参数),对系统的影响是相同的. 怎样才是对系统有影响? 有影响--->增删改操作,修改一个用户信息,删除用户与某人的关联关系,生成一个 ...
- SpringCloud整合过程中jar依赖踩坑经验
今天在搭建SpringCloud Eureka过程中,一直在报pom依赖错误,排查问题总结如下经验. 1.SpringBoot整合SpringCloud两者版本是有严格约束的,详细见SpringBoo ...
- 第一个.NET小程序
一.用户需求 做一个简单的网页版销售合同签核系统 1.业务员需要在手机或者电脑上操作,Key入销售合同 2.业务员填入相应的合同信息,对应主管签核 3.最终签核完,生成PDF版的销售合同,且上面自动加 ...
- 报告题目：HAO智能：HI + AI + OI
报告题目:HAO智能:HI + AI + OI 报告摘要:大数据面向异构自治的多源海量数据, 旨在挖掘数据间复杂且演化的关联.大数据知识工程(BigKE)从大数据的 HACE定理开始, 从大知识建模 ...
- 【Java拾遗】Java transient关键字
1. transient的作用及使用方法 2. transient使用小结 3. transient使用细节--被transient关键字修饰的变量真的不能被序列化吗? 1. transient的作用 ...
- Windows10如何卸载OneDrive
Windows10如何卸载OneDrive 来源 https://zhuanlan.zhihu.com/p/23985905 1) 禁止onedrive自启动简单的就是在任务管理器的启动中禁用oned ...
- css小技巧 --> 单标签实现单行文字居中，多行文字居左
可能出现的尺寸场景: 代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charse ...
- UCOSIII软件定时器
API函数 //创建 void OSTmrCreate (OS_TMR *p_tmr, CPU_CHAR *p_name, OS_TICK dly, OS_TICK period, OS_OPT op ...
- （四）react-native开发系列之debug调试
一个高效率的开发,不仅仅需要扎实的专业,掌握熟练的调试技巧也是必备技能,熟练的调试技能可以加快开发速度和提升代码质量,降低bug量,可以起到事半功倍的效果:今天来说下react-native在开发过程 ...