【Vue】全局方法的使用
全局过滤器和局部过滤器的使用
·
全局方法（可局部使用）
局部使用案例请查看：vue 组件各选项用法
1.1、组件 component
- 语法：
Vue.component(name,obj)
- name: 组件名
- obj: 组件的属性
- 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 使用组件 按照html标签来使用-->
<firstcom></firstcom>
<sec-com></sec-com>
</div>
<!-- 引入vue插件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 全局组件
Vue.component('firstcom', {
//注意****： 组件中的data一定是一个函数，原因是函数有局部作用域，不会和其他组件中重名的数据相冲突
//num 的值，每个组件都会各自独立的维护自己的作用域
//组件中的模板一定是一个根节点
data: function() {
return {
msg: "组件中的 hello",
num: 0
}
},
template: `<div><h1>欢迎来到组件世界</h1><div>我是一个组件，666!{{msg}}</div>
<button @click="num++">点击了{{num}}次</button>
</div>`
})
// 组件名如果是驼峰式写法，那么在html中使用时必须转成短横的写法：
// 组件名：liMouMou html中使用：li-mou-mou
// 建议组件名直接写小写或短横写法
Vue.component('secCom', {
//注意****： 组件中的data一定是一个函数，原因是函数有局部作用域，不会和其他组件中重名的数据相冲突
//组件中的模板一定是一个根节点
data: function() {
return {
msg: "组件中的 hello"
}
},
template: `<div>我的第二个组件</div>`
})
// 声明vue的对象
var app = new Vue({
el: "#app", // 将vue对象挂载到dom节点
data: { // 定义vue对象的数据
},
})
</script>
</body>
</html>
- 运行结果：
1.2、混入 mixin
- 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。
- 一个混入对象可以包含任意组件选项。
- 当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
- mixin 中可以使用 data、methods、watch、directive、filter、钩子函数
- 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<button @click="test">调用mixin中的函数</button>
</div>
<!-- 引入vue插件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//全局混入
//mixin在使用中，是将相关代码拷贝一份放到组件中，如果和组件中的相关内容重复的话，采用就近原则
Vue.mixin({
methods: {
test: function() {
console.log("混入的函数被触发了");
}
}
})
// 声明vue的对象
var app = new Vue({
el: "#app", // 将vue对象挂载到dom节点
data: { // 定义vue对象的数据
},
})
</script>
</body>
</html>
- 运行结果：
1.3、过滤 filter
- 语法：
Vue.filter(name,function)
- name: 过滤器名称
- function: 执行函数，必须有一个过滤后的返回值
使用方法：变量名 | 过滤器名称
{{name | function()}}
- 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 使用双大括号显示vue定义的变量内容 -->
<p>{{aa | toUpper}}</p>
<p>{{aa | subFilter(1)}}</p>
</div>
<!-- 引入vue插件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 定义全局过滤器，需要放在new Vue前面
Vue.filter("toUpper", (val) => {
console.log("toUpper 过滤器触发了", val);
// 小写字母转大写字母
return val.toUpperCase();
})
// val：使用过滤器的变量
// num：过滤器要传的参数
Vue.filter("subFilter", (val, num) => {
console.log("subFilter 过滤器触发了", val, num);
// substring：截取字符串
return val.substring(0, num);
})
// 声明vue的对象
var app = new Vue({
el: "#app", // 将vue对象挂载到dom节点
data: { // 定义vue对象的数据
aa: 'hello',
BB: 'WORLD',
},
})
</script>
</body>
</html>
- 运行结果：
1.4、指令 directive
- 语法：
Vue.directive(sting,obj)
- sting: 指令名
- obj: 指令属性
- 无参的全局自定义指令
- 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 自定义指令名称前面需要带上 v- 前缀 -->
<p v-basefocus>自定义指令</p>
</div>
<!-- 引入vue插件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 全局自定义指令，必须放在new Vue的前面执行
Vue.directive('basefocus',{
// inserted：当被绑定的元素插入到 DOM 中时执行
inserted(el){
// el:代表的是使用自定义指令的标签
console.log("自定义指令运行了");
console.log(el);
el.style.color = 'red'
}
})
// 声明vue的对象
var app = new Vue({
el: "#app", // 将vue对象挂载到dom节点
data: {}, // 定义vue对象的数据
})
</script>
</body>
</html>
- 运行结果：
- 有参的全局自定义指令
- 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 自定义指令名称前面需要带上 v- 前缀 -->
<p v-mycolor="yellow">自定义指令</p>
</div>
<!-- 引入vue插件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 全局自定义指令，必须放在new Vue的前面执行
Vue.directive('mycolor',{
// inserted：当被绑定的元素插入到 DOM 中时执行
inserted(el,binding){
//el:代表的是使用自定义指令的标签
//binding 自定义指令传过来的参数
console.log("自定义指令运行了");
console.log(el);
console.log(binding);
el.style.color = binding.expression;
}
})
// 声明vue的对象
var app = new Vue({
el: "#app", // 将vue对象挂载到dom节点
data: {}, // 定义vue对象的数据
})
</script>
</body>
</html>
- 运行结果：
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
2
0- 0
已为社区贡献10条内容
所有评论(0)