2.0 vue内置指令与自定义指令
一、概述
模板在解析之前指令是存在的,但是解析完成以后就不存在了。
1.1 常用内置指令
1) v:text : 更新元素的 textContent
2) v-html : 更新元素的 innerHTML
3) v-if : 如果为 true, 当前标签才会输出到页
4) v-else: 如果为 false, 当前标签才会输出到页面
5) v-show : 通过控制 display 样式来控制显示/隐藏
6) v-for : 遍历数组/对象,提供三个参数(value, key, index),eg: v-for="(item, key, index) in items" :key="item.id",当我们在使用v-for进行渲染时,
尽可能使用渲染元素自身属性的id给渲染的元素绑定一个key值,这样在当前渲染元素的DOM结构发生变化时,能够单独响应该元素而不
触发所有元素的渲染。参考:【v-for 响应式key, index及item.id参数对:key值造成差异】
7) v-on : 绑定事件监听, 一般简写为@
8) v-bind : 强制绑定解析表达式, 可以省略 v-bind
9) v-model : 双向数据绑定
10) ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象
11) v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }
<style><!--样式的属性选择器-->/*属性选择器:在解析之前能匹配到这个属性,所以是隐藏的,但是解析以后这个指令就没有了,所以显示*/[v-cloak] { display: none }</style> <div id="example"><p v-cloak>{{content}}</p><p v-text="content"></p> <!--p.textContent = content--><p v-html="content"></p> <!--p.innerHTML = content--><p ref="msg">abcd</p><button @click="hint">提示</button> </div><script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript">new Vue({el: '#example',data: {content: '<a href="http://www.baidu.com">百度一下</a>'},methods: {hint () {// 获取p标签里面的内容 alert(this.$refs.msg.innerHTML)}}}) </script>
1.2 自定义指令
(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="test"><p v-upper-text="msg"></p><p v-lower-text="msg"></p> </div><div id="test2"><p v-upper-text="msg"></p><p v-lower-text="msg"></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: '#test',data: {msg: "I Like You"},// 注册局部指令:只在当前vm管理范围内有效 directives: {// 'lower-text'(el, binding) { //ECMAScript6 的简洁语法'lower-text': function (el, binding) {console.log(el, binding)el.textContent = binding.value.toLowerCase()}}})new Vue({el: '#test2',data: {msg: "I Like You Too"}}) </script>
转载于:https://www.cnblogs.com/shiyun32/p/9614561.html
2.0 vue内置指令与自定义指令相关推荐
- Vue中常用的内置指令及自定义指令
内置指令 v-bind [单向数据绑定] [格式:v-bind:属性名="data中定义的属性"] [简写::属性名="data中定义的属性"] <div ...
- Vue011_ 内置指令与自定义指令
内置指令与自定义指令 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHTML 3) v-if : 如果为 true, 当前标签 ...
- vue.js 数据替换_Vue.js实战笔记之Vue内置指令
指令是Vue模板中最常用的一项功能,它带有前缀v-,主要职责是当其表达式的值改变时,相应的将某些行为应用在 DOM 上. 基本指令 v-clock v-clock 不需要表达式,它会在 Vue 实例结 ...
- 浅谈Vue内置component组件的应用场景
官方的说明 渲染一个"元组件"为动态组件.依 is 的值,来决定哪个组件被渲染. <!-- 动态组件由 vm 实例的属性值 `componentId` 控制 --> & ...
- 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 ...
- form-create教程:给内置组件和自定义组件添加事件
本文将介绍form-create如何给内置组件和自定义组件添加事件 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue ...
最新文章
- python用什么软件编程1001python用什么软件编程-Python中免验证跳转到内容页的实例代码...
- python读文件写文件-python 文件读写操作
- AQS理解之七——AQS中的条件队列
- 动态规划训练13 [Catch That Cow poj3278]
- 金蝶二次开发好跳槽吗_金蝶财务软件不会操作怎么办?
- 3个表的连接需要 个关联条件。_购物篮分析(关联商品销售分析)
- java多线程基本概述(二)——Thread的一些方法
- Atitit 字符串转换数组main参数解析 args splitByWholeSeparator 	 		String string= -host 101.1 8*124 -db 1
- 【回归预测】基于matlab麻雀搜索算法优化CNN回归预测【含Matlab源码 282期】
- 网站访问计数器 php,用PHP生成访客计数器
- 网狐荣耀微星棋牌系列搭建教程
- tiny210 ubuntu下sd卡分区
- 为什么会出现淘宝客比价订单?怎样才能省钱购物?
- c语言实现灰度图转换为二值图
- 六种不同型号的电灯泡
- Leetcode 14.最长公共前缀(Longest Common Prefix)
- 将Windows XP 中文版变为英文版
- 剑灵南天国服务器位置,剑灵南天国实验室商城说明及FAQ
- 快速简单制作macOS Ventura系统ISO格式镜像
- 用python 实现数据反序列化处理 以及 算法的学习
热门文章
- android 连接mysql orm_Android ORM框架 GreenDao 的使用详解
- 718保时捷spyder_我要买保时捷718 Spyder的原因:新手也可以玩手动
- 百度网络推广带你了解网站文章锚文本优化需要注意的事项?
- 网络推广离不开关键词的精准挖掘
- 如果企业网站长时间没有排名可以从多个方面进行分析
- 均值已知检验方差_方差分析案例
- python 连接db2_大迷糊的博客
- vs调用堆栈窗口怎么弄出来_从零开始(1)栈帧、调用约定
- docker 删除容器_Docker (二) Windows10专业版安装教程
- python使用 pdb 进行调试--- python -m pdb xxx.py 即可 和gdb使用一样