【Vue】全套$...方法使用

已于 2023-05-08 14:31:47 修改
阅读量1.8k 收藏 23
点赞数 3
分类专栏： Vue 全家桶 文章标签： vue.js javascript 前端
于 2022-07-25 11:27:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45677671/article/details/125970048
版权

文章目录

一、事件

监听事件：$on

  • $on：监听当前实例上的自定义事件。
  • 事件可以由 vm.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。
  • 语法：vm.$on( event, callback )
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="$emit('test')">事件按钮</button>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					
				},
				methods:{
					test(){
						console.log('test事件触发了');
					}
				}
			})
			app.$on('test', function() {
				console.log('$on事件触发了');
			})
		</script>
	</body>
</html>
  • 运行结果：

在这里插入图片描述

监听一次：$once

  • $once：监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。
  • 语法：vm.$once( event, callback )
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="$emit('test')">事件按钮</button>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					
				},
				methods:{
					test(){
						console.log('test事件触发了');
					}
				}
			})
			app.$once('test', function() {
				console.log('$on事件触发了');
			})
		</script>
	</body>
</html>
  • 运行结果：多次点击只触发一次
    在这里插入图片描述

移除监听：$off

  • $off移除自定义事件监听器。
  • 语法：vm.$off( [event, callback] )
1. 如果没有提供参数，则移除所有的事件监听器；
2. 如果只提供了事件，则移除该事件所有的监听器；
3. 如果同时提供了事件与回调，则只移除这个回调的监听器。
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="$emit('test')">事件按钮</button>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					
				},
			})
			app.$once('test', function() {
				console.log('$on事件触发了');
			})
			app.$off("test")
		</script>
	</body>
</html>
  • 运行结果：事件将不会再触发

在这里插入图片描述

触发事件：$emit

  • $emit：触发当前实例上的事件。附加参数都会传给监听器回调。
  • 语法：vm.$emit( eventName, […args] )
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<child  @childclick="changeTT"></child>
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			//子组件
			var child = {
				template: `<button @click="childFun">子组件按钮</button>`,
				methods: {
					childFun() {
						this.$emit("childclick", 88);
					}
				}
			}
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据
					
				},
				components: {
					child,
				},
				methods: {
					changeTT(value) {
						console.log("父组件的触发了:", value);
					},
				}
			})
		</script>
	</body>
</html>
  • 运行结果：点击按钮后

在这里插入图片描述

二、数据

监听数据：$watch

  • 语法：
// 键路径
vm.$watch('a.b.c', function (newVal, oldVal) {
  // 做点什么
})

// 函数
vm.$watch(
  function () {
    // 表达式 `this.a + this.b` 每次得出一个不同的结果时
    // 处理函数都会被调用。
    // 这就像监听一个未被定义的计算属性
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // 做点什么
  }
)

// vm.$watch 返回一个取消观察函数，用来停止触发回调：
var unwatch = vm.$watch('a', cb)
// 之后取消观察
unwatch()
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="msg" />
		</div>
		<button type="button" onclick="unwatch()">取消监听</button>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					msg: ''
				},
			})
			// 键路径
			var unwatch =  app.$watch('msg', function(newVal, oldVal) {
				console.log(newVal, oldVal);
			})
		</script>
	</body>
</html>

  • 运行结果：未点击取消监听前
    在这里插入图片描述

  • 运行结果：点击取消监听后
    在这里插入图片描述

添加数据：$set

  • 语法：用法可参考Vue.set
/*
	target: 要设置的对象或数组，
	propertyName/index：要设置的属性名或数组索引，
	value：要设置的值
*/
vm.$set( target, propertyName/index, value )
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{json}}
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					json: {
						name: 'jj',
					}
				},
			})
			app.$set(app.json, "age", 18)
		</script>
	</body>
</html>
  • 运行结果：

在这里插入图片描述

删除数据：$delete

  • 语法：用法可参考Vue.delete
/*
	target: 要设置的对象或数组，
	propertyName/index：要设置的属性名或数组索引，
*/
vm.$delete( target, propertyName/index)
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{json}}
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					json: {
						name: 'jj',
						age: 18
					}
				},
			})
			app.$delete(app.json, 'name')
		</script>
	</body>
</html>
  • 运行结果：
    在这里插入图片描述

三、生命周期

手动挂载：$mount()

  • 如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。
  • 可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{msg}}
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			// 声明vue的对象
			var app = new Vue({
				// el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据
					msg: "hello world"
				},
			})
			app.$mount("#app")	// 将 Vue 实例挂载到dom节点
		</script>
	</body>
