05vue_模板语法_缩写

最新推荐文章于 2023-06-10 18:45:05 发布

田江

最新推荐文章于 2023-06-10 18:45:05 发布

阅读量384

点赞数

分类专栏： vue 文章标签： vuejs vue 缩写模板语法

本文链接：https://blog.csdn.net/jiang7701037/article/details/79347259

版权

vue 专栏收录该内容

49 篇文章 25 订阅

订阅专栏

v- 前缀作为vue的属性提示（因为，vue是利用HTML的自定义属性，vue的属性都是以“v-”开头的），用来识别模板中 Vue 特定的属性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

v-bind 缩写是冒号

v-on 缩写是 @

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		[v-cloak] {
		  display: none;
		}
	</style>
	<body>		
		<div id="app1">			
			<input type="button" value="测试" @click="func()" />
			<img :src="imgsrc" :style="imgcss" />			
		</div>
	</body>
</html>
<script type="text/javascript" src="vue.min.js" ></script>
<script type="text/javascript">
/*
v-bind：的缩写是冒号
v-on的缩写是@
*/

let v1 = new Vue({
	el:"#app1",
	data:{
		imgsrc:"img/timg2.jpg",
		imgcss:{"width":"120px","height":"80px"}
	},
	methods:{
		func:function(){
			alert('点击了按钮');
		}
	}
});

</script>

田江

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
05vue_模板语法_缩写

v- 前缀作为vue的属性提示（因为，vue是利用HTML的自定义属性，vue的属性都是以“v-”开头的），用来识别模板中 Vue 特定的属性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single...
复制链接

扫一扫