vue中常用API、组件或元素引用、过滤器和自定义指令

最新推荐文章于 2024-09-25 23:06:37 发布

hxyfdsal

最新推荐文章于 2024-09-25 23:06:37 发布

阅读量318

点赞数 1

文章标签： vue 过滤器

本文链接：https://blog.csdn.net/fdsal/article/details/116201707

版权

本文详细介绍了Vue中的数据API（Vue.set和Vue.delete）以及事件相关API（$on, $emit, $once, $off），包括响应式对象操作和组件间通信的方法。此外，还涵盖了自定义指令、过滤器的基础用法和局部指令的使用技巧。

摘要由CSDN通过智能技术生成

常用API说明

数据相关的API

1.Vue.set

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且会触发视图更新。
使用方法： Vue.set(target,propertyName,value)
案例：

<div id="app">
    <p v-for="(item, index) in items" :key="index">{{item}}</p>
    <button @click='clickBtn'>点击</button>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data() {
            return {
                items:['HTML','JS','CSS'],
                message:'列表',
            }
        },
        methods: {
            clickBtn(){
                //this.items[1] = 'new';//['HTML','JS','CSS']---值更新了，视图没有更新
                this.$set(this.items,1,'update')
                Vue.set(this.items,3,'new')
            }
        },
    })
</script>

2.Vue.delete

删除对象的属性。如果对象是响应式的，确保删除能触发更新视图
使用方法： Vue.delete(target, propertyName/index)

<div id="app">
    <p v-for="(item, index) in items" :key="index">{{item}}</p>
    <button @click='clickBtn'>点击</button>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data() {
            return {
                items:['HTML','JS','CSS'],
                message:'列表',
            }
        },
        methods: {
            clickBtn(){
                //delete this.items[0];//['JS','CSS']---值更新了，视图没有更新
                 this.$delete(this.items,0,)
                 Vue.delete(this.items,1)
            }
        },
    })
</script>

事件相关API

1.vm.$on

监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数

使用方法：vm.$on('test', function (msg) {console.log(msg)})
常用：父子组件传值

<div id="app">
    <p>{{message}}</p>
    <child-com @show-message='handleClick'></child-com>
</div>
<script>
    Vue.component('child-com', {
        template:`
            <div>
                <button @click='sendMsg'>发送消息</button>
            </div>
        `,
        methods: {
            sendMsg(){
                this.$emit('show-message', 'message form child')
            }
        },
    })
    const app = new Vue({
        el:'#app',
        data() {
            return {
                message:'列表',
            }
        },
        methods:{
            handleClick(message){
                this.message = message
            }
        }
    })
</script>

2.vm.$emit

触发当前实例上的事件。附加参数都会传给监听器回调
使用方法：vm.$emit('test', 'hi')
典型应用：事件总线（通过在Vue原型上添加一个Vue实例作为事件总线，实现组件间相互通信，而且不受组件间关系的影响）

3.vm.$once

监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除
使用方法：vm.$once('test', function (msg) {console.log(msg)})

4.vm.$off（移除自定义事件监听器）

如果没有提供参数，则移除所有的事件监听器；vm.$off()
如果只提供了事件，则移除该事件所有的监听器；vm.$off('test')
如果同时提供了事件与回调，则只移除这个回调的监听器；vm.$off('test', callback)

组件或元素引用

ref 被用来给元素或子组件注册引用信息；引用信息将会注册在父组件的 $refs 对象上

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素

如果用在子组件上，引用就指向组件实例

<div id="app">
    <p ref="domp">{{message}}</p>
    <child-com @show-message='handleClick' ref="child"></child-com>
</div>
<script>
    Vue.component('child-com', {
        template:`
            <div>
                <button @click='sendMsg'>发送消息</button>
            </div>
        `,
        methods: {
            sendMsg(){
                this.$emit('show-message', 'message form child')
            }
        },
    })
    const app = new Vue({
        el:'#app',
        data() {
            return {
                message:'列表',
            }
        },
        methods:{
            handleClick(message){
                this.message = message
                console.log(this.$refs.domp);//p元素
                console.log(this.$refs.child);//child-com组件vue实例
            }
        }
    })
</script>

注意：

ref 是作为渲染结果被创建的，在初始渲染时不能访问它们
$refs 不是响应式的，不要试图用它在模板中做数据绑定
当 v-for 用于元素或组件时，引用信息将是包含 DOM 节点或组件实例的数组

<div id="app">
    <p v-for="(item, index) in items" :key="index" ref="p" @click='showMessage'>{{item}}</p>
</div>
<script>
    const app = new Vue({
        el:'#app',
        data() {
            return {
                items:['HTML','JS','CSS'],
            }
        },
        methods: {
            showMessage(){
                console.log(this.$refs.p);//(3) [p, p, p]
            }
        },
    })
</script>

过滤器

1.过滤器基本使用

