Vue011_ 内置指令与自定义指令

内置指令与自定义指令

常用内置指令

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 }

自定义指令

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'

代码展示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>[v-cloak]{display: none;}</style></head><body><div id="example"><p v-text="url"></p><p v-html="url"></p><!-- :id -> 元素的唯一标识符。 --><!-- :src -> 指定图像的URL Specifies the URL of an image --><img :id='myid' :src="data:imageSrc" /><p><span ref="message">jd.com</span><button @click="showMsg">显示左侧文本</button></p><!-- v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none } --><p v-cloak>{{ url }}</p></div><script type="text/javascript" src="js/vue.js"></script><script>alert('模拟加载慢')new Vue({el: '#example',data: {url: '<a href = "https://www.jd.com/">京东</a>',myid: 'abc123',imageSrc: 'http://cn.vuejs.org/images/logo.png'},methods:{showMsg() {//$refs -> 一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例。alert(this.$refs.message.textContent)}}})</script></body>
</html>

结果展示

代码展示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="demo1"><p v-upper-text="msg"></p><p v-lower-text="msg"></p></div><div id="demo2"><p v-upper-text="msg2"></p><p v-lower-text="msg2"></p> <!-- 局部指令，此处不能用 --></div><script type="text/javascript" src="js/vue.js"></script><script>//注册全局指令Vue.directive('upper-text',function(el,binding){el.innerHTML = binding.value.toUpperCase()})new Vue({el: '#demo1',data: {msg: 'GeorgeDage AoliGei'},//包含 Vue 实例可用指令的哈希表。directives: {//注册局部指令'lower-text': {bind (el,binding) {el.innerHTML = binding.value.toLowerCase()}}}})new Vue({el: '#demo2',data: {msg2: 'I love kangkang'}})</script></body>
</html>

结果展示

Vue011_ 内置指令与自定义指令相关推荐

Vue中常用的内置指令及自定义指令
内置指令 v-bind [单向数据绑定] [格式:v-bind:属性名="data中定义的属性"] [简写::属性名="data中定义的属性"] <div ...
JavaWeb第三讲 JSP内置对象、基本动作指令、常见编译指令及四大作用域
JSP内置对象.基本动作指令.常见编译指令及四大作用域 (一) JSP工作原理当一个jsp页面第一次被访问的时候,jsp将执行以下三个步骤,之后的访问速度会因为class文件已经生成而大大提高,当j ...
awk 内置变量与自定义变量
点击上方"生信科技爱好者",马上关注真爱,请置顶或星标作者:ghostwu 原文:https://www.cnblogs.com/ghostwu/p/9085653.html A ...
文件自定义变量_awk 内置变量与自定义变量
点击上方"生信科技爱好者",马上关注真爱,请置顶或星标作者:ghostwu 原文:https://www.cnblogs.com/ghostwu/p/9085653.html A ...
java 多重注解_Java注解-元数据、注解分类、内置注解和自定义注解
大家好,我是乐字节的小乐,上次说过了Java多态的6大特性|乐字节,接下来我们来看看Java编程里的注解. Java注解有以下几个知识点:元数据注解的分类内置注解自定义注解注解处理器 Serv ...
2字节取值范围_Java注解-元数据、注解分类、内置注解和自定义注解|乐字节
大家好,我是乐字节的小乐,上次说过了Java多态的6大特性|乐字节,接下来我们来看看Java编程里的注解. Java注解有以下几个知识点: 元数据注解的分类内置注解自定义注解注解处理器 Ser ...
AngularJS-demo - 常用命令、内置服务、自定义服务、继承
AngularJS-demo - 常用命令.内置服务.自定义服务.继承常用命令: ng-app.ng-controller.ng-init.ng-repeat.ng-click 内置服务: $sco ...
form-create教程:给内置组件和自定义组件添加事件
本文将介绍form-create如何给内置组件和自定义组件添加事件 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue ...
大数据入门教程系列之Hive内置函数及自定义函数
本篇文章主要介绍Hive内置函数以及自定义UDF函数和UDFT函数,自定义UDF函数通过一个国际转换中文的例子说明. 操作步骤: ①.准备数据和环境 ②.演示Hive内置函数 ③.自定义UDF函数编写 ...

Vue011_ 内置指令与自定义指令

内置指令与自定义指令

常用内置指令

自定义指令

代码展示

结果展示

代码展示

结果展示

Vue011_ 内置指令与自定义指令相关推荐

最新文章

热门文章