1、vue 去除前后的空格
<el-input v-model.trim="data"></el-input>
https://www.cnblogs.com/mmzuo-798/p/9301109.html
2、vue自定义指令
- 全局
Vue.directive('bgcolor', function (el, binding) {
el.style.backgroundColor = binding.value
})
- 局部
directives: {
bgcolor: (el, binding) => {
el.style.backgroundColor = binding.value
}
}
https://www.cnblogs.com/dhui/p/13268040.html
3、vue过滤器，filters
- 局部过滤器（与methods，watch平级）
filters: {
componentFilter(value) {
return value + '!!!'
},
},
用法：{{ 'a' | componentFilter }} // a!!!
https://www.jianshu.com/p/ad21df1914c5
- 全局过滤器（main.js）
方法1
Vue.filter('aaa', function (value) {
return value + '!!!'
})
https://www.jianshu.com/p/ad21df1914c5
方法2
- filters/index.js
const isNullOrEmpty = function(val) {
if (val == null || val == "" || typeof(val) == undefined) {
return true;
} else {
return false;
}
}
export {
isNullOrEmpty
}
- main.js
import * as filters from '../filters/index'
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
- 组件里
{{date | isNullOrEmpty}}是否为空
https://www.cnblogs.com/yanwuming/p/10603058.html
4、指令了解
https://jspang.com/detailed?id=21#toc330
- v-pre
在模板中跳过vue的编译，直接输出原始值
<div v-pre>{{message}}</div> // 直接显示{{message}}
- v-cloak 在vue渲染完指定的整个DOM后才进行显示
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
- v-once
如果显示的信息后续不需要再修改，使用v-once
使用了v-once之后，在控制台上修改app.message无法更改
v-once用于一次性数据，固定数据，可以提高性能
<div v-once>{{info}}</div
5、组件全局注册
- main.js
import Vue from 'vue'
import pageHead from './components/page-head.vue'
Vue.component('page-head',pageHead)
- 组件内使用
<template>
<div>
<page-head></page-head>
</div>
</template>