</html>
  • 运行结果：
    在这里插入图片描述

在这里插入图片描述

强制渲染：$forceUpdate()

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件

  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{log()}}
			<child></child>
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var child = {
				data() {
					return {}
				},
				template: `<div>我是子组件{{test()}}</div>`,
				methods: {
					test() {
						console.log('子组件渲染了');
					}
				}
			}
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据
					
				},
				methods: {
					log:function() {
					console.log("父组件渲染了");
				}},
				components:{
					child
				}
			})
			app.$forceUpdate()	// 父组件将再次渲染
		</script>
	</body>
</html>
  • 运行结果：

在这里插入图片描述

延迟更新：$nextTick()

  • $nextTick：将回调延迟到下次 DOM 更新循环之后执行。
  • 在修改数据之后立即使用它，然后等待 DOM 更新。
  • 它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-show="isShow" ref="myinput" />
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据
					isShow: false
				},
				mounted: function() {
					this.isShow = true;
					// 视图还没更新完，就获取到了dom节点的信息，此时获取不到输入框的焦点
					// this.$refs.myinput.focus();
					// 这个问题可以使用 nextTick来解决
					// nextTick 有一个参数 ，是回调函数，作用是，等待 视图更新后，在执行 回调函数中的代码
					// 此时就能获取到输入框的焦点
					this.$nextTick(() => {
						this.$refs.myinput.focus();
					})
				}
			})
		</script>
	</body>
</html>
  • 运行结果：

在这里插入图片描述

在这里插入图片描述

销毁实例：$destroy()

完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。

  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="msg">
		</div>
		<button onclick="destroy()">销毁</button>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据
					msg:"",
				},
				watch:{
					msg(val){
						// 组件销毁后，将不再打印
						console.log(val);
					}
				},
				beforeDestroy() {
					console.log("beforeDestroy触发了");
				},
				destroyed(){
					console.log("destroyed触发了");
				}
			})
			function destroy() {
				//销毁 app 实例与 DOM 之间的关联
				app.$destroy();
			}
		</script>
	</body>
</html>
  • 运行结果：

在这里插入图片描述

四、属性

根元素：$el

  • Vue 实例使用的根 DOM 元素。

  • 示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
				{{msg}}
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据
					msg: "vue对象成功挂载到dom节点"
				},
			})
		</script>
	</body>
</html>
  • 运行结果：
    在这里插入图片描述

根属性：$root

  • $root： 可以获取到根节点的所有属性，如果当前实例没有父实例，此实例将会是其自己。

  • 示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<child></child>
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			//子组件
			var child = {
				data() {
					return {
						mm: ""
					}
				},
				template: `<div>子组件{{mm}}</div>`,
				mounted() {
					this.$root.test();
					this.mm = this.$root.msg;
				}
			}
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据
					msg: "hello"
				},
				methods: {
					test() {
						console.log("根节点的函数");
					}
				},
				computed: {
					bar() {
						console.log("根节点的计算属性");
					}
				},
				components: {
					child
				}
			})
		</script>
	</body>
</html>
  • 运行结果：
    在这里插入图片描述

父组件：$parent

  • $parent：父实例，如果当前实例有的话。
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<child></child>
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			//子组件
			var child = {
				data() {
					return {
						mm: "",
						childtext: "我是子组件"
					}
				},
				template: `<div>子组件{{mm}}</div>`,
				mounted() {
					//在子组件获取父组件的数据，可以使用 parent
					console.log(this.$parent);
					this.mm = this.$parent.msg;
				}
			}
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据
					msg: "hello"
				},
				components: {
					child
				}
			})
		</script>
	</body>
</html>
  • 运行结果：
    在这里插入图片描述

子组件：$children

  • $children：当前实例的直接子组件。
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{msg}}
			<button @click="test">触发</button>
			<child></child>
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			//子组件
			var child = {
				data() {
					return {
						mm: "",
						childtext: "我是子组件"
					}
				},
				template: `<div>子组件</div>`,
			}
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据
					msg: "hello"
				},
				components: {
					child
				},
				methods: {
					test() {
						console.log("根节点的函数");
						//注意：$children 的使用你必须知道子组件的下标，没有办法使用
						this.msg = this.$children[0].childtext;
					}
				},
				mounted() {
					console.log(this.$children);
				},
			})
		</script>
	</body>
</html>
  • 运行结果：未点击触发前

在这里插入图片描述

  • 运行结果：点击触发后
    在这里插入图片描述

