Vuejs指令
一、内置指令
①v-text：和 {{}} 一样，唯一的区别是，{{}} 会造成闪烁问题，而 v-text 不会有闪烁问题
<div id="app">
<h1 v-text='message'></h1>
<h1 v-text='message'></h1>
<h1 v-text='message'></h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
message:'hello world'
}
});
</script>
②v-cloak：如果还想用 {{}} ，但是又不想有闪烁问题，可以使用 v-cloak，在头部外加一个特殊的样式[cloak] {display:none;} ，然后在vue管理的模板入口节点上使用v-cloak，原理是默认一开始被vue管理的模块是隐藏的，当vue解析处理完DOM模板之后，会自动去除这个样式
<style>
[cloak]{
display: none;
}
</style>
<div id="app" v-cloak>
<h1>{{message}}</h1>
<h1>{{message}}</h1>
<h1>{{message}}</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
message:'hello world'
}
});
</script>
③v-html：可以需要输入带有html标签的内容，可以使用v-html。但是如果发现有script标签是不会渲染的，vue这里做了安全处理，为了防止XSS攻击（利用往网页中注入js脚本，读取Cookie，发送到其他服务器，或者直接跳转到钓鱼网站）
<div id="app">
<div v-html='htmlStr1'></div>
<div v-html='htmlStr2'></div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
htmlStr1:'<h1>hello world</h1>',
htmlStr2:"<script>window.alert('wanner')<\/script>",
},
});
</script>
④v-show：条件的显示和隐藏，无论真假都会渲染显示在DOM结构中，条件为真，则让display显示，条件为假，则让display不显示，如果需要频繁的切换显示和隐藏，则使用v-show。
<div id="app">
<h1 v-show='seen'>hello world</h1>
<h1 v-show='hide'>hello world</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
seen:true,
hide:false,
}
});
</script>
⑤v-if：真正的条件渲染，条件为真，则渲染这个DOM，条件为假，则移除不渲染这个DOM，如果只是一次显示和隐藏或者很少的条件改变，则建议使用v-if。
<div id="app">
<h1 v-if='seen'>hello world</h1>
<h1 v-if='hide'>hello world</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
seen:true,
hide:false,
}
});
</script>
⑥v-else和v-else-if：和v-if搭配使用
<div id="app">
<h1 v-if="type === 'A'">A</h1>
<h1 v-else-if="type === 'B'">B</h1>
<h1 v-else-if="type === 'C'">C</h1>
<h1 v-else>Not A/B/C</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
type:'D'
}
});
</script>
⑦v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue指令</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<h1 v-once>{{message}}</h1>
<input type="text" v-model='message'>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
message:'hello world'
}
});
</script>
</body>
</html>
⑧v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
<div id="app">
<h1>{{html}}</h1>
<h1 v-pre>{{message}}</h1>
<h1>{{js}}</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
html:'html',
message:'hello world',
js:'javascript',
}
});
</script>
⑨v-for列表渲染、v-on事件绑定、v-bind属性绑定、v-model双向绑定，可以参考之前的文章：Vuejs模板绑定
二、自定义指令
①在vue中，不要出现直接操作DOM的方式，如果需要操作DOM，就封装一个自定义指令，然后把这个指令作用到你需要操作的DOM节点上(以vue的方式操作，可以简化代码)
②注册绑定事件：
- 指令的名字：名字里不要加 v- 前缀（只有使用的时候才加）；如果有多个单词，则建议使用驼峰命名法；在使用的时候，首先需要加 v-前缀，然后对于驼峰命名法的指令名字，需要使用 - 短横杠拼接起来
- 全局注册：Vue.directive（‘指令名称’，{配置参数}），如果是全局指令，一定要在实例化之前注册。如果需要在多个不同的组件中使用该指令，则把它定义为全局的。
/ 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
- 局部注册：只能在当前组件使用该指令，非通用的，不需要多次使用的指令定义到局部，局部自定义指令只能在这个组件（实例)中使用，不能在其他组件中使用。
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
- 使用：
<input v-focus>
③钩子函数：Vue.directive（‘指令名称’，钩子函数，{配置参数}），钩子函数（bind、inserted、update、componentUpdated、unbind）也有两个参数，el是作用该指令的 DOM 对象，binding 是一个对象，可以获取指令的值等信息。
<div id="app" v-demo:foo.a.b="message"></div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
Vue.directive('demo',function(el,binding){
var s=JSON.stringify;
el.innerHTML=
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>'
});
new Vue({
el:'#app',
data:{
message:'hello world'
}
});
/*
name: "demo"
value: "hello world"
expression: "message"
argument: "foo"
modifiers: {"a":true,"b":true}
*/
</script>
④更多知识点参考官方文档：自定义指令
Vuejs指令的更多相关文章
- Vuejs的一些总结
http://blog.csdn.net/xllily_11/article/details/52312044 原文链接:http://mrzhang123.github.io/2016/07/14/ ...
- Vue.js常见问题
1.Vuejs组件 vuejs构建组件使用 Vue.component('componentName',{ /*component*/ }): 这里注意一点,组件要先注册再使用,也就是说: Vue.c ...
- vue 使用总结
1.Vuejs组件 vuejs构建组件使用 Vue.component('componentName',{ /*component*/ }): 这里注意一点,组件要先注册再使用,也就是说: Vue.c ...
- Vue应用框架整合与实战--Vue技术生态圈篇
实用框架以及工具 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...
- Vue相关开源项目库汇总
https://github.com/opendigg/awesome-github-vue http://www.opendigg.com/tags/front-vue README.md 内容 U ...
- 【转载】 github vue 高星项目
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...
- VUE组件汇总
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...
- 【分享】Vue 资源典藏（UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例）
Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...
- Vue开源项目汇总(史上最全)(转)
目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...
随机推荐
- -UI调试工具 SAK 布局 MD
目录 目录 SwissArmyKnife 接入方式 自动初始化版本 支持的功能 可配置项 原理 自定义功能 Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndro ...
- 部署elasticsearch（三节点）集群+filebeat+kibana
用途 ▷ 通过各个beat实时收集日志.传输至elasticsearch集群 ▷ 通过kibana展示日志 实验架构 名称:IP地址:CPU:内存 kibana&cerebro:192.168 ...
- linux权限管理（chown、chgrp、chomd）
一.文件权限 我们以/etc/passwd 文件为例,用ll长列出其属性如下所示 ll /etc/passwd 每个文件针对每类访问访问者都定义了三种权限 文件类型中: p:表示命名管道文件 d:表示 ...
- K8S学习笔记之Grafana App for Kubernetes的配置
Grafana有一套针对Kubernetes监控的APP,和Grafana-Zabbix App类似,但是配置咋一看比较麻烦,主要参数都是来自K8S. 这款APP的详细介绍请参考Grafana App ...
- Lombok简介、使用、工作原理、优缺点
1.Lombok简介官方介绍 Project Lombok is a java library that automatically plugs into your editor and build ...
- 给router-link 标签添加事件@click 、@mouseover等无效
需要加上native修饰符. 所以如果在想要在router-link上添加事件的话需要@click.native这样写 所以如果要事件有效的话,改成如下: <router-link v-for= ...
- Api测试-为postman自动添加cookie
使用postman来调试接口,会被buc-sso-csrf等拦截,需要自己挨个添加cookie,但是cookie又有失效时间,所以本篇介绍如何使用插件来自动获取cookie进行接口api测试 一.安装 ...
- Oracle11g 干净卸载
原文链接:https://www.cnblogs.com/su-root/p/9689787.html 作 者:小柏 出 处:https://www.cnblogs.com/su-root Ora ...
- pythonic-迭代器函数-itertools
认识 Python 的itertools模块提供了很多节省内存的高效迭代器, 尤其解决了一些关于数据量太大而导致内存溢出(outofmemory)的场景. 我们平时用的循环绝大多数是这样的. # wh ...
- Linux 系统管理 : last 命令详解
原文 last命令用于显示用户最近登录信息.单独执行last命令,它会读取/var/log/wtmp的文件,并把该给文件的内容记录的登入系统的用户名单全部显示出来 语法 last(选项)(参数) 选项 ...