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事件: 例 ...
随机推荐
- 关于错误CSC : error CS0006：未能找到元数据文件
在不同的解决方案中把一个项目搬来搬去,终于出现了传说的CSC : error CS0006.编译的时候总是提示一个引用中不存在的项找不到.无论怎样删除项目,删除引用都没法通过生成. 最终解决方案: 用 ...
- 03springMVC注解式控制器开发
注解式控制器开发简介 注解式控制器开发HelloWorld HelloWorld的运行流程 处理器定义 REST简介 URL路径映射 数据绑定 不同的Model有相同的属性的处理 静态资源的处理 1 ...
- 工具-VS常用快捷键
项目管理: Ctrl+Shift+N: 新建项目 Ctrl+Shift+O: 打开项目 Ctrl+Shift+S: 全部保存 Shift+Alt+C: 新建类 Ctrl+Shift+A: 新建项 Sh ...
- N - 畅通工程再续
N - 畅通工程再续 思路:zz #include<cmath> #include<cstdio> #include<cstring> #include<io ...
- Java数据结构（排序篇）
冒泡排序:是经过n-1趟子排序完毕的,第i趟子排序从第1个数至第n-i个数,若第i个数比后一个数大(则升序,小则降序)则交换两数.大泡在上,小泡在下. 选择排序:每一趟从待排序的数据元素中选出最小(或 ...
- OpenLayers学习笔记3——使用jQuery UI美化界面设计
PC端软件在开发是有较多的界面库能够选择,比方DevExpress.BCG.DotNetBar等,能够非常方便快捷的开发出一些炫酷的界面,近期在学习OpenLayers.涉及到web前端开发,在设计界 ...
- 2016 提高组c++ 错题
需重做 树的重心 链表 计算机基础知识 无线通讯技术: 蓝牙,wifi,GPRS 现在常用的无线通信技术:FM调频广播(用于收音机): 2G.3G移动通信技术(中国移动.中国联通.中国电信正在运营的网 ...
- CZLayer的阴影
CALayer有一个shadow属性 意思是阴影 shadowcolor //颜色 shadowoffset //偏移 shadowOpacity //透明度 layer有一个方法 mas ...
- block的一些注意事项
1,定义block时是可以同时进行赋值的 2,block中是代码块,就是里面写的是语句,需要加分号 3,在block中,允许有多条语句 4,在带有参数的block中,声明部分参数名可以省略,但是建议写
- 关于PHP函数
从这里我开始聊一些php相关的东西了,因为视频教程里并没有讲到过多的JS,JQ,XML和AJAX,这些在后续自学之后再写一些: 有关php的基本语法数据类型什么的就不做介绍了,在PHP手册或各大学习网 ...