1.自定義指令 directive
以自定義v-css指令為例:
- 局部指令
<script>
export default {
//自定義v-css指令
directives: {
css: {
inserted (el, bind) {
let styleObj = bind.value
let arr = []
for (let key in styleObj) {
arr.push(key + ':' + styleObj[key])
}
arr = arr.join(';')
el.style.cssText = arr
}
}
}
</script>
- 全局指令
在main.js文件中自定義全局的指令
Vue.directive('css', {
inserted (el, binding) {
let styleObj = binding.value
let arr = []
for (let key in styleObj) {
arr.push(key + ':' + styleObj[key])
}
arr = arr.join(';')
el.style.cssText = arr
}
})
使用自定義指令
<p v-css="{color: 'orange', 'font-size': '24px'}">我是p標(biāo)簽</p>
自定義指令v-css修改p標(biāo)簽樣式
2.插件
具體請(qǐng)參考官方文檔:https://cn.vuejs.org/v2/guide/plugins.html
導(dǎo)入插件(以vue-router為例)
執(zhí)行命令:npm install vue-router --save
如果某個(gè)插件需要全局使用,可以把該插件導(dǎo)入在main.js文件中,在Vue.use(xxx插件)注冊(cè)下,這樣就可以全局調(diào)用該插件的方法了!
注意:有些插件需要實(shí)例化
設(shè)置全局插件
3.單位件組件
scoped:局部的
如果沒(méi)有用scoped,那么該樣式就會(huì)泄漏致全局(所有引入該組件的父組件都會(huì)引入這樣的樣式)
可以根據(jù)實(shí)際情況,具體需求,決定是否使用 scoped 修飾
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
......
</style>