各组件：$refs

  • $refs 使用 ，是在 js原生组件或 自定义组件上写 ref 属性

  • 调用时，需要写成 this.$refs.ref的属性名.*****

  • 尽量不使用refs，因为他没有使用虚拟dom ，性能稍差

  • 示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div ref="oDiv">父组件的div{{message}}</div>
			<child ref="child"></child>
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			//子组件
			var child = {
				data() {
					return {
						msg: 'hello'
					}
				},
				template: `<div>我是子组件</div>`,
				methods: {
					test() {
						console.log('子组件的函数被触发了');
					}
				}
			}
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据
					message: ""
				},
				components: {
					child
				},
				mounted() {
					console.log(this);
					console.log(this.$refs.oDiv);
					//普通的div的使用refs修改其属性
					this.$refs.oDiv.style.color = "green";
					//使用 refs获取子节点的属性
					console.log(this.$refs.child.msg);
					this.message = this.$refs.child.msg;
					this.$refs.child.test();
				}
			})
		</script>
	</body>
</html>
  • 运行结果：
    在这里插入图片描述

各配置：$options()

  • $options()：用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处：
new Vue({
  customOption: 'foo',
  created: function () {
    console.log(this.$options.customOption) // => 'foo'
  }
})
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="msg">
			<button @click="log()">打印</button>
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据
					msg:"222",
				},
				methods: {
					log(){
						console.log(this.$options);
					}
				}
			})
		</script>
	</body>
</html>
  • 点击打印后：

在这里插入图片描述

