【Vue】全局方法的使用

一颗不甘坠落的流星

已于 2023-05-15 13:40:36 修改

阅读量4.8k

点赞数 2

分类专栏： Vue 全家桶文章标签： Vue组件混入mixin 过滤器filter 指令directive 全局方法

于 2022-07-22 09:31:00 首次发布

本文链接：https://blog.csdn.net/qq_45677671/article/details/125925398

版权

Vue 全家桶专栏收录该内容

32 篇文章 49 订阅

订阅专栏

文章目录

- 全局方法（可局部使用）

全局方法（可局部使用）

局部使用案例请查看：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>