过滤器在日常生活中也是比较常见的，例如自来水的过滤等。
在 Vue 中，过滤器的作用就是格式化数据，也就是对数据的过滤处理，比如将字符串格式化为首字母大写或者将日期格式化为指定的格式等。
下面先看一下自定义过滤器的语法

Vue.filter('过滤器名称',function(value){
//value参数表示要处理的数据
//过滤器业务逻辑，最终将处理后的数据进行返回
})

定义好以后可以使用。使用的方式如下：

<div>{{msg|upper}}</div>
<div>{{msg|upper|lower}}</div>

具体的程序如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>过滤器基本使用</title>
	</head>
<body>
<div id="app">
	<input type="text" v-model="msg" />
	<div>
		<!--使用过滤器-->
		{{msg|upper}}
	</div>
</div>
<script src="vue.js"></script>
<script>
	//定义过滤器，让输入的单词首字母变成大写.
	Vue.filter("upper", function (value) {
		//获取首字母让其转换成大写，然后拼接后面的内容。
		return value.charAt(0).toUpperCase() + value.slice(0);
	});
	const vm = new Vue({
		el: "#app",
		data: {
			msg: "",
		},
	});
</script>
</body>
</html>

过滤器在使用的时候，可以采用如下的方式：

<div>{{msg|upper|lower}}</div>

也就是，先对 msg 中的数据使用 upper 过滤器，得到的结果在交给 lower 过滤器进行处理。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>过滤器基本使用</title>
</head>
<body>
	<div id="app">
		<input type="text" v-model="msg" />
		<div>
			{{msg|upper}}
		</div>
		<div>
			{{msg|upper|lower}}
		</div>
	</div>
	<script src="vue.js"></script>
	<script>
	 //定义过滤器，让输入的单词首字母变成大写.
	 Vue.filter("upper", function (value) {
		//获取首字母让其转换成大写，然后拼接后面的内容。
		return value.charAt(0).toUpperCase() + value.slice(0);
	 });
	 Vue.filter("lower", function (value) {
		return value.charAt(0).toLowerCase() + value.slice(0);
	 });
	 const vm = new Vue({
		el: "#app",
		data: {
			msg: "",
		},
	});
	</script>
</body>
</html>

自定义指令

1.自定义指令基本用法

为什么需要自定义指令呢？
因为内置指令不满足需求。

下面看一下基本的创建自定义指令语法:

Vue.directive('focus',{
 inserted:function(el){
  //获取元素焦点
  el.focus();
 }
})

自定义指令用法

<input type="text" v-focus>

具体代码：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>自定义指令基本使用</title>
 </head>
<body>
 <div id="app">
  <input type="text" v-focus />
 </div>
 <script src="vue.js"></script>
 <script>
  Vue.directive("focus", {
    inserted: function (el) {
    //el:表示指令所绑定的元素
    el.focus();
   },
  });
  const vm = new Vue({
   el: "#app",
   data: {},
  });
 </script>
</body>
</html>

在上面的代码中，我们通过 directive 方法创建了一个 focus 指令。
在使用该指令的时候，一定要加上 v- 的形式。
inserted 表示的是指令的钩子函数，含义是：被绑定元素插入父节点时调用。

2.自定义指令-带参数

带参数的自定义指令创建的语法(改变元素背景色)

Vue.directive('color',{
	inserted:function(el,binding){
		//binding表示传递过来的参数
		el.style.backgroundColor=binding.value.color;
	}
})

指令的用法

<input type="text" v-color='{color:"orange"}' />

下面，看一下完整的代码案例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>自定义指令带参数</title>
	</head>
<body>
	<div id="app">
		<input type="text" v-color="msg" />
	</div>
	<script src="vue.js"></script>
	<script>
	//自定义指令-带参数
	Vue.directive("color", {
		bind: function (el, binding) {
			el.style.backgroundColor = binding.value.color;
		},
	});
	const vm = new Vue({
		el: "#app",
		data: {
			msg: {
				color: "blue",
			},
		},
	});
</script>
</body>
</html>

通过上面的代码，可以看到定义了一个 color 的指令，在使用的时候传递了 msg 对象。
所以这个对象会给 binding 这个参数，我们通过这个参数的 value 属性获取 msg 对象中的 color 属性的值，然
后用来设置文本框的背景色。
这里使用了 bind 这个钩子函数：只调用一次，第一次绑定指令到元素时调用，我们可以在此绑定只执行一次的初
始化动作。

3.自定义局部指令

局部指令的基本语法：

directives:{
	focus:{
		//指令的定义
		inserted:function(el){
			el.focus()
		}
	}
}

在 Vue 实例中添加 directives
具体实现的代码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>局部指令</title>
</head>
<body>
	<div id="app">
		<input type="text" v-color="msg" />
	</div>
	<script src="vue.js"></script>
	<script>
		const vm = new Vue({
			el: "#app",
			data: {
				msg: {
					color: "red",
				},
			},
			directives: {
				color: {
					bind: function (el, binding) {
						el.style.backgroundColor = binding.value.color;
						},
					},
				},
			});
	</script>
</body>
</html>