一颗不甘坠落的流星
关注
  • 3
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue知识点总结
liyihh的博客
10-04 969
1、Vue和其他两大框架的区别 Angular 学习成本太高 React 代码可读性差 Vue 学习成本较低 很容易上手 传送门 https://cn.vuejs.org/v2/guide/comparison.html ️2、Vue是什么 Vue是一套用于构建用户界面的渐进式框架 “前端框架” 让程序员脱离自己操作DOM 专注于写逻辑和操作数据 Vue的核心库只关注视图层 易上手 便于与第三方库或既有的项目整合 当与现代化的工具链以及各种支持的库结合使用时 Vue也完全能够为复杂的单页应用提供驱动 ️3、
浅谈vue中的$含义及其用法（$xxx引用的位置）
vvv3171071的博客
04-09 2万+
看了各个帖子的描述，还是未能参透$在vue中所想发挥的本意，将一些一知半解的理解摘抄下来，顺带附上自己常见的用法，以加深理解和记忆。 摘抄 这些只是Vue的命名规则，为了区分普通变量属性，避免我们自己声明或者添加自定义属性导致覆盖 $event 是 vue 提供的传递实践的参数。 $是在vue中所有实例中都可用的一个简单约定，这样做会避免和已被定义的数据，方法，计算属性产生冲突。 $是在vue中所有实例中都可用的一个简单约定，这样做会避免和已被定义的数据，方法，计算属性产生冲突。 另一个好问题
vue 中的 $ （持续更新...）
Realizee的博客
05-19 2425
​1.`${}`模板字符串; 2. $是vue的命名规则，增强区分的，来说明这是内置的实例方法属性。自定义的就不要带$了。 ​
vue的this.$ 常见的用法
weixin_45266691的博客
05-24 410
是一个常见的用法，用于访问 Vue 实例的一些内置属性、方法或者插件提供的功能。: 访问用于发起 HTTP 请求的插件，如 axios、vue-resource 等。属性和方法，具体可根据需要查看 Vue.js 的官方文档以及所使用的插件的文档。: 在当前实例上监听一个自定义事件，但是只触发一次。: 响应式地添加一个属性到 Vue 实例的数据对象。: 响应式地删除 Vue 实例的数据对象的属性。: 在子组件中触发父组件绑定的事件。: 监听 Vue 实例上的数据变化。: 获取 Vue 实例的数据对象。
vue中的$
weixin_44774062的博客
09-27 6902
this.$data this.$watch this.$el //与document.getElementById('ID名')是严格等于的。其他属性以此类推 this.$set this.$options this.$nextTick(()=>{ }) this.$refs vue中的$大概有以上几种。以便与用户定义的属性区分开来。 vue中的$存在的意义： 1.以便与用户定义的属性区分开来 举个例子：vm.watch这个...
vue2中的$符号（内置变量）
letianxf的博客
12-24 7392
vue2中的$符号（内置变量）
Vue的属性和方法（$符号说明）
five-five
03-07 1424
# Vue的属性和方法 在 Vue.js 中，$ 是一个特殊前缀，用于表示 Vue 实例或 Vue 组件上的内置属性和方法。这些属性和方法被称为“实例属性”或“实例方法”。 以下是一些常见的实例属性和方法： * `$data`：Vue 实例的数据对象。 * `$props`：Vue 组件的 props 对象。 * `$el`：Vue 实例或组件的根 DOM 元素。 * `$refs`：一个对象，包含所有具有 ref 属性的子组件和 DOM 元素。 * `$options`：Vue 实例或组件的选项对象
Vue.js 开发教程全套
最新发布
06-10
Vue.js 是一种流行的前端框架，它提供了构建用户界面的渐进式方法。以下是一些关于 Vue.js 的开发教程、案例以及相关项目的信息： **一、Vue.js 开发教程** 对于初学者，Vue.js 官方文档是一个很好的起点。它详细...
vue.js 全套教程.txt
09-03
vue.js 全套教程.txt
前端框架之Vue.js库的使用
03-03
Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面，这些可以根据项目的需要灵活选择，所以说，Vue.js是一套构建用户界面的渐进式框架。Vue的核心库只关注视图层，Vue的目标是通过尽可能简单的API...
Vue.js最新书籍,全套书籍
06-23
Vue.js最新书籍,全套书籍,学好Vue走遍天下都不怕!
关于$符号总结一下
热门推荐
CoCoManYYn的博客
05-23 2万+
vue的实例属性和方法 除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：   var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // =&gt; true vm.$el === doc...
vue中的$符号
will5451的博客
05-16 9605
$是在vue中所有实例中都可用的一个简单约定，这样做会避免和已被定义的数据，方法，计算属性产生冲突。 另一个好问题！如果你写成： Vue.prototype.appName = 'My App'; 那么你希望下面的代码输出什么呢？ new Vue({ data: { // 啊哦，`appName` *也*是一个我们定义的实例属性名！ appName: 'The name of some other app' }, beforeCreate: function () { c
Vue杂谈 $的用法
ikkkp的博客
04-10 1916
我们已经可以从Vue官网的api之中得到许多有关Vue$的用法，在这里将对部分$的用法进行说明。 下面附上Vue官网的api： API — Vue.js (vuejs.org)https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B-property 实例property中的$： vm.$data: 解释：Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象 property 的访问。也就是说你可以用vm.$data的方式访问Vue实例之中的
vue中$符号的使用
m0_52364694的博客
05-28 2198
$符号代表vue内置的一批变量和函数
vue中$的使用
qq_44844751的博客
03-24 2570
$默认为全局property，使用Vue.prototype. $xx声明的property是不想污染全局作用域，一些组件引入后会留一个实例property如echartimport echarts from 'echarts'，留下echarts实例供我们调用。 使用vue.prototype. $echarts = echarts后，我们就能直接使用 $echarts避免重名 ...
Vue 里的$如何理解
周红伟讲AI
04-19 5123
如下代码： new Vue({ el: '#app', router, store, i18n, test, render: h => h(App) }) // 用的时候 this.$store.dispatch(xxx) 这里的 $store 是不是仅仅是 vue 里的一种命名方式而已？只要我在 new Vue 里初始化的了的，都可以用$+name...
关于vue中的$符号总结一下
MYuanFang的博客
04-23 4185
转载：https://blog.csdn.net/qq_36838191/article/details/80934948
vue语法 `${ }` （模版字符串）
yh_zeng2的博客
04-27 9046
vue语法 `${ }` （模版字符串）
vue $refs 用法
05-23
Vue.js中的$refs是一个对象，它持有已注册过ref特性的所有组件和元素。 使用$refs可以访问组件或元素的属性和方法。 以下是使用$refs的示例代码： 1. 在组件中注册ref特性 ``` <template> <div> <button ref="myButton" @click="handleClick">Click Me</button> </div> </template> ``` 2. 使用$refs访问组件或元素 ``` <script> export default { methods: { handleClick() { this.$refs.myButton.disabled = true; // 禁用按钮 } } } </script> ``` 在上面的示例中，我们在<button>元素上注册了ref特性，并在组件中定义了一个handleClick方法。当按钮被点击时，我们可以使用$refs.myButton来访问该按钮，并设置它的disabled属性为true，从而禁用该按钮。 需要注意的是，$refs并不是响应式的，所以在组件或元素被创建或销毁时，$refs的内容也会相应地更新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一颗不甘坠落的流星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值