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>
2.0 vue内置指令与自定义指令的更多相关文章
- VUE:内置指令与自定义指令
VUE:内置指令与自定义指令 常用的内置指令 1)v:text 更新元素的 textContent 2)v-html 更新元素的 innerHTML 3)v-if 如果为true,当前标签才会输出到页 ...
- 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: 最大程度减 ...
- Linux常用基本命令:三剑客命令之-awk内置变量与自定义变量
AWK中,变量分为两种:内置变量与自定义变量. 常见的内置变量有: FS:输入字段分隔符, 默认为空白字符 OFS:输出字段分隔符, 默认为空白字符 RS:输入记录分隔符(输入换行符), 指定输入时的 ...
- Java注解-元数据、注解分类、内置注解和自定义注解|乐字节
大家好,我是乐字节的小乐,上次说过了Java多态的6大特性|乐字节,接下来我们来看看Java编程里的注解. Java注解有以下几个知识点: 元数据 注解的分类 内置注解 自定义注解 注解处理器 Ser ...
- form-create教程:给内置组件和自定义组件添加事件
本文将介绍form-create如何给内置组件和自定义组件添加事件 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue ...
- 9.1hadoop 内置计数器、自定义枚举计数器、Streaming计数器
1.1 计数器 计数器的作用是用来统计数量的,用于记录特定事件的次数,分为内置计数器.自定义java枚举计数器.自定义Stream计数器三大类.用于质量分析,或应用级统计.分析计数器的值比分析一堆日 ...
- Vue内置组件keep-alive的使用
本文主要介绍Vue内置组件keep-alive的使用. Vue内置组件keep-alive的使用 keep-alive接收三个props:●include - 字符串或正则表达式.只有名称匹配的组件会 ...
随机推荐
- Eclipse导入MyEclipse创建的WEB项目无法识别的解决方案
Eclipse导入MyEclipse创建的WEB项目无法识别的解决方案
- JavaScript之BOM对象
JavaScript bom对象 BOM对象 window对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: wi ...
- JS使用onscroll、scrollTop实现图片懒加载
今天做到项目中的图片展示,由于每一页的图片数量都很多,因此需要为图片的展示设计一种懒加载的功能. 第一要做的当然就是给程序添加滚动监听事件. //触发拉取图片开关,保证正在拉取时不能再次触发 var ...
- Linux一些基本配置
Linux发行版:centos 6.5 配置yum源 wget http://mirrors.163.com/.help/CentOS6-Base-163.repo -P /etc/yum.repos ...
- oracle查询所有初始化参数(含隐含参数)
年龄大了,感觉记性不是很好了,还是重新做笔记了.最近在整理些稿子,顺便在记录下oracle查询所有初始化参数(含隐含参数): SELECT i.ksppinm name, i.ksppdesc des ...
- 05: greenlet:轻量级的并发编程
网络编程其他篇 1.1 greenlet简介 1.greenlet原理 & 使用 1. greenle间切换 1)一个 “greenlet” 是一个很小的独立微线程,可以把它想像成一个堆栈帧, ...
- centos install go
https://golang.org/doc/install 一键安装 https://jamesnbr.wordpress.com/2017/10/18/golang-1-9-1-install-o ...
- opencv学习之路(3)、批量读取图片、视频分解、视频合成
一.批量有序读取图片 #include<opencv2/opencv.hpp> using namespace cv; void main() { //批量读取图片(有序) ]; ]; M ...
- Codeforces 808G Anthem of Berland - KMP - 动态规划
题目传送门 传送点I 传送点II 传送点III 题目大意 给定一个字符串$s$,和一个字符串$t$,$t$只包含小写字母,$s$包含小写字母和通配符'?'.询问$t$可能在$s$中出现最多多少次. 原 ...
- 关于python hashlib模块的使用
hashlib hashlib主要提供字符加密功能,将md5和sha模块整合到了一起,支持md5,sha1, sha224, sha256, sha384, sha512等算法 #!/usr/bin/ ...