VUE：内置指令与自定义指令
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}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="example">
<p ref="content">taosir is learning...</p>
<button @click="hint">提示</button>
<!--<p v-text="msg"></p>-->
<p v-cloak>{{msg}}</p>
</div> <script type="text/javascript" src="../js/vue.js" ></script>
<script>
alert('----')
new Vue({
el:'#example',
data:{
msg:'涛先森正在努力学习'
},
methods:{
hint(){
alert(this.$refs.content.innerHTML);
}
}
})
</script>
</body>
</html>
自定义指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.注册全局指令
Vue.directive('my-directive',function(el,binding){
el.innerHTML = binding.value.toupperCase()
})
2.注册局部指令
directives：
'my-directive':{
bind(el,binding){
el.innerHTML = binding.value.toupperCase()
}
}
3.使用指令
v-my-directive='xxx'
-->
<!--
需求：自定义2个指令
1.功能类似于 v-text，但是转换为全大写
2.功能类似于 v-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>
//定义全局指令
//el：指令属性所在的标签对象
//binding：包含指令相关信息数据的对象
Vue.directive('upper-text',function(el,binding){
console.log(el,binding);
el.textContent = binding.value.toUpperCase()
}) new Vue({
el:'#test1',
data:{
msg1:'taosir love java!'
},
//注册局部指令
directives:{
'lower-text'(el,binding){
el.textContent = binding.value.toLowerCase()
}
}
}) new Vue({
el:'#test2',
data:{
msg2:'taosir love Vue!'
}
})
</script>
</body>
</html>
VUE：内置指令与自定义指令的更多相关文章
- Vue 内置指令 && 自定义指令
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- vue_简介_渐进式 js 框架_内置指令_自定义指令_自定义插件
vue 尤雨溪 华裔 Google 工程师 遵循 MVVM 模式 编码简洁,体积小,运行效率高,适合 移动 / PC 端 开发 动态构建用户界面: 异步获取后台数据,展现到页面 渐进式 js 框架 渐 ...
- Angular中的内置指令和自定义指令
NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...
- form-create教程:给内置组件和自定义组件添加事件
本文将介绍form-create如何给内置组件和自定义组件添加事件 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue ...
- Linux常用基本命令：三剑客命令之-awk内置变量与自定义变量
AWK中,变量分为两种:内置变量与自定义变量. 常见的内置变量有: FS:输入字段分隔符, 默认为空白字符 OFS:输出字段分隔符, 默认为空白字符 RS:输入记录分隔符(输入换行符), 指定输入时的 ...
- Java注解-元数据、注解分类、内置注解和自定义注解|乐字节
大家好,我是乐字节的小乐,上次说过了Java多态的6大特性|乐字节,接下来我们来看看Java编程里的注解. Java注解有以下几个知识点: 元数据 注解的分类 内置注解 自定义注解 注解处理器 Ser ...
- 9.1hadoop 内置计数器、自定义枚举计数器、Streaming计数器
1.1 计数器 计数器的作用是用来统计数量的,用于记录特定事件的次数,分为内置计数器.自定义java枚举计数器.自定义Stream计数器三大类.用于质量分析,或应用级统计.分析计数器的值比分析一堆日 ...
- Vue内置组件keep-alive的使用
本文主要介绍Vue内置组件keep-alive的使用. Vue内置组件keep-alive的使用 keep-alive接收三个props:●include - 字符串或正则表达式.只有名称匹配的组件会 ...
- vue内置指令与自定义指令
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
随机推荐
- Spring知识梳理
Spring框架介绍 Spring是一个贯穿各层为javaEE提供一站式解决方案的框架,Spring中主要有容器模块,AOP模块,ORM和DAO模块,Web模块等等,具体有以下功能特征. IOC(或者 ...
- PatentTips - Controlling TSC offsets for multiple cores and threads
BACKGROUND Many processors include a time stamp count (TSC) counter which is typically implemented a ...
- [ASP.NET]EF跨项目调用问题
在一个项目中调用另一个项目中的模型,在该项目中添加一个模型,解决自动提示问题using问题
- redis代码解析-事务
redis 的事务相关的几个命令分别为 watch multi exec. watch 可以监控一个变量在事务开始执行之前是否有被修改.使用方式为: WATCH key [key ...] 在redi ...
- osEye.Net：离别是为了将来的重逢
这一时刻已经成为osEye历史..... 在热心网友的关怀和鼓励之下,osEye.net将继续运行着,感谢你们陪伴osEye一起走过.... 与你相知相恋已经有4个年头了,你的成长到成熟都让我历历在目 ...
- plsql解决64位解决办法
plsql解决64位解决办法 设置PLSQL Developer访问本机64位Oracle 由于在本机Windows Server 2008 R2 X64上安装了64位的Oracle 11.2.0.1 ...
- jboss final 7.1.1相关error以及解决方式
问题1 报错提示: MSC00001: Failed to start service jboss.web.deployment.default-host./: Caused by: java.lan ...
- 建议53：用状态模式美化代码，关于python-state工具包的理解
在<编写高质量代码:改善python程序的91个建议>的建议53:用状态模式美化代码小节中,介绍了状态模式例如以下:就是当一个对象的内在状态改变时,同意改变其行为,但这个对象看起来 ...
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 用SPD开发SharePoint应用程序
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 用SPD开发SharePoint应用程序 非常多开 ...
- MQ发送定时消息
通过延时发送来发送定时消息. RocketMQ只支持固定精度时间的延时消息发送:1s 5s 10s 30s 1m 2m 3m 4m 5m 6m 7m 8m 9m 10m 20m 30m 1h 2h 若 ...