vue自定义指令、JSX语法和过滤器
目录1、自定义指令1.1、全局指令1.2、局部指令2、JSX语法3、过滤器3.1、全局过滤器3.2、局部过滤器1、自定义指令1.1、全局指令在main.js中使用directive()函数自定义一个v-focus全局指令(实际开发过程中,我们可以创建一个js文件专门管理自定义全局指令,然后在main.js中引入该文件即可)import Vue from 'vue'import App from '
·
1、自定义指令
1.1、全局指令
在main.js
中使用directive()
函数自定义一个v-focus
全局指令(实际开发过程中,我们可以创建一个js文件专门管理自定义全局指令,然后在main.js中引入该文件即可)
import Vue from 'vue'
import App from './App'
//自定义全局指令 v-focus
Vue.directive('focus',{
inserted:function (ele) {
ele.focus();
}
});
省略....
在其它组件中引入v-focus
指令后,表单会自动获取焦点
<div>
自动获取焦点
<input type="text" v-focus />
</div>
1.2、局部指令
局部指令定义使用directives
,我们在某个组件中export default {}
中,定义一个设置颜色的指令v-orange
export default {
name: "AComponent",
data(){
return{
}
},
directives:{
orange:{
inserted(ele){
ele.style.color="orange";
}
}
}
}
在模板中引用,对于文本被设置为橙色
<div>
<p v-orange>自定义局部指令</p>
</div>
2、JSX语法
通常情况我们都是通过<template>模板
渲染内容,除此之外还可以使用render()函数
直接渲染。
新建一个JSXComponent.vue
组件,注释掉<template>模板
元素,使用render()函数
渲染一个点击赋值事件
<!--<template>-->
<!--</template>-->
<script>
export default {
name: "JSXComponent",
data(){
return{
msg: "",
}
},
methods:{
clickHandler:function(){
this.msg="测试JSX(赋值)"
}
},
render() {
return(
<div>
{ this.msg }
<button onClick={ this.clickHandler }>点我</button>
</div>
)
}
}
</script>
3、过滤器
过滤器通常用来格式化数据,通过“管道”方式引用
3.1、全局过滤器
在main.js
中使用Vue.filter()
函数自动定义一个capitalize
全局指令,将英文首字母转为大写
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
定义一个组件,然后引入capitalize过滤器
,将msg的值hello
格式化为Hello
<template>
<div>
<p>{{ msg | capitalize }}</p>
</div>
</template>
<script>
export default {
name: "AComponent",
data(){
return{
msg:"hello"
}
}
}
</script>
3.2、局部过滤器
使用filters:{}
,与methods:{}
同级
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)