前端vue学习曲线（5）缩写

最新推荐文章于 2024-08-08 22:38:20 发布

原创最新推荐文章于 2024-08-08 22:38:20 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了Vue.js中v-bind和v-on指令的缩写用法，通过实例展示了如何使用缩写语法来简化代码，提高开发效率。文章包含了一个完整的HTML页面示例，演示了如何使用Vue.js进行数据绑定和事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

缩写

1.v-bind 缩写

<!-- 完整语法 --><a v-bind:href="url">...</a>

<!-- 缩写 --><a :href="url">...</a>

2.v-on 缩写

<!-- 完整语法 --><a v-on:click="doSomething">...</a>

<!-- 缩写 --><a @click="doSomething">...</a>

例子：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>

	<body>
		<div id="app1">
			<a v-bind:href="url">
				完整语法v-bind:href
			</a>||
			<a :href="url">
				缩写 :href
			</a>
			<br />
			<button v-on:click="doSomething">
				完整语法v-on:click
			</button>
			<button @click="doSomething">
				缩写@click
			</button>
		</div>
	</body>

</html>
<script>
	var app1 = new Vue({
		el: "#app1",
		data:{
			url:"https://cn.vuejs.org/v2/guide/syntax.html#缩写"
		},
		methods:{
			doSomething:function(){
				console.log("123")
			}
		}
	})
</script>